Installation & Setup

The Opportify Fraud Protection script is loaded as a CDN-hosted <script> tag. It requires no npm install, no build step, and no backend changes for basic usage.

Prerequisites

An Opportify account
A public key (pk_live_...) from Settings → API Keys
A Form Endpoint created in the Admin Console Quick Start ("Create a Form Endpoint")

Step 1 — Add the Script Tag

Place the script tag inside the <head> of every page that contains a protected form. Load it before any user interaction can reach the form.

<!-- Recommended: inside <head>, with async -->
<script
  src="https://cdn.opportify.ai/f/v1.2.0.min.js"
  data-opportify-key="YOUR_PUBLIC_KEY"
  async
></script>

Attribute reference

Attribute	Required	Description
`src`	yes	Versioned CDN URL. Always use a pinned version in production.
`data-opportify-key`	yes	Your Opportify public key (`pk_live_...` or `pk_test_...`).
`async`	recommended	Prevents the script from blocking page render.

Always pin the version

Use a specific version (v1.2.0) rather than a latest alias so your pages behave consistently during Opportify releases.

Step 2 — Point Your Form at an Endpoint

Set the form's action attribute to the Submit URL from your Form Endpoint. The Submit URL has the format:

https://api.opportify.ai/intel/v1/submit/<your-endpoint-id>

<form
  action="https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID"
  method="POST"
>
  <!-- your fields -->
  <button type="submit">Send</button>
</form>

The script reads the action URL, extracts the endpoint ID from the last path segment, and uses it when proxying the submission.

Step 3 — Verify Your Install

Open the page in a browser, submit the form, and check the Form Submissions page in the Opportify Admin Console. A new row should appear within a few seconds.

You can also confirm the script is active by opening DevTools → Network, submitting the form, and verifying that requests to /intel/v1/init and /intel/v1/submit/{endpointId} appear.

Platform-Specific Instructions

Plain HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script
      src="https://cdn.opportify.ai/f/v1.2.0.min.js"
      data-opportify-key="YOUR_PUBLIC_KEY"
      async
    ></script>
  </head>
  <body>
    <form action="https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID" method="POST">
      <input name="email" type="email" required />
      <button type="submit">Subscribe</button>
    </form>
  </body>
</html>

React / Next.js (Pages Router)

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            src="https://cdn.opportify.ai/f/v1.2.0.min.js"
            data-opportify-key="YOUR_PUBLIC_KEY"
            async
          ></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

React / Next.js (App Router)

// app/layout.tsx
import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html>
      <head>
        <script
          src="https://cdn.opportify.ai/f/v1.2.0.min.js"
          data-opportify-key="YOUR_PUBLIC_KEY"
          async
        ></script>
      </head>
      <body>{children}</body>
    </html>
  );
}

Vue 3 / Vite

<!-- index.html (project root) -->
<head>
  <script
    src="https://cdn.opportify.ai/f/v1.2.0.min.js"
    data-opportify-key="YOUR_PUBLIC_KEY"
    async
  ></script>
</head>

Angular

<!-- src/index.html -->
<head>
  <script
    src="https://cdn.opportify.ai/f/v1.2.0.min.js"
    data-opportify-key="YOUR_PUBLIC_KEY"
    async
  ></script>
</head>

Webflow

In Site Settings → Custom Code, paste the script tag into the Head Code section so it loads before any form interaction.
Set the form's Action URL (Settings tab → Send to → Custom Action) to your Submit URL.
Publish the site.

See the full Webflow guide for step-by-step screenshots.

Content Security Policy (CSP)

If your site uses a CSP header, add these two directives:

script-src  'self' https://cdn.opportify.ai;
connect-src 'self' https://api.opportify.ai;
frame-src   'self' https://cdn.opportify.ai;
form-action 'self' https://api.opportify.ai;

Directive	Origin	Reason
`script-src`	`https://cdn.opportify.ai`	The versioned script file
`connect-src`	`https://api.opportify.ai`	All API calls (`/intel/v1/*`)
`frame-src`	`https://cdn.opportify.ai`	The hidden bridge iframe used for cross-origin cookie sync
`form-action`	`https://api.opportify.ai`	Form POST submissions to Opportify endpoints

Common Install Pitfalls

Symptom	Cause	Fix
Form submits but nothing appears in Admin Console	Script loaded after the form was already submitted	Move script tag to `<head>`; ensure it loads before first user interaction
`opportifyToken` hidden field is missing	Script blocked (CSP, network, or ad-blocker)	Check browser console for errors; verify CSP directives
Init request not visible in DevTools	Script blocked or not loaded	Verify the `<script>` tag is in `<head>` and CSP `script-src` includes `cdn.opportify.ai`
Tokens minted but submissions missing	Form `action` doesn't point to an Opportify endpoint	Set `action` to `https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID`
Script works locally but not in production	Public key mismatch or domain not allowlisted	Confirm the domain is allowlisted in Admin Console → Quick Start → Step 1

Prerequisites​

Step 1 — Add the Script Tag​

Attribute reference​

Step 2 — Point Your Form at an Endpoint​

Step 3 — Verify Your Install​

Platform-Specific Instructions​

Plain HTML​

React / Next.js (Pages Router)​

React / Next.js (App Router)​

Vue 3 / Vite​

Angular​

Webflow​

Content Security Policy (CSP)​

Common Install Pitfalls​