Add Fraud Protection to an HTML Website

This guide walks you through installing Opportify Fraud Protection on a plain HTML website using vanilla JavaScript. No framework required. Once set up, every form submission is analyzed for fraud signals in real time — bots, disposable emails, VPNs, and more.

Prerequisites

Access to the Opportify Admin Console
An HTML page with a form you can edit

How it works

Opportify's approach has two parts:

The tracking script — loaded once in the page <head>. It silently observes browser signals and injects two hidden values into each of your forms: opportifyToken (a per-session risk token) and opportifyFormUUID (the identifier of the matched form endpoint).
The submit endpoint — instead of POSTing to your own backend, your form sends data directly to https://api.opportify.ai/intel/v1/submit/<endpoint-id>. Opportify analyzes the submission, stores the result, and returns a JSON response your page can act on.

Step-by-Step Setup

Step 1 — Open Opportify Admin and complete the Quick Start

Navigate to Quick Start and complete Steps 1 through 3.

Step 1 — Allowlist your domain. Enter your site's hostname (no https://, no trailing slash).

Example: for https://example.com enter example.com

Step 2 — Create a Form Endpoint. Click + New Endpoint, give it a descriptive name (e.g. Contact Form), and select a public key. Each endpoint maps to one form on your site.

Step 3 — Copy the Submit URL. From the endpoint list, copy the value in the Submit URL column. It looks like:

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

Keep this URL handy — you will use it in Step 3 below.

Step 2 — Load the Opportify script

Add the script tag inside your page's <head>. Replace YOUR_PUBLIC_KEY with the key shown in the Opportify Admin Console.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>

    <!-- Opportify Fraud Protection — load before first user interaction -->
    <script
      src="https://cdn.opportify.ai/f/v0.4.3.min.js"
      data-opportify-key="YOUR_PUBLIC_KEY"
      async
    ></script>
  </head>
  <body>
    <!-- your content -->
  </body>
</html>

Where to find your public key

In the Opportify Admin Console, go to Settings → API Keys. The public key starts with pk_.

Step 3 — Add your form

Create a standard HTML form. Add data-opty-submit-interception="disable" if you plan to handle the submission with your own JavaScript (recommended when you need to read the response). Add an id to make it easy to reference from your script.

<form id="contact-form" data-opty-submit-interception="disable">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <div id="error-message" style="color: red; display: none;"></div>
  <div id="success-message" style="color: green; display: none;"></div>

  <button type="submit" id="submit-btn">Send</button>
</form>

Step 4 — Include the Opportify tokens in the payload

When the tracking script runs, it injects two hidden <input> fields into your form:

Field name	Purpose
`opportifyToken`	Per-session risk token generated by the script
`opportifyFormUUID`	Identifies which Form Endpoint matched this form

Read these values from the DOM and include them in the payload you send to the Opportify endpoint:

<script>
  document.getElementById('contact-form').addEventListener('submit', async function (event) {
    event.preventDefault();

    const submitBtn = document.getElementById('submit-btn');
    const errorDiv = document.getElementById('error-message');
    const successDiv = document.getElementById('success-message');

    submitBtn.disabled = true;
    submitBtn.textContent = 'Sending…';
    errorDiv.style.display = 'none';
    successDiv.style.display = 'none';

    // Read Opportify tokens injected by the tracking script
    const opportifyToken =
      document.querySelector('input[name="opportifyToken"]')?.value ?? '';
    const opportifyFormUUID =
      document.querySelector('input[name="opportifyFormUUID"]')?.value ?? '';

    const payload = {
      name: document.getElementById('name').value,
      email: document.getElementById('email').value,
      message: document.getElementById('message').value,
      opportifyToken: opportifyToken,
      opportifyFormUUID: opportifyFormUUID,
    };

    try {
      const response = await fetch(
        'https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID',
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        }
      );

      const result = await response.json();

      if (!result.accepted) {
        errorDiv.textContent = result.errorMessage ?? 'Something went wrong. Please try again.';
        errorDiv.style.display = 'block';
      } else {
        successDiv.textContent = 'Your message was sent successfully.';
        successDiv.style.display = 'block';
        document.getElementById('contact-form').reset();
      }
    } catch (err) {
      errorDiv.textContent = 'Network error. Please check your connection and try again.';
      errorDiv.style.display = 'block';
    } finally {
      submitBtn.disabled = false;
      submitBtn.textContent = 'Send';
    }
  });
</script>

Replace YOUR_ENDPOINT_ID with the UUID from the Submit URL you copied in Step 1.

Step 5 — Full example: complete HTML page

