> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wizflow.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Wizflow Widget

> Put Wizflow on your own website with a single script tag

The **Wizflow Widget** renders flows built in the [Flow Builder](/features/flow-builder-basics) 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.

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

***

## 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

<Steps>
  <Step title="Open the Embed page">
    In the dashboard, go to **Embed**. It shows your script URL, your embed key, and a
    ready-to-paste snippet.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Copy the complete example">
    Use **Put it together** at the bottom of the page to copy the whole snippet at once.
  </Step>

  <Step title="Paste it into your site">Drop it into the page where the flow should appear.</Step>
</Steps>

***

## The Snippet

```html theme={null}
<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>
```

1. The **script** loads the widget and lazy loads the elements on demands.
2. **`Wizflow.init`** runs once and points the widget at your Wizflow instance.
3. **`<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`.

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

### 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:

```html theme={null}
<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:

```html theme={null}
<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

```html theme={null}
<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:

```html theme={null}
<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:

```html theme={null}
<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.

<Warning>
  **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.
</Warning>

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

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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](mailto:support@wizflow.io) if a supported field looks wrong.
  </Accordion>

  <Accordion title="The widget looks unstyled or cramped">
    The widget fills its container, so a narrow or zero-height parent squeezes it. Give the
    surrounding element a normal block width and let the widget size itself.
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Flow Builder Basics" icon="diagram-project" href="/features/flow-builder-basics">
    Build the flow you want to embed
  </Card>

  <Card title="Live Pages" icon="browser" href="/features/live-pages">
    Host the whole page on Wizflow instead
  </Card>

  <Card title="Triggers & Automation" icon="bolt" href="/features/triggers-automation">
    Send an email, call a webhook, or generate a PDF on completion
  </Card>

  <Card title="Theme Editor" icon="palette" href="/features/theme-editor">
    Style flows hosted on Wizflow
  </Card>
</CardGroup>