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

# Widget Configuration

> Customize your web widget across eight editor tabs: setup, appearance, content, features, actions, privacy, export, and share

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>;
};

**Access:** Navigate to **Web Widgets** in the main menu and click **Edit** on any widget.

The widget configuration editor lets you customize your web widget.

A live preview on the right side of the editor updates as you make changes.

<Screenshot lightSrc="/images/manage__widget-editor-light.png" darkSrc="/images/manage__widget-editor-dark.png" alt="Widget configuration editor showing the eight-tab layout with live preview" caption="The editor is organized as a left-to-right workflow: configure the current tab, then use the live preview to confirm the visitor experience." maxWidth="860px" />

***

## Setup

Basic configuration that defines how the widget operates.

<Screenshot lightSrc="/images/manage__widget-setup-light.png" darkSrc="/images/manage__widget-setup-dark.png" alt="Widget setup tab showing widget name, agent selection, display name, and domain restrictions" caption="Start in Setup. This tab controls the widget identity, linked agent, and domain-level safety settings." maxWidth="860px" />

| Setting                 | Description                                                                                                                                   |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| **Widget Name**         | Internal name for identification in the widget list                                                                                           |
| **Agent**               | The voice agent that handles conversations through this widget. Configure agents in your [agent editor](/build/getting-started/agent-editor). |
| **Display Name**        | The agent's name shown to visitors in the widget                                                                                              |
| **Domain Restrictions** | Limit which domains the widget can load on. Leave empty to allow all domains.                                                                 |

<Warning>
  Domain restrictions are an important security measure. Without them, anyone who obtains your embed code could deploy the widget on their own site. Add your domains to prevent unauthorized usage.
</Warning>

***

## Appearance

Visual customization to match your brand identity.

<Screenshot lightSrc="/images/manage__widget-appearance-light.png" darkSrc="/images/manage__widget-appearance-dark.png" alt="Widget appearance tab showing theme presets, layout, avatar, colors, and radius settings" caption="Appearance is where you match the widget to your brand, from placement and size to avatar and detailed color controls." maxWidth="860px" />

### Theme Presets

Choose from a set of pre-designed color themes to quickly style your widget. Click any preset to apply it — you can fine-tune individual colors afterward.

### Layout

| Setting               | Description                                           |
| --------------------- | ----------------------------------------------------- |
| **Placement**         | Bottom-left or bottom-right of the page               |
| **Size**              | Small, medium, or large                               |
| **Horizontal Offset** | Distance from the edge of the page (in pixels)        |
| **Vertical Offset**   | Distance from the bottom of the page (in pixels)      |
| **Expanded Behavior** | Starts collapsed, starts expanded, or always expanded |

### Avatar

Choose how your widget's avatar appears:

| Type      | Description                                        |
| --------- | -------------------------------------------------- |
| **Orb**   | Animated gradient pulse with 4 customizable colors |
| **Image** | Upload a custom image (PNG, JPEG, WebP)            |
| **Link**  | Display an avatar from a URL                       |

### Colors

Colors are grouped into four collapsible sections for detailed control:

<AccordionGroup>
  <Accordion title="Backgrounds">
    Widget background, consent screen, chat area, feedback section, bottom section (input + branding), collapse button, and text on background.
  </Accordion>

  <Accordion title="CTA (Buttons)">
    Button background, text, hover background, and border. Toggle to animate the start call button.
  </Accordion>

  <Accordion title="Messages">
    Agent message background, text, and border. Visitor message background, text, and border.
  </Accordion>

  <Accordion title="Status">
    Status description text, pulse ring, and indicator colors for speaking, listening, thinking, and connecting states.
  </Accordion>
</AccordionGroup>

### Corner Radius

Control rounding for the widget container, input fields, message bubbles, CTA buttons, and collapse button.

***

## Content

Customize all text and labels displayed in the widget.

<Screenshot lightSrc="/images/manage__widget-content-light.png" darkSrc="/images/manage__widget-content-dark.png" alt="Widget content tab showing language presets, welcome messages, status messages, and feedback text" caption="Use Content to localize the widget and refine every visitor-facing label without changing the underlying agent behavior." maxWidth="860px" />

### Language Presets

Select a language to auto-populate all text fields with translated defaults. You can then customize individual labels.

### Welcome Messages

| Setting              | Description                                     |
| -------------------- | ----------------------------------------------- |
| **Welcome Message**  | Greeting text shown when the widget first opens |
| **Placeholder Text** | Hint text in the message input field            |

### Status Messages

| Setting         | Description                             |
| --------------- | --------------------------------------- |
| **Action Text** | Main call-to-action button label        |
| **Connecting**  | Text shown while connecting             |
| **Listening**   | Text shown when the agent is listening  |
| **Speaking**    | Text shown when the agent is speaking   |
| **Thinking**    | Text shown when the agent is processing |

### Feedback Messages

| Setting               | Description                                    |
| --------------------- | ---------------------------------------------- |
| **Feedback Message**  | Prompt shown to collect visitor feedback       |
| **Submit Button**     | Text on the feedback submit button             |
| **Thank You Message** | Confirmation shown after feedback is submitted |

<Tip>
  Customizing content labels is useful for localization or matching your brand voice.
</Tip>

***

## Features

Toggle capabilities on or off. Chat-only mode automatically disables some features.

