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

# Installing the Widget

> Add the SmartAlex widget to any website: a script tag, plus copy-paste guides for WordPress, Shopify, Wix, Squarespace, and React.

Once you've configured a widget in [Widget Studio](/essentials/widgets), installing it is one script tag. Your `data-tenant-id` value is shown in the widget code panel inside SmartAlex, or ask your AI assistant for it through the [MCP tool](/mcp/tools-reference#smartalex-get-widget-install-code).

## Basic install

Add the widget script to your site and place it just before the closing `</body>` tag:

```html 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>
```

That's the whole install. The widget reads your published configuration (variant, colours, agent) at load time, so you can restyle it in Widget Studio later without touching your site again.

## Platform guides

<AccordionGroup>
  <Accordion title="WordPress">
    **Theme editor:**

    1. Go to **Appearance → Theme Editor**.
    2. Select `footer.php`.
    3. Paste the widget code before `</body>`.
    4. Click **Update File**.

    **Or with a headers-and-footers plugin:**

    1. Install and activate a plugin like "Insert Headers and Footers".
    2. Go to **Settings → Insert Headers and Footers**.
    3. Paste the code into the "Scripts in Footer" section.
  </Accordion>

  <Accordion title="Shopify">
    1. Go to **Online Store → Themes**.
    2. Click **Actions → Edit code**.
    3. Open `theme.liquid`.
    4. Paste the widget code before `</body>`.
    5. Click **Save**.
  </Accordion>

  <Accordion title="Wix">
    1. Open your Wix Editor.
    2. Click **Add → Embed Code → Custom Embeds**.
    3. Select **Embed a Widget**.
    4. Paste the widget code.
    5. Position the widget and publish.
  </Accordion>

  <Accordion title="Squarespace">
    1. Go to **Settings → Advanced → Code Injection**.
    2. Paste the widget code in the **Footer** section.
    3. Click **Save**.
  </Accordion>

  <Accordion title="React / Next.js">
    Add the script from your root layout or app component:

    ```jsx theme={null}
    import { useEffect } from 'react';

    export default function Layout({ children }) {
      useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://api.getsmartalex.com/storage/v1/object/public/widget-assets/smartalex-widget.js';
        script.setAttribute('data-tenant-id', 'YOUR_TENANT_ID');
        script.async = true;
        document.body.appendChild(script);

        return () => {
          document.body.removeChild(script);
        };
      }, []);

      return <>{children}</>;
    }
    ```
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Widget not appearing">
    * Check that the script is actually on the page (view source and search for `smartalex-widget`).
    * Verify your `data-tenant-id` value is correct.
    * Check the browser console for JavaScript errors.
    * Make sure the widget isn't hidden by your site's CSS.
  </Accordion>

  <Accordion title="Calls not connecting">
    * Verify the widget's agent is active.
    * Check that microphone permissions are granted in the browser.
    * Test in an incognito window to rule out extensions.
    * Try a different browser.
  </Accordion>
</AccordionGroup>

<Card title="Back to Widget Studio" href="/essentials/widgets">
  Configure the variant, appearance, and behaviour before you install.
</Card>