Below is a complete, minimal HTML page integrating all the steps above.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Us</title>

    <!-- Opportify Fraud Protection -->
    <script
      src="https://cdn.opportify.ai/f/v0.4.3.min.js"
      data-opportify-key="YOUR_PUBLIC_KEY"
      async
    ></script>
  </head>
  <body>
    <h1>Contact Us</h1>

    <form id="contact-form" data-opty-submit-interception="disable">
      <label for="name">Name</label>
      <input type="text" id="name" name="name" required /><br />

      <label for="email">Email</label>
      <input type="email" id="email" name="email" required /><br />

      <label for="message">Message</label>
      <textarea id="message" name="message" required></textarea><br />

      <div id="error-message" style="color: red; display: none;"></div>
      <div id="success-message" style="color: green; display: none;"></div>

      <button type="submit" id="submit-btn">Send</button>
    </form>

    <script>
      document.getElementById('contact-form').addEventListener('submit', async function (event) {
        event.preventDefault();

        const submitBtn = document.getElementById('submit-btn');
        const errorDiv = document.getElementById('error-message');
        const successDiv = document.getElementById('success-message');

        submitBtn.disabled = true;
        submitBtn.textContent = 'Sending…';
        errorDiv.style.display = 'none';
        successDiv.style.display = 'none';

        const opportifyToken =
          document.querySelector('input[name="opportifyToken"]')?.value ?? '';
        const opportifyFormUUID =
          document.querySelector('input[name="opportifyFormUUID"]')?.value ?? '';

        const payload = {
          name: document.getElementById('name').value,
          email: document.getElementById('email').value,
          message: document.getElementById('message').value,
          opportifyToken: opportifyToken,
          opportifyFormUUID: opportifyFormUUID,
        };

        try {
          const response = await fetch(
            'https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID',
            {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(payload),
            }
          );

          const result = await response.json();

          if (!result.accepted) {
            errorDiv.textContent = result.errorMessage ?? 'Something went wrong. Please try again.';
            errorDiv.style.display = 'block';
          } else {
            successDiv.textContent = 'Your message was sent successfully.';
            successDiv.style.display = 'block';
            document.getElementById('contact-form').reset();
          }
        } catch (err) {
          errorDiv.textContent = 'Network error. Please check your connection and try again.';
          errorDiv.style.display = 'block';
        } finally {
          submitBtn.disabled = false;
          submitBtn.textContent = 'Send';
        }
      });
    </script>
  </body>
</html>

Step 6 — Setup is complete

Your HTML form is now connected to Opportify Fraud Protection.

Return to the Opportify Admin Console and complete the remaining Quick Start steps to fine-tune your setup:

Step 4 — Data Retention: Choose how long submission data is kept.
Alerts: Configure email or in-app alerts for suspicious submissions.
Webhooks: Forward fraud signals and submission data to your own backend or third-party tools.

Viewing Form Submissions

After deploying, every form submission from your site will appear in the Form Submissions page of the Opportify Admin Console. For each submission you can see:

Field	Description
Risk Score	A numeric fraud risk rating assigned to the submission
Risk Level	A human-readable label: Low, Medium, High, or Critical
IP Address	The originating IP of the submission
Country	Geo-location derived from the IP
Email	The email address submitted, if collected
Submitted At	Timestamp of when the submission was received
Form Endpoint	Which endpoint (and therefore which form) received the submission
Fraud Signals	Individual signals that contributed to the risk score (e.g. disposable email, VPN detected, bot behavior)

You can filter submissions by risk level, date range, or endpoint to quickly identify and act on suspicious activity.

Troubleshooting

Symptom	Likely cause	Fix
`opportifyToken` is always empty	Script not loaded or loaded after the form	Ensure the script tag is in `<head>` with `async` and the page has fully loaded before submission
CSP error in browser console	Missing CSP directives for Opportify origins	Add `https://cdn.opportify.ai` to `script-src` and `https://api.opportify.ai` to `connect-src` in your Content Security Policy
Form submits twice	Script auto-interception active on a self-managed form	Add `data-opty-submit-interception="disable"` to the `<form>` element (Step 3)
`404` on submit	Wrong endpoint ID in the URL	Double-check the Submit URL copied from the Opportify Admin Console

Prerequisites​

How it works​

Step-by-Step Setup​

Step 1 — Open Opportify Admin and complete the Quick Start​

Step 2 — Load the Opportify script​

Step 3 — Add your form​

Step 4 — Include the Opportify tokens in the payload​

Step 5 — Full example: complete HTML page​

Step 6 — Setup is complete​

Viewing Form Submissions​

Troubleshooting​