(Legacy Chat) Customizing the appearance of your widget

What's my plan?

The following elements can be modified via the Chat dashboard, under the Appearance tab. Click the links to view details for modifying each element:

Chat Window, which includes the title bar text or mobile widget configurations, depending on your version of Chat. Legacy Zendesk Chat standalone users can also configure other elements of the main Chat widget here.
Concierge, what Chat visitors see before connected to an agent.
Message Style, display options for outgoing Chat messages.
Chat Badge or Chat Bubble (Legacy Zendesk Chat standalone only).
Minimized Chat Button (Legacy Zendesk Chat standalone only).

Note: If your Phase 1 Legacy Chat account has been integrated with Support, you'll have to disconnect it from the Web Widget (Classic) in Support to see the Chat Window and Chat badge options on Zendesk Chat. In Zendesk Support, go to Admin > Channels > Web Widget (Classic) .

To customize the widget's appearance

From the Chat dashboard, go to Settings > Widget and click the Appearance tab.
Customize the options as described in the sections below.
Preview your changes in the Preview pane on the right.
Note: 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.
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.

Legacy Zendesk Chat
Legacy Zendesk Chat + Support

Legacy Zendesk Chat (standalone)

Here, you can customize the following Chat Window elements:

Simple or Classic: With the Simple option, agent and visitor avatars appear. If you select Classic, only the text appears and you can further customize in the Chat Bubble section that appears below.
Top Title: This text appears on the top of your chat window. The following example shows the top title with the text "chat support."

Theme Color: This is the color your widget is outlined in. Enter a hex code or click the swatch to manually select a color.
Window Size: Select from Small, Medium, or Large. To see the size of the options, use the Preview pane on the right.
Widget Position: Select whether the widget should appear on the bottom right or bottom left of pages you add it to.
Mobile Widget:
- Overlay window: The chat window opens on top of your website in the same tab (recommended).
- Chat Popout: The chat window opens in a new tab.

Legacy Zendesk Chat + Support

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 (all Chat versions)

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: Upload a custom image of the avatar you want to appear for your chat Concierge.

Customizing the Message Style section

These options do not appear if you selected Simple in the Chat Window section.

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 Bubble section (Legacy Chat standalone only)

The chat bubble appears over the Chat window:

On or Off: Enable or disable the chat bubble.
Background Color: Select a color or enter a hex code for the background of the chat bubble.
Title: This text appears as the title of the chat bubble. In the example above, the title is "Questions?"
Text: This text appears in the chat bubble body. In the example above, the title is "Click here to chat with us."

Customizing the Chat Badge section

This section appears if you select Simple in the Chat Window section above. 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.

Customizing the Minimized Chat Button section (Legacy Chat standalone only)

The options in this section determine the appearance of the Chat button when it is minimized.

Online Message: This text appears when a visitor is chatting with an agent but has minimized the window. The following example shows the how the button looks with the text "Chat with us."
Offline Message: This text appears when all agents are offline. The following example shows the how the offline button looks with the text "Leave a message."