5 min read

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.3.8.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_...`).
`data-opty-intercept`	no	Global kill-switch. Set to `"disabled"` to turn off submit interception for all forms on the page. Individual forms can still opt in with `data-opty-submit-interception="enabled"`.
`async`	recommended	Prevents the script from blocking page render.

Always pin the version

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

Per-form override available

data-opty-intercept="disabled" affects all forms. To keep interception disabled globally but re-enable it for a specific form, add data-opty-submit-interception="enabled" directly on that <form> element. See the Configuration Reference for full details.

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://form.opportify.ai/intel/v1/submit/<your-endpoint-id>

<form
  action="https://form.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.3.8.min.js"
      data-opportify-key="YOUR_PUBLIC_KEY"
      async
    ></script>
  </head>
  <body>
    <form action="https://form.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.3.8.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.3.8.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.3.8.min.js"
    data-opportify-key="YOUR_PUBLIC_KEY"
    async
  ></script>
</head>

Angular

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

Webflow

In Site Settings → Custom Code, paste the script tag into the Footer Code section.
Set the form's Action URL (Settings tab → Send to → Custom Action) to your Submit URL.
Publish the site.

Webflow uses Footer Code

Webflow's built-in form handling relies on its own JavaScript. Loading the Opportify script in Footer Code ensures both scripts are initialized without conflicts.

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

Content Security Policy (CSP)

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

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

Directive	Origin	Reason
`script-src`	`https://cdn.opportify.ai`	The versioned script file
`connect-src`	`https://api.opportify.ai`	XHR/fetch calls: session init, telemetry events, token minting
`connect-src`	`https://form.opportify.ai`	XHR/fetch calls: form submit (`/intel/v1/submit/{id}`)
`frame-src`	`https://cdn.opportify.ai`	The hidden bridge iframe used for cross-origin cookie sync
`form-action`	`https://form.opportify.ai`	Native form POST submissions to Opportify endpoints

For framework-specific configuration (Next.js, SvelteKit, Nginx, Apache), verification steps, and detailed explanations of each directive, see the Content Security Policy guide.

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. Webflow exception: use Footer Code — see the Webflow section above.
`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`. Webflow exception: Footer Code is correct for Webflow — see the Webflow section above.
Tokens minted but submissions missing	Form `action` doesn't point to an Opportify endpoint	Set `action` to `https://form.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

Next Steps


Configuration Reference →	All script-tag and form attributes, global settings, window API, and events
Platform Guides →	Framework-specific integration walkthroughs (HTML, React, Vue, Angular, Webflow)
Error Reference →	Every error the script can emit, its cause, and how to fix it

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​

Next Steps​