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

# Add AI voice to a Webflow site

> Embed the SmartAlex voice AI widget on Webflow by pasting one script tag into site or page custom code before the closing body tag, then publish.

Webflow gives you two clean ways to drop the SmartAlex widget onto a site: the **Embed element** for a single page, or **Custom code** in your site or page settings for a site-wide install. Both work by pasting one script tag before the closing `</body>` tag. This is the fastest way to add AI chat to Webflow and give visitors a Webflow AI phone widget that can talk, qualify, and book, right from the page.

The widget renders your live agent "Alex," backed by curated, high-accuracy speech, language, and voice models kept abstracted behind the platform. You build and style the agent once inside SmartAlex; Webflow just hosts the script.

<Note>
  Webflow **Custom code** in site settings and the **Embed element** both require a paid Site plan. On a free Starter site you can still preview, but the script only runs on the published domain once the site is on a paid plan.
</Note>

## Before you start

<Steps>
  <Step title="Have an agent ready">
    Create and deploy an agent in Studio first, so the widget has something to answer with. See [Create an agent](/studio/create-agent).
  </Step>

  <Step title="Grab your widget snippet">
    Open Widget Studio in SmartAlex, choose a variant, and copy the install code. It contains your workspace `data-tenant-id`. Full walkthrough: [Widget install](/essentials/widget-install).
  </Step>
</Steps>

## The snippet you paste

This is the exact tag SmartAlex generates. Replace `YOUR_TENANT_ID` with the value from the widget code panel (or from the MCP tool `smartalex_get_widget_install_code`).

```html Widget script tag theme={null}
<!-- SmartAlex Widget -->
<script
  src="https://api.getsmartalex.com/storage/v1/object/public/widget-assets/smartalex-widget.js"
  data-tenant-id="YOUR_TENANT_ID"
  async>
</script>
```

<Info>
  The snippet is **byte-identical for every variant**. There is no `data-variant`, `data-agent`, or `data-color` attribute. The widget reads its published config (variant, colours, which agent) from the server at load time, so restyling in Widget Studio never means re-pasting code in Webflow.
</Info>

## Option A: site-wide with Custom code

Use this when you want the widget on every page. It is the recommended path.

<Steps>
  <Step title="Open site settings">
    In the Webflow Designer, click the site name (top left), then **Site settings** (formerly Project settings).
  </Step>

  <Step title="Go to Custom code">
    Open the **Custom code** tab. Scroll to the **Footer code** box, labelled "Before `</body>` tag".
  </Step>

  <Step title="Paste the snippet">
    Paste the full script tag into the Footer code box. The footer box is correct because the script must load before the closing body tag, not in the head.
  </Step>

  <Step title="Save and publish">
    Click **Save changes**, then **Publish** the site (top right, then your domain). Custom code only runs on the published site, never in the Designer canvas.
  </Step>
</Steps>

## Option B: single page with the Embed element

Use this when you want the widget on one page only (for example a pricing or contact page).

<Steps>
  <Step title="Add an Embed element">
    On the canvas, press <kbd>Ctrl/Cmd + E</kbd> or open **Add elements (A)** then drag **Embed** onto the page. Position does not matter: the widget anchors itself (fixed) regardless of where the Embed sits.
  </Step>

  <Step title="Paste the snippet">
    In the code editor that opens, paste the full script tag, then click **Save and close**.
  </Step>

  <Step title="Publish">
    Publish the page. As with Option A, the script executes on the live domain, not in the Designer preview.
  </Step>
</Steps>

<Tip>
  Prefer per-page? You can also paste the snippet in **Page settings, Custom code, Before `</body>` tag** for a single page without an Embed element on the canvas. Same result as Option B.
</Tip>

## Choosing a widget variant

You pick the look and interaction inside Widget Studio, not in Webflow. Five variants are available:

| Variant        | Interaction    | What visitors see                                  |
| -------------- | -------------- | -------------------------------------------------- |
| Pill (default) | Voice and chat | Compact floating button that expands into chat     |
| Chat bar       | Text           | Always-visible input bar at the bottom of the page |
| Side panel     | Text           | Full-height panel that slides in from the right    |
| Voice pill     | Voice only     | Voice-only pill with avatar and a call button      |
| Ask Alex       | Voice and text | Premium voice and chat messenger, live on the page |

<Note>
  **Voice pill** and **Ask Alex** only appear in the picker when your agent runs on the SmartAlex voice engine. **Ask Alex** also enables a persistent pop-up call that survives page navigation. Only one widget is active per workspace at a time, so the newest saved config wins. See [Widget variants](/essentials/widgets) for the full breakdown.
</Note>

## How the pieces fit together

```mermaid theme={null}
flowchart LR
  A[Widget Studio: pick variant, style, agent] --> B[Publish config to SmartAlex]
  C[Paste one script tag in Webflow footer or Embed] --> D[Publish Webflow site]
  D --> E[Visitor loads the page]
  E --> F[Script fetches live config by tenant id]
  B --> F
  F --> G[Widget renders and connects to Alex]
```

Because the config lives on the server, your marketing team can restyle the widget or swap the agent in Widget Studio and the change goes live on Webflow with no republish.

## Troubleshooting

* **Widget not showing?** Confirm you published the Webflow site (custom code never runs in the Designer), and that the site is on a paid plan. Then check the browser console for the script request to `api.getsmartalex.com`.
* **Wrong style or agent?** That is controlled in Widget Studio, not the snippet. Save the correct config there; the page picks it up on next load.
* **Placed it in the head?** Move it to the footer or an Embed near the end of the page. It belongs before the closing `</body>` tag.

## Related

<CardGroup cols={2}>
  <Card title="Widget install guide" icon="code" href="/essentials/widget-install">
    The canonical install reference: snippet, React usage, and verification.
  </Card>

  <Card title="Widget variants" icon="layout-panel-left" href="/essentials/widgets">
    Compare the five variants and pick the right interaction model.
  </Card>

  <Card title="Create an agent" icon="robot" href="/studio/create-agent">
    Build and deploy the agent the widget will speak with.
  </Card>

  <Card title="Add voice to Framer" icon="frame" href="/build-with/framer">
    The same embed, done the Framer way.
  </Card>
</CardGroup>