Wizflow Widget

The Wizflow Widget renders flows built in the Flow Builder inside your own website. A script tag loads it, and an HTML element marks where the flow appears. The widget renders into your page’s own DOM. It fills the width of its container, scrolls with the page, and keeps its styling isolated from your site’s CSS.

Two elements are available: <wizflow-form> for form flows, and <wizflow-chatflow>

Key Concepts

Term	Meaning
Widget	The Wizflow runtime running on your page, loaded once by the script tag
Embed key	A public key identifying your Wizflow account. Designed to sit in public page source
Flow key	Which flow to show, e.g. `contact-us`. One per element
`Wizflow.init`	Points the widget at your Wizflow instance. Called once per page
`<wizflow-form>`	Renders a form flow. Put it wherever the flow should appear
`<wizflow-chatflow>`	Renders a chat flow, inline or as a floating launcher

Getting Your Snippet

Open the Embed page

In the dashboard, go to Embed. It shows your script URL, your embed key, and a ready-to-paste snippet.

Pick the flow

Choose a flow from the dropdown. The snippet and the live preview beside it update to match, so you can confirm it looks right before copying anything.

Copy the complete example

Use Put it together at the bottom of the page to copy the whole snippet at once.

Paste it into your site

Drop it into the page where the flow should appear.

The Snippet

<script src="https://app.wizflow.io/embed/wizflow.js"></script>
<script>
  Wizflow.init({
    baseUrl: 'https://app.wizflow.io/your-workspace',
    publicKey: 'wzf_xxxxxxxxxxxx',
    locale: 'da',
  });
</script>

<wizflow-form template-key="contact-us"></wizflow-form>

The script loads the widget and lazy loads the elements on demands.
Wizflow.init runs once and points the widget at your Wizflow instance.
<wizflow-form> renders the form.

The element can sit anywhere on the page, before or after the script. Wizflow.init must run after the script tag, since that is what defines window.Wizflow.

The Embed page fills in your baseUrl and publicKey, so the snippet is ready to copy as-is.

Configuration

Wizflow.init configures the widget for the whole page:

Option	Required	Description
`baseUrl`	Yes	Your Wizflow instance. Shown on the Embed page
`publicKey`	Yes	Your embed key
`locale`	No	Language: `da`, `da-DK`, `en`, `en-GB`, `es`, `no`. Defaults to `da`

Each element selects its flow:

Element	Attribute	Required	Description
`<wizflow-form>`	`template-key`	Yes	Which flow to render
`<wizflow-chatflow>`	`template-key`	Yes	Which flow to render
`<wizflow-chatflow>`	`type`	No	`inline` (default) or `floating`
`<wizflow-chatflow>`	`position`	No	Floating only: `bottom-right` (default) or `bottom-left`
`<wizflow-chatflow>`	`launcher-icon`	No	Floating only: image URL for the launcher button
`<wizflow-chatflow>`	`launcher-background-color`	No	Floating only: launcher background colour, any CSS colour
`<wizflow-chatflow>`	`launcher-foreground-color`	No	Floating only: launcher icon colour, any CSS colour

Chat Flows

<wizflow-chatflow> renders a conversational flow. Same script tag and same Wizflow.init as forms.

Inline

Sits in the page like any other block. Give it a height, since it fills its container:

<wizflow-chatflow template-key="onboarding" style="height: 600px"></wizflow-chatflow>

Floating

A launcher button pinned to the corner of the viewport, opening a panel above it. Position the element anywhere, it takes itself out of the flow:

<wizflow-chatflow template-key="support" type="floating" position="bottom-right"></wizflow-chatflow>

The panel is at most 400px wide and 640px tall, shrinking to fit smaller viewports. Its title comes from the flow’s name.

Styling the launcher

<wizflow-chatflow
  template-key="support"
  type="floating"
  launcher-icon="https://example.com/chat-icon.svg"
  launcher-background-color="#5E00E5"
  launcher-foreground-color="#FFFFFF"
></wizflow-chatflow>

launcher-icon is rendered at 28x28. Without it the widget uses its own icon. launcher-foreground-color sets the close icon shown while the panel is open.

Several Flows on One Page

Call Wizflow.init once, then add as many elements as you need, each with its own flow:

<wizflow-form template-key="contact-us"></wizflow-form>
<wizflow-form template-key="newsletter-signup"></wizflow-form>

Changing template-key on an element already on the page swaps the widget to that flow.

Adding a flow from JavaScript

For sites that build their markup at runtime:

<div id="form-container"></div>
<script>
  Wizflow.mount('#form-container', { templateKey: 'contact-us' });
</script>

Your Embed Key

The embed key identifies your account to the widget. It is safe to publish: it grants read access to the flows you own and permission to submit responses to them. Find it under Account Settings → Embed key, or at the top of the Embed page.

Regenerating replaces the key immediately. Every site still using the old key will show an error until its snippet is updated. Regenerate only when the key needs rotating.

On dedicated deployments your administrator sets the key. The Embed page shows whichever key applies to you.

Content Security Policy

If your site sets a Content Security Policy, allow your Wizflow host in both directives:

script-src https://app.wizflow.io;
connect-src https://app.wizflow.io;

Troubleshooting

Nothing appears where I put the element

Open your browser console. An undefined Wizflow points at a wrong script URL or a Content Security Policy blocking it. A clean console usually means Wizflow.init never ran, which leaves the element empty.

Missing or invalid public key

The key in your snippet has fallen out of sync with your account, usually after a regeneration. Copy the current key from the Embed page.

Flow not found, or no access to this flow

The template-key does not match a flow on your account. Check it against the dropdown on the Embed page, which lists the exact keys.

A field is missing or misbehaves

File upload fields are unavailable in an embed. Compare against Wizflow’s own preview, and contact support@wizflow.io if a supported field looks wrong.

The widget looks unstyled or cramped

Next Steps

Flow Builder Basics

Build the flow you want to embed

Live Pages

Host the whole page on Wizflow instead

Triggers & Automation

Send an email, call a webhook, or generate a PDF on completion

Theme Editor

Style flows hosted on Wizflow

Flow Builder

Entities & Data Collection

Logic & Automation

Sharing & Embedding

Testing Tools

Key Concepts

Getting Your Snippet

The Snippet

Configuration

Chat Flows

Inline

Floating

Styling the launcher

Several Flows on One Page

Adding a flow from JavaScript

Your Embed Key

Content Security Policy

Troubleshooting

Next Steps

Flow Builder Basics

Live Pages

Triggers & Automation

Theme Editor

​Key Concepts

​Getting Your Snippet

​The Snippet

​Configuration

​Chat Flows

​Inline

​Floating

​Styling the launcher

​Several Flows on One Page

​Adding a flow from JavaScript

​Your Embed Key

​Content Security Policy

​Troubleshooting

​Next Steps

Flow Builder Basics

Live Pages

Triggers & Automation

Theme Editor

Key Concepts

Getting Your Snippet

The Snippet

Configuration

Chat Flows

Inline

Floating

Styling the launcher

Several Flows on One Page

Adding a flow from JavaScript

Your Embed Key

Content Security Policy

Troubleshooting

Next Steps