> ## Documentation Index
> Fetch the complete documentation index at: https://docs.itellico.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Widget Deployment

> Embed voice and chat with your AI agent on your website

export const Screenshot = ({lightSrc, darkSrc, alt, caption, maxWidth = "880px"}) => {
  return <div style={{
    margin: "1rem auto",
    maxWidth,
    width: "100%"
  }}>
      <Frame>
        <img className="block dark:hidden" src={lightSrc} alt={alt} />
        <img className="hidden dark:block" src={darkSrc} alt={alt} />
      </Frame>
      {caption ? <p style={{
    marginTop: "0.5rem",
    fontSize: "0.875rem",
    color: "inherit",
    opacity: 0.8
  }}>
          {caption}
        </p> : null}
    </div>;
};

The web widget lets visitors interact with your AI agent through voice, chat, or both. Create your widget, configure it through the visual editor, then copy and paste a single embed script to deploy.

## Use Web Widget Deployment When You Need To

* add an always-available assistant to your website
* support visitors with voice, chat, or both
* launch different widget experiences for different pages
* let marketing or operations teams manage the website experience without rebuilding the agent

The usual business workflow is: **create widget → configure the visitor experience → test in preview → publish the embed script**.

<Tip>
  For detailed widget editor configuration including appearance, content, features, actions, privacy, and share links, see the [Widget Configuration](/manage/web-widgets/configuration) guide.
</Tip>

## Create Your Widget

<Screenshot lightSrc="/images/widget__create-widget-light.png" darkSrc="/images/widget__create-widget-dark.png" alt="Create Widget dialog showing Widget Name field with placeholder text 'Enter widget name', Agent dropdown to select which agent powers the widget, Cancel and Create Widget buttons" />

<Steps>
  <Step title="Open the widget manager">
    Navigate to **Web Widgets** in the dashboard
  </Step>

  <Step title="Create a new widget">
    Click **Create Widget** and provide:

    * **Widget name** - Internal label for your reference
    * **Agent** - Select which agent powers this widget
  </Step>

  <Step title="Configure the widget">
    Use the visual editor tabs to configure **Setup**, **Appearance**, **Content**, **Features**, **Actions**, **Privacy**, **Export**, and **Share**. The editor includes a live preview that updates as you make changes. See the [Widget Configuration](/manage/web-widgets/configuration) guide for full details on each editor tab.
  </Step>

  <Step title="Save your changes">
    When you have pending edits, use the **Unsaved changes** bar at the bottom of the editor to save them.
  </Step>
</Steps>

## Get Your Embed Code

Once your widget is configured, copy the embed script from the **Export** tab.

<Screenshot lightSrc="/images/widget__export-tab-light.png" darkSrc="/images/widget__export-tab-dark.png" alt="Export tab showing unique embed script code block with copy button and platform-specific installation guides for Google Tag Manager, WordPress, Webflow, Shopify, and Squarespace" />

The Export tab includes:

* **Embed script** - Your unique loader URL to copy and paste
* **Platform guides** - Step-by-step instructions for Google Tag Manager, WordPress, Webflow, Shopify, and Squarespace

## Deploy Your Widget

<Steps>
  <Step title="Test in the preview">
    Use the live preview on the right side of the editor to test your widget before deploying. Click the refresh icon if needed.
  </Step>

  <Step title="Copy the embed script">
    Go to the **Export** tab and copy your unique embed script.
  </Step>

  <Step title="Add to your website">
    Paste the script just before the closing `</body>` tag on your website, or ask your web developer to add it.
  </Step>

  <Step title="Test it live">
    Load your site, click the widget, and test a voice or chat conversation. Check **Conversations** to verify the session was recorded.
  </Step>
</Steps>

<Screenshot lightSrc="/images/widget__web-call-widget-light.png" darkSrc="/images/widget__web-call-widget-dark.png" alt="Widget editor preview showing the configured voice widget call-to-action on the preview canvas" caption="Use the dashboard preview for configuration checks, then validate the real embedded experience on the target site before launch." />

<Note>
  Configuration changes you make in the dashboard automatically apply to your embedded widget. No need to update the embed script. If changes don't appear immediately, do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R).
</Note>

## Deployment Notes

* **HTTPS required** for microphone access (except localhost)
* **Mobile responsive** - The widget automatically adapts to mobile screens
* Create separate widgets for different sites or branding needs

## Troubleshooting

<AccordionGroup>
  <Accordion title="Widget not appearing" icon="eye-slash">
    * Ask whoever manages your site to check for website script errors if needed
    * Verify allowed domains include your site
    * Ensure script is placed before `</body>` tag
    * Check Content Security Policy settings
  </Accordion>

  <Accordion title="Microphone access denied" icon="microphone-slash">
    * HTTPS required (except localhost)
    * Visitors must grant permission manually
    * Check browser microphone settings
    * Some browsers block on first visit
  </Accordion>

  <Accordion title="No audio or poor quality" icon="volume-xmark">
    * Audio issues may be caused by network restrictions. Try from a different network, or ask your IT team to allow voice connections.
    * Corporate VPNs may block audio
    * Test from a different network or browser
    * If it works elsewhere, the issue is usually a local network or device policy
  </Accordion>

  <Accordion title="Changes not updating" icon="arrows-rotate">
    * Save from the **Unsaved changes** bar in the editor
    * Hard refresh your site (Ctrl+Shift+R or Cmd+Shift+R)
    * Clear browser cache if needed
    * Verify you're editing the correct widget
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Widget Configuration" icon="palette" href="/manage/web-widgets/configuration">
    Full guide to the widget editor: appearance, content, features, actions, and privacy
  </Card>

  <Card title="Web Widget Implementation" icon="code" href="/launch/web-widget-implementation">
    Deploy widgets cleanly across environments with the right domain and privacy setup
  </Card>

  <Card title="Trust Center" icon="shield-check" href="/manage/trust-center/overview">
    Manage account-wide data privacy and compliance
  </Card>

  <Card title="Production Checklist" icon="shield-check" href="/launch/production-checklist">
    Learn how to maintain and scale your widget deployment
  </Card>
</CardGroup>