elements (single-page apps) window.OneForm.on("submitted", (e) => { // e.slug, e.endingId. Never the answers. console.log("Submitted", e.slug);}); ``` In single-page apps (React, Vue, Next.js and the like), call `window.OneForm.scan()` after the element mounts; the framework snippets above do this for you. ## Events The form tells the page what happens through `postMessage`. The loader passes each message on to `window.OneForm.on` listeners and fires it on the element as a `oneform:` DOM event. Messages never contain answers. | Event | Data | When | | --------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | ready | none | The form has loaded. | | started | none | The first question is on screen (once per visit), or a voice conversation has begun. | | question | fieldId: string, step: number | A question is on screen: its id, and its step number in this visit (typed forms). | | submitted | endingId: string | The form was submitted, with the id of the thank-you screen shown. No answers. | | resize | height: number | The form's content height in pixels; the loader sizes inline embeds with data-of-height auto. | | redirect | url: string | The thank-you screen sends the person to a URL. Only posted to the embedding page's own origin, since the URL can carry answers. | | close | none | The person closed a voice conversation from inside it. The loader also fires it whenever a popup, slider or chat panel closes. | DOM events ```js document.querySelector("[data-oneform]").addEventListener("oneform:submitted", (e) => { console.log(e.detail); // the same data as window.OneForm.on}); ``` Every message has the shape `{ source: "oneform", v: 1, id, type, ...data }`, where `id` tells several embeds on one page apart. The loader only accepts messages from the OneForm origin and the frame it made. In the other direction, it sends `pause` (the panel was closed: a voice conversation stops talking and listening). ## Hidden fields and UTM tags - A form declares its hidden fields (a client id, a referrer). Only declared keys and the five UTM tags (`utm_source`, `utm_medium`, `utm_campaign`, `utm_term`, `utm_content`) are kept; anything else is dropped, and each value is cut to 300 characters. - UTM tags in the page's address always pass through to the form. - `data-of-hidden="client_id,ref"` passes those page parameters through too, so `?client_id=TD-1042` on your page reaches the form. - `data-of-hidden-values="source=pricing;plan=pro"` sets fixed values for that embed. - Links work the same way: `https://app.oneform.si/f/your-form?client_id=TD-1042`. The API can [make prefilled links](https://oneform.si/developers/api/#create-link) for you. Hidden values arrive with the submission and in [webhook payloads](https://oneform.si/developers/webhooks/#payload) under `hidden`. ## Content-Security-Policy If your site sets a Content-Security-Policy, add these sources to the matching directives you already have: Content-Security-Policy (add to yours) ```text script-src https://app.oneform.si;frame-src https://app.oneform.si;style-src 'unsafe-inline';connect-src https://app.oneform.si; ``` - `script-src` and `frame-src`: the script, and the form's frame. - `style-src 'unsafe-inline'`: the script adds one small `