Skip to main content
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.
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.

​
Before you start

1

Have an agent ready

Create and deploy an agent in Studio first, so the widget has something to answer with. See Create an agent.
2

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.

​
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).
Widget script tag
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.

​
Option A: site-wide with Custom code

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

Open site settings

In the Webflow Designer, click the site name (top left), then Site settings (formerly Project settings).
2

Go to Custom code

Open the Custom code tab. Scroll to the Footer code box, labelled “Before </body> tag”.
3

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.
4

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.

​
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).
1

Add an Embed element

On the canvas, press Ctrl/Cmd + E 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.
2

Paste the snippet

In the code editor that opens, paste the full script tag, then click Save and close.
3

Publish

Publish the page. As with Option A, the script executes on the live domain, not in the Designer preview.
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.

​
Choosing a widget variant

You pick the look and interaction inside Widget Studio, not in Webflow. Five variants are available:
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 for the full breakdown.

​
How the pieces fit together

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.

Widget install guide

The canonical install reference: snippet, React usage, and verification.

Widget variants

Compare the five variants and pick the right interaction model.

Create an agent

Build and deploy the agent the widget will speak with.

Add voice to Framer

The same embed, done the Framer way.