Host Page JavaScript API

When you embed a Clarflow funnel with the standard snippet, the embed script also exposes a window.Clarflow object on the host page itself (your Shopify storefront, landing page, etc.). It lets the page around the funnel drive navigation, read and pre-fill answers, and react to the visitor's progress — across the iframe boundary, with no postMessage plumbing.

This is the companion to the Custom HTML JavaScript API: that SDK runs inside a Custom HTML block; this one runs on the page hosting the funnel. Both expose the same Clarflow.* surface.

Setup

Use the normal embed snippet. The window.Clarflow API is available on the host page as soon as embed.js runs:

<div data-clarflow-id="YOUR_FUNNEL_ID"></div>
<script src="https://app.clarflow.com/embed.min.js" async></script>

embed.js and the funnel perform a small handshake on load. Calls you make before the funnel finishes loading are queued and flushed automatically once it is ready — so it is always safe to call Clarflow.prefill(...) immediately.

Navigation

Clarflow.nextStep() / Clarflow.completeStep()

Advances the funnel to the next step. Honors the current step's validation gating — if a required field is empty, the call is a no-op, exactly like the Continue button.

Clarflow.nextStep();

Clarflow.back()

Returns to the previous step.

Clarflow.goToStep(position)

Jumps directly to an already-visited step by its 1-based position. Forward jumps to steps the visitor hasn't reached are ignored (moving forward must go through nextStep() so validation and branching apply).

Clarflow.goToStep(1); // back to the first step

Variables & pre-fill

Clarflow.getVariable(name) / Clarflow.getAllVariables()

Read the visitor's answers, cached on the host page and kept live as they progress.

var email = Clarflow.getVariable('email');
var all = Clarflow.getAllVariables();

Clarflow.setVariable(name, value)

Sets a single response variable in the funnel.

Clarflow.prefill(values)

Pre-fills a batch of answers by variable name. This seeds the actual controls — text inputs, dropdown selections, and single/multi-select answers — as each step mounts, so the visitor sees them already filled in and required-field gating is satisfied. Call it before the funnel loads to pre-fill from the start:

// e.g. hydrate from a logged-in customer
Clarflow.prefill({
  email: 'customer@example.com',
  first_name: 'Sam',
  plan: 'Pro',
});

Match keys to the variable names of your input, dropdown, and question elements. Values are the input text, or the option's display label for dropdowns and questions.

Events

Clarflow.on(event, callback) / Clarflow.off(event, callback)

Clarflow.on('step:change', function (state) {
  console.log('Step ' + state.position + ' of ' + state.totalSteps);
});

Clarflow.on('variables:change', function (values) {
  if (values.email) enableCheckoutButton();
});

Versioning

Clarflow.version reports the SDK version (currently "2.0.0"). Every message exchanged with the funnel carries this version.

Security & compatibility

• The bridge only accepts events from the funnel iframe(s) the embed script created, and posts commands to each iframe at its exact origin — never a wildcard.
• If your page already defines a window.Clarflow, the embed script leaves it untouched.
• Multiple funnels on one page share a single window.Clarflow; commands are delivered to every embedded funnel.
• All existing embed behavior (auto-resize, redirect, Shopify add-to-cart) is unchanged — this API is purely additive.