<Screenshot lightSrc="/images/manage__widget-features-light.png" darkSrc="/images/manage__widget-features-dark.png" alt="Widget features tab showing chat-only mode, voice features, interaction, and display toggles" caption="Features is the capability toggle panel. This is usually where you decide whether the widget is voice-first, chat-only, branded, or feedback-enabled." maxWidth="860px" />

### Widget Mode

| Setting            | Description                                   |
| ------------------ | --------------------------------------------- |
| **Chat-only mode** | Disable voice features and use text chat only |

### Voice

Chat-only mode disables these settings.

| Setting                    | Description                                      |
| -------------------------- | ------------------------------------------------ |
| **Allow text during call** | Let visitors type messages while on a voice call |
| **Show transcript**        | Display a live transcript of voice conversations |
| **Mute control**           | Allow visitors to mute their microphone          |
| **Call timer**             | Show call duration during voice conversations    |

### Interaction

| Setting                           | Description                                                                                                    |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| **Skip greeting on initial text** | Skip the agent's [greeting](/build/conversation/greeting-messages) when the visitor starts with a text message |
| **Enable feedback collection**    | Prompt visitors for feedback after the conversation                                                            |
| **Allow image share**             | Let visitors share images in chat conversations                                                                |

### Display

| Setting           | Description                                          |
| ----------------- | ---------------------------------------------------- |
| **Show branding** | Display "Powered by itellicoAI" in the widget footer |

***

## Actions

Configure link buttons that appear in the widget, giving visitors quick access to common next steps.

<Screenshot lightSrc="/images/manage__widget-actions-light.png" darkSrc="/images/manage__widget-actions-dark.png" alt="Widget actions tab showing external link actions with labels, URLs, and toggle controls" caption="Actions adds lightweight handoff options such as external links, phone calls, or next-step buttons inside the widget." maxWidth="860px" />

You can add up to **5 actions**. Each action has:

| Setting               | Description                                                                     |
| --------------------- | ------------------------------------------------------------------------------- |
| **Label**             | Button text                                                                     |
| **URL**               | Destination link — supports `https://`, `http://`, and `tel:` for phone numbers |
| **Auto-click**        | Open the link automatically when the action triggers                            |
| **Await response**    | Wait for the visitor to complete the linked step before continuing              |
| **Timeout**           | Maximum wait time when Await response is enabled                                |
| **End call on click** | End the voice call after the visitor clicks a non-phone link                    |
| **Trigger**           | Instructions for when the agent should show or use the action                   |
| **Enabled**           | Toggle the saved action on or off from the action list                          |

The widget fetches a favicon from the linked domain and displays it next to each action.

For `tel:` links, the widget treats the action as a phone handoff and disables web-page wait behavior.

***

## Privacy

Control privacy and consent settings for widget visitors.

<Screenshot lightSrc="/images/manage__widget-privacy-light.png" darkSrc="/images/manage__widget-privacy-dark.png" alt="Widget privacy tab showing Trust Center settings and terms and consent configuration" caption="Privacy is where you wire the public Trust Center, legal text, and consent requirements into the widget experience." maxWidth="860px" />

### Trust Center

| Setting                 | Description                                                         |
| ----------------------- | ------------------------------------------------------------------- |
| **Enable Trust Center** | Toggle on to create a public privacy page for this widget           |
| **Privacy Policy URL**  | Link to your privacy policy (required when Trust Center is enabled) |
| **Subprocessors URL**   | Link to your subprocessors list (optional)                          |
| **Public URL**          | Auto-generated shareable link to the Trust Center page              |

### Terms & Consent

| Setting                 | Description                                                             |
| ----------------------- | ----------------------------------------------------------------------- |
| **Terms Content**       | Markdown text displayed as your terms/consent notice                    |
| **Accept Button Text**  | Label on the accept button                                              |
| **Dismiss Button Text** | Label on the dismiss button                                             |
| **Consent Required**    | When enabled, visitors must accept terms before starting a conversation |

***

## Share

Generate shareable links that open a standalone page with your widget — useful for stakeholder review and testing before going live.

<Note>
  The share tab is only available after you save the widget.
</Note>

See [Widget Share Links](/manage/web-widgets/share-links) for full details on creating and managing share links.

***

## Export

Generate the embed code to deploy your widget on your website.

<Screenshot lightSrc="/images/widget__export-tab-light.png" darkSrc="/images/widget__export-tab-dark.png" alt="Widget export tab showing the generated embed script and platform-specific installation notes" caption="Export gives you the single script tag for your website and quick install notes for common site builders." maxWidth="860px" />

Copy the generated script and paste it into your website's HTML, just before the closing `</body>` tag.

```html theme={null}
<script src="https://widgets.itellico.ai/widgets/your-widget-id/widget.js" async></script>
```

<Note>
  The embed code remains the same even when you update widget settings. The platform applies configuration changes automatically; you do not need to update your site's code.
</Note>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Web Widgets Overview" icon="browser" href="/manage/web-widgets/overview">
    Manage your widget list, create new widgets, and open the widget editor
  </Card>

  <Card title="Widget Deployment" icon="rocket" href="/launch/web-widget-deployment">
    Follow the step-by-step guide to deploying your widget on your website
  </Card>
</CardGroup>