> ## 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 Framer site > Embed the SmartAlex voice AI widget in Framer with the site-wide custom code field or the Embed component. One script tag, all five widget variants, real publish steps. 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. ```html theme={null} ``` 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](/mcp/overview) 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. 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 `` tag** and **End of `` tag**. Paste the snippet into the **End of `` 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). Replace `YOUR_TENANT_ID` with the ID from your SmartAlex workspace. Leave everything else exactly as written. 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. ```mermaid theme={null} flowchart LR A[Framer Site Settings] --> B[Custom Code: End of body tag] B --> C[Paste script + tenant ID] C --> D[Publish] D --> E[Widget live on every page] F[Widget Studio] -.reads config at load.-> E ``` ## 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. On the canvas, open the **Insert** panel, search for **Embed**, and drag it onto the frame where you want the widget. 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). 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. | Variant | Interaction | Best for | | -------------- | --------------------- | --------------------------------------------------- | | Pill (default) | Voice-first plus chat | Compact floating button that expands into chat | | Chat bar | Text | Always-visible input bar along the bottom | | Side panel | Text | Full-height panel that slides in from the right | | Voice pill | Voice only | Voice-only pill with an avatar and a call button | | Ask Alex | Voice plus text | Premium voice and chat messenger, live on your site | 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](/essentials/widgets) and [widget install](/essentials/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. Auto-build from your site URL, then tune the greeting and voice. 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](/build-with/automation) and [agent tools](/essentials/agent-tools). ## Related Every variant, the React version, and troubleshooting. The same widget in Webflow's Embed element or custom code. Operate SmartAlex from Claude Code, Cursor, or ChatGPT. Plans, included minutes, and add-ons.