--- title: "Design a chat window" slug: "chatdesignoverview1-design-a-chat-window" updated: 2026-07-23T10:06:53Z published: 2026-07-23T10:06:53Z canonical: "help.8x8.com/chatdesignoverview1-design-a-chat-window" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.8x8.com/llms.txt > Use this file to discover all available pages before exploring further. # Design a chat window ## Understand chat window design in 8x8 Contact Center Chat interactions in **8x8 Contact Center** help you respond to customer inquiries quickly and efficiently. **8x8 Contact Center** administrators can configure chat windows to control how interactions appear and behave for end users. Agents can be assigned to one or more chat queues. These queues route interactions to available agents based on priority and availability. > [!NOTE] > Note: > > Agents can handle up to six concurrent chats with customers and unlimited chats with other agents. The chat configuration experience includes a**real-time conversation preview**. This allows you to visualize how the chat interface appears to users while you configure features. Previously, configuration changes required saving and testing separately. Now, you can immediately see how updates affect the chat interface. The preview updates dynamically based on your configuration. **You can visualize:** - Chat layout and structure - Enabled features such as attachments and notifications - Bot and agent interaction states - Input availability during bot interactions > [!NOTE] > Note: > > The preview shows a mock conversation and does not simulate a live interaction. ### Benefits - **Improved accuracy**: Validate chat configuration before deployment - **Faster setup**: Reduce trial and error with instant feedback - **Better user experience**: Ensure consistent branding and behavior - **Enhanced troubleshooting**: Identify configuration issues earlier ## How to design a chat window You can create and configure a chat window in the **8x8 Configuration Manager**. > [!NOTE] > Note: > > When customizing chat window features, changes are immediately reflected in the **Preview** window. For details on available configuration fields and their behavior, see **Create a chat window** 1. In **8x8 Configuration Manager** menu, open **Chat Design**. 2. Select the **Window** tab. 3. Click ![](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/icon_plus_18x18.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D) or **Add New Window**. 4. Enter general information: - **Name**: Internal reference name - **Description**: Optional description 5. Configure chat window settings: - **Window title**: Enter a title for the chat window. (Up to 30 characters). This appears in the chat header; it defines how the chat is presented to users. - **Allow customers to send attachments to agents**: If enabled, the **Attachment ![](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/icon-attachment_16x18.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D)** icon is shown in the conversation box. - **Allow chat notifications**: Enables visual and sound notifications. - If enabled, customers receive visual notifications for new messages. This also adds a **Sounds ![](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/icon-sounds_19x18.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D)** option to the chat menu ![](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/icon-more-actions_6x18.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D) (in the chat header), which customers can use to turn sound notifications on or off independently. - Customers will receive both a visual and audio notification when a new web chat message arrives, even if they close or minimize the web chat window: - A new message alert highlights unread messages in the 8x8 webchat window. This alert will disappear once the message is read. ![A new message alert appears in the 8x8 web chat window to highlight unread messages](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/webcat-notification-caht-window.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D) - When sound notifications are enabled, an alert tone plays, and a visual notification appears in the website tab as well as in the web chat widget if the chat window is minimized or close. ![When notifications are enabled, an alert sound plays, and a visual notification appears in the website tab and web chat widget when minimized or closed](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/webcat-notification-widget.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D) - **Allow customers to keep session alive**: If enabled, allows users to type before an agent joins, typically used when a bot is involved. Useful for testing bot interactions.Enables visual and sound notifications. > [!NOTE] > Note > > Changes are reflected immediately in the **Preview**. 6. Enable **Co-browsing** if required. It displays **Start Co-browsing session** in the chat window. For details on Co-browsing, see [Co-browsing via Chat](/documentation/docs/enable-co-browsing-via-chat). 7. Customize colors: - Select the **Use default colors** checkbox to apply 8x8’s WCAG-compliant theme. - To customize, clear the checkbox and define your own header and button colors. 8. Customize **Logo**: - Click **Choose Files** to upload a logo (up to 200 kB). The logo is resized to 100×30 pixels. - Click **Reset** to remove the uploaded logo. It restores the default version (no custom images). - Enter a **Logo label** for accessibility (following WCAG accessibility standards) 9. Configure agent and chatbot identity: - **Show agent avatar**: Enable or disable agent avatar. If enabled, the agent's avatar appears in the chat header and next to the agent's name during web chat interactions. - Enter a **Chatbot name**. This name will be used in all interactions with the chatbot. - Upload a **Chatbot avatar** (optional) to customize how bot identities appear: - Click **Choose Files** to upload a bot avatar (up to 200 kB). The bot avatar is resized to 100×30 pixels. - Click **Reset** to remove the custom avatar. It restores the default version (no custom images). Preview updates immediately after reset. - **Chatbot avatar label**: Enter alt text describing the chatbot avatar for screen readers, following WCAG accessibility standards - Add a chatbot Bio: > [!NOTE] > Note > > The chatbot bio is visible only in bot mode. - **Default bio**: Add a bot description (up to 200 characters). This text will introduce your chatbot to customers. 10. Click **Save** to save your configuration. > [!WARNING] > **Important!**: > > Enable S**how conversation preview** below the **Preview** window to see changes reflected in real-time. For details, see [Use conversation preview](/documentation/docs/chatdesignoverview1-design-a-chat-window#use-conversation-preview). You have defined all the Chat Visual Block (CVB) elements. The next step is to add them in a [chat script](/documentation/docs/content-create-a-chat-script) to complete the workflow. ![How to create a chat window in 8x8 Configuration Manager](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/chat-design-window-config.gif?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D) **Use conversation preview** The **Preview** window updates in real time as you make changes. You can see how the user will see the conversation window. **To enable conversation preview:** - While [configuring the chat window](/documentation/docs/chatdesignoverview1-design-a-chat-window#create-a-chat-window), enable the **Show conversation preview** toggle below the **Preview** window. - The Bot mode allows customers to interact with the bot and agent. - Review how the chat appears. **When conversation preview is enabled:** - Changes update instantly. - Bot interactions are visible. - The bot bio appears in the header of the chat conversation. Hover over the header and click **See more** to view it. - Users can type before an agent joins (if enabled). > [!NOTE] > Note > > The preview displays a mock conversation that updates based on your configuration. ![Chat window preview displaying a chatbot conversation with “Marta Bot” and a toggle labeled Show conversation preview enabled at the bottom](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/chat-window-bot-mode.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D) **Edit or delete a chat window** **To edit:** 1. Go to **Chat Design** > **Window**. 2. Select the desired window and click **Edit ![](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/icon-edit_15x18.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D)** in the row. 3. Update settings and save. **To delete:** 1. Go to **Chat Design** > **Window**. 2. Select a window. 3. Click **Delete ![](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/icon-delete_17x18.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D)** in the row and confirm. **Personalize the web chat theme** After configuring your web flow, you may modify your chat window settings. Although you can do this within **8x8 Configuration Manager**, it lacks the flexibility to theme all areas. You can adjust the theme related to the notification settings, including the size, colour, or position of the message badge or button. When changing the notification theme, remember to use a unified approach regarding the colour you use for all the chat window elements, such as buttons, wedges, etc. See our [API documentation](https://developer.8x8.com/actions-events/docs/theming) to learn how to adjust the theming notification settings. ![Chat window - Modify the notification settings theme, such as the size, colour, or position of the message badge or button](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/chat-window-theming.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D) ## Reference **Chat window configuration reference** This section describes available configuration fields and their behavior. | Field name | Description | Behavior in preview | | --- | --- | --- | | **Window title** | Title displayed in the chat header | Visible in the chat header (if bot or agent not displayed) | | **Name** | Chat name used in the interface | Not shown to users | | **Description** | Additional context for the chat | Not shown to users | | **Attachments** | Enables file sharing | Shows **Attachment ![](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/icon-attachment_16x18.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D)** icon | | **Chat notifications** | Enables visual and sound alerts | Adds **Sounds ![](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/icon-sounds_19x18.png?sv=2026-02-06&spr=https&st=2026-11-03T22%3A19%3A01Z&se=2026-11-03T23%3A19%3A01Z&sr=c&sp=r&sig=GrIecxHqn67j9AV100BmNv%2FvUZGjNJAVyB9UDuoHsHA%3D)** option in menu | | **Keep session active** | Allow inputs before the agent joins | Input field enabled in preview | | **Chatbot name** | Name used for chatbot identity | Displayed in the chat header and bot messages | | **Bot bio** | Bot description (up to 200 characters) | Visible in bot mode (expanded view in the chat header) | | **Agent avatar** | Displays agent image | Shown or hidden (when hidden, the logo is displayed on the header, but no image is used on the message bubble inside the conversation) | | **Bot avatar** | Displays bot image | Shown or hidden (when hidden, the default bot image is displayed) | | **Preview toggle** | Enables mock conversation preview | Activates the preview pane | **Preview behavior** - Displays a mock conversation - Updates instantly when settings change - Does not simulate backend logic **Data and behavior notes** - Preview reflects current configuration before publishing - Bot features appear only when enabled. For details, see [Web chat interactions](/documentation/docs/chatdesignoverview1-web-chat-interactions). ### Related topics [Enable Co-browsing via chat](/documentation/docs/enable-co-browsing-via-chat) [Create a chat script](/documentation/docs/embedded-chat-design) [Web chat interactions](/documentation/docs/chatdesignoverview1-web-chat-interactions) [API Documentation - Theming](https://developer.8x8.com/actions-events/docs/theming/)