Configuration Reference

The script is configured entirely through HTML attributes. There is no JavaScript API to import or call — everything is expressed in markup.

Script Tag Attributes

Place these on the <script src="..."> tag.

`data-opportify-key` (required)

Your Opportify public key. Readable from the page source — it is not a secret. Used for request signing, not authentication.

<script
  src="https://cdn.opportify.ai/f/v1.2.0.min.js"
  data-opportify-key="pk_live_abc123xyz"
  async
></script>

Property	Value
Format	String starting with `pk_live_` (production) or `pk_test_` (test)
Required	Yes — script no-ops silently if the key is absent or blank
Readable from page source	Yes — this is intentional

Form Attributes

Place these on <form> elements to control per-form behavior.

`action` (required for proxied submission)

The form's standard action URL, set to your Opportify Submit URL. The script extracts the endpoint ID from the last path segment.

<form action="https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID" method="POST">

The endpoint ID is the UUID from your Form Endpoint in the Admin Console.

`data-opty-submit-interception`

Controls whether the script intercepts the submit event and proxies the POST to Opportify.

Value	Behavior
(absent)	Script intercepts the submit event and handles the POST
`disabled`	Script does not intercept; the browser submits the form natively

<!-- Let the script handle submission (default) -->
<form action="https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID">

<!-- You are handling submission manually (e.g. React onSubmit) -->
<form
  action="https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID"
  data-opty-submit-interception="disabled"
  onsubmit="myHandler(event)"
>

caution

When data-opty-submit-interception="disabled" is set, ensure your POST is still directed to your Opportify endpoint URL so the hidden fields the script injected (opportifyToken, opportifyFormUUID) are included in the payload.

Alternative: hidden input

You can also configure this via a hidden input instead of a data attribute:

<input type="hidden" name="opty-submit-interception" value="disabled" />

`data-opty-mode`

Defines the post-submit UI behavior. Only takes effect when submission interception is active (default).

Value	Behavior
(absent)	No UI change after submission
`redirect`	POST-redirects the browser to the URL in `data-opty-redirect`
`replace-success`	Hides the form; reveals the element matching the CSS selector in `data-opty-replace-success`
`message-success`	Reveals the element matching the CSS selector in `data-opty-message-success`

<!-- No post-submit UI -->
<form action="https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID">

<!-- Redirect after submit -->
<form
  action="https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID"
  data-opty-mode="redirect"
  data-opty-redirect="https://example.com/thank-you"
>

<!-- Show a success element, hide the form -->
<form
  action="https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID"
  data-opty-mode="replace-success"
  data-opty-replace-success="#success-banner"
>
<div id="success-banner" style="display:none">Thanks! We'll be in touch.</div>

<!-- Show a message without hiding the form -->
<form
  action="https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID"
  data-opty-mode="message-success"
  data-opty-message-success="#inline-message"
>
<p id="inline-message" style="display:none">✓ Sent successfully.</p>

`data-opty-redirect`

Used with data-opty-mode="redirect". The URL to POST-redirect to after a successful submission.

<form
  data-opty-mode="redirect"
  data-opty-redirect="https://example.com/thank-you"
  ...
>

`data-opty-replace-success`

Used with data-opty-mode="replace-success". A CSS selector for the element to reveal (set display: '') after submission. The form itself is hidden (display: none).

`data-opty-message-success`

Used with data-opty-mode="message-success". A CSS selector for the element to reveal after submission. The form remains visible.

Submit Button Attributes

`data-wait`

When present on the submit button, the script replaces the button label with this text while the submission is in flight, then restores the original label when it completes.

<button type="submit" data-wait="Sending…">Send Message</button>

Works on both <button type="submit"> and <input type="submit">.

Hidden Inputs Injected by the Script

The script injects two hidden <input> fields directly into every instrumented form. These are automatically included in any standard form POST — no extra DOM reading required.

Name	Description
`opportifyToken`	Per-session, per-form cryptographic submit token minted by the Opportify API
`opportifyFormUUID`	UUID that identifies which Form Endpoint this form maps to

Self-managed submissions

When data-opty-submit-interception="disabled" is set (you are handling the POST yourself via fetch or XHR), ensure your POST is sent to your Opportify endpoint URL so that the hidden fields the script injected are included in the payload.

If you construct the payload manually (e.g. from a JavaScript object), read the values using .value — not getAttribute('value') — since the script sets token values via the DOM property, not the HTML attribute:

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

Window API

After the script loads, it exposes a minimal public API on window:

`window.FormWatcher.initForm(form)`

Manually instruments a form element. Use this for forms that the MutationObserver may miss (e.g. forms inside shadow DOM or rendered outside document.body).

const form = document.getElementById('my-custom-form');
window.FormWatcher.initForm(form);

Parameter	Type	Description
`form`	`HTMLFormElement`	The form element to instrument. No-ops if already initialized.

Events

`opportify:init-failed`

Dispatched on window when session initialization fails after all retry attempts.

window.addEventListener('opportify:init-failed', (event) => {
  console.error('Opportify init failed:', event.detail);
  // event.detail: { attempts: number, error: string }
});

Property	Type	Description
`detail.attempts`	`number`	Number of init attempts made (default 3)
`detail.error`	`string`	Human-readable error message from the last failure

note

A failed init means the script could not establish a session. Forms will still be present and usable, but opportifyToken will be empty and submissions will be flagged as untrusted by the backend.

Internal Attributes (Read-Only)

These attributes are written by the script. Do not set or remove them manually.

Attribute	Element	Meaning
`data-op-init`	`<form>`	Set to `"1"` when a form has been instrumented. Prevents double initialization.
`data-oppt-uuid`	`<form>`	The UUID assigned to this form for token mapping.

Runtime Overrides (Advanced)

These window globals can be set before the script loads to override CDN/API origins (useful in testing or self-hosted deployments).

Global	Type	Default	Description
`window.__OPPORTIFY_BRIDGE_IFRAME_ORIGIN__`	`string`	`'https://cdn.opportify.ai'`	Override the bridge iframe origin
`window.__OPPORTIFY_BRIDGE_IFRAME_PATH__`	`string`	Derived from script version	Override the bridge iframe path

<script>
  // Must be set before the Opportify script loads
  window.__OPPORTIFY_BRIDGE_IFRAME_ORIGIN__ = 'https://cdn.my-company.com';
</script>
<script src="https://cdn.opportify.ai/f/v1.2.0.min.js" data-opportify-key="pk_live_..." async></script>

Script Tag Attributes​

data-opportify-key (required)​

Form Attributes​

action (required for proxied submission)​

data-opty-submit-interception​

data-opty-mode​

data-opty-redirect​

data-opty-replace-success​

data-opty-message-success​

Submit Button Attributes​

data-wait​

Hidden Inputs Injected by the Script​

Window API​

window.FormWatcher.initForm(form)​

Events​

opportify:init-failed​

Internal Attributes (Read-Only)​

Runtime Overrides (Advanced)​