# Chat Widgets

This page explains how to create and configure the appearance of a chat widget.\
A chat widget defines how the webchat interface looks and behaves visually. Once configured, it can be reused across multiple conversational flows.\
This document focuses only on **appearance configuration**. To learn how to connect a chat widget to a flow, see [deploy a flow](https://docs.ixhello.com/ixhc2/flows/deploy-flow) 

## Before You Begin <a href="#before-you-begin" id="before-you-begin"></a>

* Confirm you know the **domain names** where the widget will be hosted (for example, your company website or staging environment).
* Prepare a **PNG image** if you plan to upload a custom avatar icon. Required dimensions: **200×200px** and **max. 200 KB**.

## Accessing the Chat Widget Configuration <a href="#accessing-the-chat-widget-configuration" id="accessing-the-chat-widget-configuration"></a>

1. Sign in to **ixHello Customer v2**.
2. In the left navigation menu, go to **Deployments → Chat Widgets**.
3. Select **Create Chat Widget** or open an existing widget to edit.&#x20;
4. The Chat Widget configuration page includes:
   * A **Details** and **Appearance** section
   * A **Live Preview** pane showing real-time updates

<figure><img src="https://4187494610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFe4cpY1jy0FJ4kgC7wSx%2Fuploads%2FtlzdnJRfb09bvreKVFKO%2Fchat-widget-detail-page.png?alt=media&#x26;token=66984146-8446-491e-9edb-5c5f905b659c" alt="new chat widget detail page"><figcaption></figcaption></figure>

## Configuring the chat widget appearance <a href="#step-1-define-widget-details" id="step-1-define-widget-details"></a>

### Step 1: Define Widget Details <a href="#step-1-define-widget-details" id="step-1-define-widget-details"></a>

Each chat widget includes basic identification and security settings.

<table data-header-hidden><thead><tr><th width="374"></th><th></th></tr></thead><tbody><tr><td>Field</td><td>Description</td></tr><tr><td><strong>Name</strong></td><td>A unique identifier used to reference this widget when linking it to a flow deployment. Use clear names like, <code>Retail Support Widget</code>.</td></tr><tr><td><strong>Allowed Domains</strong></td><td>A list of valid URLs where this widget is permitted to run.</td></tr></tbody></table>

#### Configuring Allowed Domains <a href="#configuring-allowed-domains" id="configuring-allowed-domains"></a>

Enter one or more fully qualified URLs. Each URL must include the protocol (`https://`) and domain name. Wildcards are not supported.

```
https://www.example.com
https://support.example.com
https://staging.example.net
```

* If a chat widget is embedded on a site **not listed** in the allowed domains, it will **not load**.
* To enable a widget on multiple subdomains, list each domain explicitly.
* Update this list whenever you add new web properties or environments.

***

### Step 2: Customize Appearance <a href="#step-2-customize-appearance" id="step-2-customize-appearance"></a>

The Appearance section controls the visual styling of the chat widget.\
Changes made here are shown immediately in the live preview panel on the right side of the page.

| Setting             | Description                                                             |
| ------------------- | ----------------------------------------------------------------------- |
| **Widget Title**    | The text displayed in the chat header. Example: `Ask Retail Assistant`. |
| **Primary Color**   | The main brand color used for header, buttons, or accents.              |
| **Secondary Color** | A complementary color used for backgrounds or highlights.               |

{% hint style="info" %}
Use colors with sufficient contrast to meet accessibility guidelines.
{% endhint %}

***

### Step 3: Upload an Avatar Icon (Optional) <a href="#step-3-upload-an-avatar-icon-optional" id="step-3-upload-an-avatar-icon-optional"></a>

After saving the chat widget, you can upload a **PNG avatar icon** to personalize the chat widget.

1. Under **Avatar**, click **Upload file**.
2. Choose your prepared PNG file and select **Save**.

{% hint style="info" %}
The avatar upload is saved and updated separately from other appearance settings.
{% endhint %}

***

### Step 4: Review and Save <a href="#step-4-save-and-review" id="step-4-save-and-review"></a>

1. Review the live preview to confirm colors, title, and avatar appearance.
2. Click **Save** to apply your configuration.

{% hint style="info" %}
Appearance changes are **cached**. Updates to an existing widget may take **up to 24 hours** to appear in production environments.\
The preview in ixHello reflects changes immediately, but live sites will refresh after the cache period.
{% endhint %}

<figure><img src="https://4187494610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFe4cpY1jy0FJ4kgC7wSx%2Fuploads%2F9pUzXfNNfBZp2tygsB0B%2Fchat-widget-detail-page-configured.png?alt=media&#x26;token=d413a5d8-0f35-4ee8-ba16-699349270f39" alt="Fully configured chat widget"><figcaption></figcaption></figure>

### Next Steps <a href="#next-steps" id="next-steps"></a>

Once you’ve configured and saved your chat widget appearance, you can connect it to a flow deployment. See [deploy a flow](https://docs.ixhello.com/ixhc2/flows/deploy-flow) for instructions.