View Source

Here you can define settings relating to the chat window, such as displaying a logo or adding background, text, or chat message colors. You can also select whether you want to display an agent profile picture in the customer Chat Window for the selected queue.

This Styling tab is applicable for new chat queues. Existing chat queues default to the previous Styling tab. For more information about the old Styling tab, see Styling Tab (Webchat v1.0)

Product Knowledgebase > Styling Tab (Webchat v2.0) > Styling Tab_Main_New.png

Pictures Area

Chat logo url: Enter the URL where to find your company's logo. It will appear in the chat window. If you leave the box blank, no logo appears on the chat window.
Agent picture: Select how to display the agent's picture, if it is to be shown at all.
- Do not show profile picture: No profile picture appears for the agent.
- Show agent's profile picture, or default profile picture if agent's picture is not defined: Shows the agent's profile picture if one has been defined. Otherwise, a pre-defined default picture is shown.
- Show agent's profile picture, or no picture at all if agent's profile picture is not defined: Shows the agent's profile picture if one has been defined. Otherwise, no picture is shown
- Show default profile picture:Shows a pre-defined default picture.
Agent Title: Enter the title for the agent.

Note the following:
- The agent title appears in the chat application itself and chat preview widget in the Contact Center Admin Portal. The title Consultant, is used by default, but admins can set a custom one. Configuration is per chat queue.
- Whenever an agent sends a link (URL) in their message to a chat visitor, the link appears as clickable in the chat application. No need to copy and paste the link from the chat message to the browser. The system recognizes the URL in the message based on the following conditions:
  - The text starts with https:// or http://
    OR
  - The text has www. + a domain name, such as *.com, *.net, *.org
  NOTE: NOT applicable to the CCA desktop client (used by agents). Links/URLs are non-clickable in CCA (e.g., when the site visitor sends a link/URL in his message to the agent).
- When the chat visitor has a chat conversation with the agent and then minimizes the chat app (the session is not closed), all new incoming messages from the agent appear as a preview above the minimized chat icon.

Styling Area

You can configure the chat window using two modes: Visual and CSS.

Visual Mode

This mode allows to configure the chat window easily, and you can immediately preview any changes you make.

Theme: Choose Light or Dark to make the window's background a light or dark color.
Main Color: Choose a theme from the seven preset colors, or enter the hexadecimal value of the color you prefer.
Widget Width: Choose how narrow or wide you want the window to be. The values range from 250 to 400 pixels.
Widget Height: Choose how short or tall you want the window to be. The values range from 500 to 700 pixels.
Rounded Corners: Choose how rounded you want the window's corners to be. The values range from 0 to 20 pixels.

CSS Mode

This mode allows to define a more customized configuration with the help of a web programmer. With this mode, you can:

Download a template (a .CSS file you can open with any text editing application), which you can then modify as needed, save, and upload; or
You can upload your own .CSS file.

Product Knowledgebase > Styling Tab (Webchat v2.0) > Styling Tab_Styling_CSS Mode.jpg

The customized file MUST be a .CSS file with UTF-8 encoding.

It might take a few minutes for the new style to take effect. If you do not see the new style immediately, wait 5-10 minutes before opening a chat session.