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

# Widgets

> Add a voice and chat widget to your website so visitors can reach your AI agent in the browser. Five variants, styled to your brand, installed with one script tag.

## Overview

SmartAlex Widgets let your website visitors reach your AI agent right in the browser, by voice, by text, or both. No phone number, no app. You configure the look and behaviour in Widget Studio, then drop one script tag on your site.

## Widget variants

Widget Studio ships five variants. Pick the one that fits how you want visitors to reach your agent, then preview it live before you publish. One widget is active per workspace at a time.

| Variant            | Interaction            | Shape                              | Best for                                       |
| ------------------ | ---------------------- | ---------------------------------- | ---------------------------------------------- |
| **Pill** (default) | Voice-first, with chat | Compact floating pill that expands | Most sites: one tap to talk, type if preferred |
| **Voice pill**     | Voice only             | Floating voice button              | Voice-only experiences                         |
| **Chat bar**       | Text                   | Docked chat bar                    | Sites that want typed conversations            |
| **Side panel**     | Text                   | Slide-out side panel               | Longer typed conversations with history        |
| **Ask Alex**       | Voice and text         | Full messenger                     | A rich assistant that does both in one window  |

## Creating a Widget

<Steps>
  <Step title="Open Widget Studio">
    Go to **Widgets** in your dashboard.
  </Step>

  <Step title="Pick a variant">
    Choose one of the five variants above. The live preview updates as you switch.
  </Step>

  <Step title="Select an agent">
    Choose which AI agent will handle widget conversations.
  </Step>

  <Step title="Customize appearance">
    Match your brand:

    * Primary colour (hex code or picker)
    * Button text (e.g. "Talk to Alex")
    * Position (bottom-right, bottom-left, custom)
    * Size and corner radius
  </Step>

  <Step title="Get the install code">
    Copy the embed snippet and add it to your site. See [Installing the widget](/essentials/widget-install).
  </Step>
</Steps>

## Customization options

### Appearance

| Setting            | Options                           |
| ------------------ | --------------------------------- |
| **Primary colour** | Any hex colour                    |
| **Button text**    | Custom text or icon only          |
| **Position**       | Bottom-right, bottom-left, custom |
| **Size**           | Small, medium, large              |
| **Corner radius**  | Square to fully rounded           |

### Behavior

| Setting              | Description                              |
| -------------------- | ---------------------------------------- |
| **Auto-open**        | Open automatically on page load          |
| **Delay**            | Wait before showing the widget (seconds) |
| **Mobile display**   | Show or hide on mobile devices           |
| **Greeting message** | Opening message in the chat interface    |

## Installing

Installation is a single script tag, with copy-paste guides for WordPress, Shopify, Wix, Squarespace, and React.

<Card title="Installing the widget" href="/essentials/widget-install">
  The script tag and every platform guide.
</Card>

## Live preview

Widget Studio includes a live preview so you can:

* See changes in real time
* Test on different device sizes
* Preview light and dark modes
* Try the voice and chat interface

## Widget analytics

Track how the widget performs:

| Metric              | Description                         |
| ------------------- | ----------------------------------- |
| **Impressions**     | Times the widget was displayed      |
| **Clicks**          | Times it was opened                 |
| **Calls started**   | Conversations that connected        |
| **Calls completed** | Successfully finished conversations |
| **Conversion rate** | Opens to completed conversations    |

## Best practices

<AccordionGroup>
  <Accordion title="Placement">
    * The **pill** is the safe default: always visible, out of the way.
    * Bottom-right is the position most users expect.
    * Avoid covering important content or your main call-to-action.
  </Accordion>

  <Accordion title="Call to action">
    * Use action-oriented text: "Talk to us", "Get help now".
    * Keep it short, two or three words.
    * Match your brand voice.
  </Accordion>

  <Accordion title="Mobile">
    * Test on real mobile devices.
    * Make sure the button is big enough to tap.
    * Consider hiding it on mobile if a call doesn't make sense there.
  </Accordion>
</AccordionGroup>