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:
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:
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:
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
In 8x8 Configuration Manager menu, open Chat Design.
Select the Window tab.
Click
or Add New Window.Enter general information:
Name: Internal reference name
Description: Optional description
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
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
option to the chat menu 
(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.
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.
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:
Changes are reflected immediately in the Preview.
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.
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.
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)
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:
Default bio: Add a bot description (up to 200 characters). This text will introduce your chatbot to customers.
Note:
The chatbot bio is visible only in bot mode.
Click Save to save your configuration.
Important!
Enable Show conversation preview below the Preview window to see changes reflected in real-time. For details, see Use conversation preview.
You have defined all the Chat Visual Block (CVB) elements. The next step is to add them in a chat script to complete the workflow.
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, 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:
The preview displays a mock conversation that updates based on your configuration.
Edit or delete a chat window
To edit:
Go to Chat Design > Window.
Select the desired window and click Edit
in the row.Update settings and save.
To delete:
Go to Chat Design > Window.
Select a window.
Click Delete
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 to learn how to adjust the theming notification settings.
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 |
Chat notifications | Enables visual and sound alerts | Adds Sounds |
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.