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

> Embed the SmartAlex AI voice and chat widget on your Wix site with Custom Code or an Embed HTML element, then publish.

Wix voice AI takes one script tag. There is no plugin to install and no code to write. You paste a single SmartAlex snippet into your Wix site, publish, and Alex appears as a floating voice and chat widget on every page. This guide covers the reliable way to add an AI chat widget to Wix (site-wide Custom Code) plus the inline Embed HTML option for a single section.

<Note>
  The widget renders your published configuration from the server at load time. That means the same snippet works for every widget variant and colour scheme. Restyle in Widget Studio any time, with no change to your Wix site.
</Note>

## What you need

* A published SmartAlex agent and an active widget (see [Widgets](/essentials/widgets)).
* Your workspace tenant ID (a UUID). Find it in the widget code panel inside SmartAlex, or ask the MCP tool `smartalex_get_widget_install_code`.
* For a site-wide floating widget: a Wix Premium plan with a connected domain. Wix only runs Custom Code on published sites that have a paid plan and a custom domain.

## Get your widget snippet

Copy the SmartAlex widget snippet and replace `YOUR_TENANT_ID` with your workspace ID.

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

  ```html Formatted 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>
  ```
</CodeGroup>

The only attribute you set is `data-tenant-id`. There is no `data-variant` or `data-color` on the tag: the widget reads its variant, colours, and agent from your published config, so the snippet is byte-identical for all five variants.

## Choose your widget variant

Pick the variant in Widget Studio inside SmartAlex, not in the snippet. One widget is active per workspace at a time.

| Variant        | Interaction    | What it looks like on your site                                 |
| -------------- | -------------- | --------------------------------------------------------------- |
| Pill (default) | Voice and chat | A compact floating button that expands into chat. Safe default. |
| Chat bar       | Text           | An always-visible input bar pinned to the bottom of the page.   |
| Side panel     | Text           | A full-height panel that slides in from the right.              |
| Voice pill     | Voice only     | A voice-only pill with a call button and avatar.                |
| Ask Alex       | Voice and text | A premium voice and chat messenger that lives on your site.     |

<Info>
  The Voice pill and Ask Alex variants appear only when your agent runs on the SmartAlex voice engine. If you do not see them in Widget Studio, deploy the agent to the voice engine first. Pill, Chat bar, and Side panel are always available.
</Info>

Voice runs on curated, high-accuracy speech, language, and voice models, kept abstracted, so you never wire up or maintain any of it.

## Embed it in Wix

<Steps>
  <Step title="Open Custom Code in your Wix dashboard">
    Go to your site's dashboard, then **Settings**, then **Custom Code** (under Advanced). Click **+ Add Custom Code**.
  </Step>

  <Step title="Paste the snippet">
    Paste the SmartAlex script tag into the code box and name it something like `SmartAlex Widget`.
  </Step>

  <Step title="Set placement">
    Set **Add Code to Pages** to **All pages** and load it **Once**. Choose **Body - end** for placement, and apply it to **All visitors**.
  </Step>

  <Step title="Apply and publish">
    Click **Apply**, then **Publish** your site from the Editor. Custom Code runs on the live published site, not in the Editor preview.
  </Step>
</Steps>

<Warning>
  Custom Code needs a Wix Premium plan and a connected domain. On a free `wixsite.com` URL the snippet will not run. If you are on a free plan, use the inline Embed HTML option below to test in a single section.
</Warning>

### Inline option: Embed HTML element

If you want the widget inside one specific section rather than floating site-wide:

1. In the Wix Editor, click **Add Elements** (the +), then **Embed Code**, then **Embed HTML**.
2. On the element, click **Enter Code**, choose **Code** mode (not Website address), and paste the snippet.
3. Resize and position the box, then **Publish**.

<Note>
  Wix renders Embed HTML inside an iframe, so the widget is confined to that box. That is fine for dropping a chat bar into a single section, but for a floating pill or side panel across the whole site, use the Custom Code path above.
</Note>

## How it loads

```mermaid theme={null}
flowchart LR
  A[Visitor opens your Wix page] --> B[Custom Code injects the widget script]
  B --> C[Script fetches your published config]
  C --> D[Renders your chosen variant and agent]
  D --> E[Visitor chats or talks to Alex]
```

## Verify it

1. Open your published Wix site in a normal browser tab, not the Editor.
2. Look for the widget in the bottom corner and open it.
3. Send a message or start a call to confirm Alex responds.

If nothing appears, confirm you published the site, you are on a paid plan with a connected domain, and no ad blocker is stripping third-party scripts. Restyling or switching variants in Widget Studio takes effect on the next page load, with no edit to your Wix site.

## Prefer to drive it from an AI assistant?

Connect SmartAlex to Claude, Cursor, or ChatGPT over MCP and let your assistant fetch the snippet and manage the widget for you.

```bash theme={null}
claude mcp add --transport http smartalex https://api.getsmartalex.com/functions/v1/mcp-server
```

Then prompt: "Get my SmartAlex widget install code and set the widget variant to Ask Alex." See the [MCP overview](/mcp/overview) for everything an assistant can control.

## Do more after embedding

The widget captures leads and books calls on its own. To push those events into your own systems, add [Custom HTTP Tools](/essentials/agent-tools) so Alex can call your HTTPS endpoints mid-conversation. Custom HTTP Tools are part of the Power Tools add-on (\$29/mo), which also unlocks the Developer Portal and MCP keys. Platform webhook events are in private beta today, so see [Automation](/build-with/automation) for the honest state of webhooks.

## Related

<CardGroup cols={2}>
  <Card title="Widget install reference" href="/essentials/widget-install">
    Every place to paste the snippet, plus the React and Next.js version.
  </Card>

  <Card title="Choose a widget variant" href="/essentials/widgets">
    Compare the five variants and how each looks on your site.
  </Card>

  <Card title="Add it to Shopify" href="/build-with/shopify">
    The same snippet on a Shopify theme.
  </Card>

  <Card title="Automate with webhooks and MCP" href="/build-with/automation">
    Connect calls and deals to your own tools.
  </Card>
</CardGroup>