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

Before You Begin

• 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

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.

4. The Chat Widget configuration page includes:

   • A Details and Appearance section

   • A Live Preview pane showing real-time updates

Configuring the chat widget appearance

Step 1: Define Widget Details

Each chat widget includes basic identification and security settings.

Field	Description
Name	A unique identifier used to reference this widget when linking it to a flow deployment. Use clear names like, Retail Support Widget.
Allowed Domains	A list of valid URLs where this widget is permitted to run.

Configuring Allowed Domains

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

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.

Use colors with sufficient contrast to meet accessibility guidelines.

---

Step 3: Upload an Avatar Icon (Optional)

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.

The avatar upload is saved and updated separately from other appearance settings.

---

Step 4: Review and Save

1. Review the live preview to confirm colors, title, and avatar appearance.

2. Click Save to apply your configuration.

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.

Next Steps

Once you’ve configured and saved your chat widget appearance, you can connect it to a flow deployment. See deploy a flow for instructions.