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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ixhello.com/ixhc2/deployments/chat-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.