Skip to main content
Framer sites publish fast and look great, but they cannot answer a call or qualify a lead on their own. SmartAlex adds that in one line: paste a single script tag into Framer, publish, and every page gets a live Ask Alex widget that talks, chats, books, and captures leads. No plugin, no build step, no rebuild when you restyle it. There are two ways to add the SmartAlex voice AI to Framer. For a floating widget that appears on every page, use the site-wide custom code field. For a widget locked into one section of one page, use the Embed component. Both use the exact same snippet.
Under the hood, agents run on curated, high-accuracy speech, language, and voice models, kept abstracted. You describe the agent in SmartAlex, and it runs. There is nothing to wire up in Framer beyond the one tag below.

​
The snippet

This is the entire integration. It is byte-identical for all five widget variants, because the widget reads its published configuration (variant, colors, agent) from the server at load time. Restyle in Widget Studio anytime and you never touch Framer again.
The only value you change is YOUR_TENANT_ID. Find it in the widget code panel inside SmartAlex (Widget Studio), or ask an AI client connected to our MCP server to run smartalex_get_widget_install_code.
Framer custom code runs only on the published site, not on the editor canvas or the in-app preview. You will not see the widget until you publish (or publish to a staging URL). This is expected. Do not assume it failed because the canvas looks unchanged.

​
Option A: floating widget on every page (recommended)

Use Framer’s site-wide custom code so the widget rides along on every published page.
1

Open site settings

In the Framer editor, open the site menu (the site name near the top left) and go to Site Settings, then General. Scroll to the Custom Code section. You will see two fields: Start of <head> tag and End of <body> tag.
2

Paste into End of body tag

Paste the snippet into the End of <body> tag field. This loads the widget after your page content, which is the right place for a floating element and keeps it from blocking your first paint (the async attribute already prevents render-blocking).
3

Set your tenant ID

Replace YOUR_TENANT_ID with the ID from your SmartAlex workspace. Leave everything else exactly as written.
4

Publish

Click Publish (top right). Open the live URL, or a staging publish if you want to test first. The widget appears in the corner within a second or two.

​
Option B: inline widget in one section

If you want the widget bound to a single spot (for example a “Talk to us” block on a contact page) rather than floating, use Framer’s Embed component.
1

Insert an Embed

On the canvas, open the Insert panel, search for Embed, and drag it onto the frame where you want the widget.
2

Choose HTML and paste

In the Embed’s properties on the right, set the type to HTML and paste the same snippet from above (with your tenant ID filled in).
3

Size and publish

Give the Embed enough room on the layout, then Publish. As with Option A, the Embed only renders on the published site.
Most teams want the floating version. The chat bar and side panel variants are designed to sit at the edge of the viewport, so Option A (site-wide) suits them best. Reach for the Embed component only when you deliberately want the widget inside a section.

​
Pick a variant in Widget Studio

You choose the look in SmartAlex, not in Framer. Because the snippet never changes, switching variants is a one-click change in the dashboard that takes effect on your live Framer site on the next load.
The voice pill and Ask Alex variants appear in the picker only when your agent runs on the SmartAlex voice engine. The Ask Alex variant also enables persistent pop-up calls, so a call keeps going as the visitor moves between pages. Only one widget is active per workspace at a time. Full detail: widgets and widget install.

​
Before you embed: build the agent

The widget is the front door. What answers is an agent you create in SmartAlex. The fastest path is to paste your Framer site URL into Studio and let it auto-build an agent from your own content in under a minute, then refine the greeting, tools, and voice.

Create an agent

Auto-build from your site URL, then tune the greeting and voice.

Give it tools

Let the agent book meetings, take payments, and hit your own endpoints mid-call.

​
Go further with your own logic

Framer handles the front end. When you want the agent to do something specific during a call (check availability, create a record in your system, take a deposit), you have two live surfaces:
  • Custom HTTP Tools (part of the Power Tools add-on at $29/month) let an agent call your own HTTPS endpoint mid-conversation and use the response in its reply.
  • The MCP server lets an AI client such as Claude Code or Cursor operate your whole SmartAlex account in plain language: create agents, assign numbers, launch campaigns, read transcripts.
Webhook subscriptions (for example call.completed or deal.stage_changed) are creatable today and each returns an HMAC-SHA256 signing secret, though outbound event delivery is still in private beta. A public REST API and TypeScript SDK are coming soon. For automation today, prefer Custom HTTP Tools and MCP. See automation and agent tools.

Widget install reference

Every variant, the React version, and troubleshooting.

Build with Webflow

The same widget in Webflow’s Embed element or custom code.

Connect an AI client via MCP

Operate SmartAlex from Claude Code, Cursor, or ChatGPT.

See pricing

Plans, included minutes, and add-ons.