Customizing the appearance of the Web Widget

You can modify the appearance of some or all of the following widget elements to match the look and feel of your company’s website.

If you’re using a Legacy Chat version, see (Legacy Chat) Customizing the appearance of your widget.

The following elements can be modified via the Chat dashboard, under the Appearance tab:

• Chat Window, which includes the title bar text or mobile widget configurations, depending on your version of Chat.
• Concierge, what Chat visitors see before connected to an agent.
• Message Style (Team, Professional, and Enterprise plans only), display options for outgoing Chat messages.
• Chat Badge (Chat Standalone only), how the widget looks before a chat is started.

To customize the widget’s appearance

1. From the Chat dashboard, go to Settings > Widget and click the Appearance tab.
2. Customize the options as described in the sections below.
3. Preview your changes in the Preview pane on the right. The changes displayed in the Preview pane depends on which version of Chat you are using. Expected Preview pane behavior for each section in the Appearance tab is described in the sections below.
4. Click Save Changes.

Customizing the Chat Window section

The Chat Window section is where you configure elements related to the frame around a chat between an agent and a customer. The options you see here depend on which version of Chat you’re using.

Chat + Support in the Web Widget users

Here, you can customize the Top Title Chat Window element. This text appears on the top of your chat window. The following example shows the top title with the text “Chat with us”:

Standalone Chat in the Web Widget users

Here, you can customize the following Chat Window elements:

• Top Title: This text appears on the top of your chat window. The following example shows the top title with the text “Chat with us”:

  

• Theme Color: This is the color your widget is outlined in. Enter a hex code or click the swatch to manually select a color.
• Widget Position: Select whether the widget should appear on the bottom right or bottom left of pages you add it to.

Chat widget users

Here, you can customize the mobile widget:

• Overlay window: The chat window opens on top of your mobile site in the same tab (recommended).

• Chat Popout: The chat window opens in a new tab.

Customizing the Concierge section

Before visitors connect with a support agent, they see the avatar, name, and byline of the chat Concierge.

• Display Title and Byline: This text appears at the top of the chat window. The following example shows the Display Title “Live Support” and the byline “Ask us anything”.

  

• Avatar (Team, Professional, and Enterprise plans only): Upload a custom image of the avatar you want to appear for your chat Concierge.

Customizing the Message Style section

These options are available only on Team, Professional, and Enterprise plans.

• Message Style: With the Speech Bubbles option, bubbles appear around each chat sent. Simple Lines just shows the text.

• Show Avatars: Check this box to show agents’ and visitors’ avatars next to each chat they send.

Customizing the Chat Badge section (Chat standalone users)

The chat badge is how the widget looks before a chat is started.

• On or Off: Enable or disable the chat badge.

• Image Right, Image Left, or Text Only: These options determine how the layout of the chat badge looks. Image Right and Image Left use the default chat bubble image, which you can see in the Preview pane.

• Custom Image: To use your own image, select Custom Image and upload an image in the Image field below.

• Background Color: Enter a hex code or click the swatch to manually select a color for the chat badge background. To use the same color as the Theme Color from the Chat Window section, check the Same as Theme Color box.

• Message: This text appears inside the chat badge before your visitors click on it. The following example shows the badge with the text “Chat with us”:

  

• Image: If you selected Custom Image above, upload an image for your chat badge here.