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.

Integrated Chat experience 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":

Chat-only 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 (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 (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 and 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 Badge section (Chat standalone users)

If you are on a Team, Professional, or Enterprise plan, 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":

26 Comments

For example, Currently app has, back icon and "Chat" text and cross icon.I want to have an avatar image of agent instead of back icon.And concierge - display title and byline text instead of "chat" text.etc.

How can I achieve the same using android sdk?Few suggested to override back_icon resource with profile icon. But I need to update the icon based on agent with whom the user is interacting.

Even i'm on pro plan and activated the chat widget outside the support product, i cant see neither Chat Badge not Chat Button sections under appearance tab . (Chat Window section only lists "mobile widget" title , no "Top Title or "Simple / Classic titles )

I guess I set up Chat by creating an account within Zendesk Support (not really sure though since Zendesk is so confusing). I'm not seeing all the really cool customization features of the chat widget.

Is there a way to get access to these?

Are you saying that I'm punished for having a Zendesk Support account and setting up Chat through it? Versus just using Chat by itself?

If people are having issues changing the window color. I was able to change the color of the chat window by going here: https://remotasks.zendesk.com/agent/admin/widget. It might take a couple of minutes to change, but it does work. eventually...

Can we change the design of the widget anymore than what is outlined in this help topic? Our challenge is that the widget covers up functionality in our site. Are there more controls for placement? For example, can we create our own icon/button and when someone pushes it the widget content appears? Or do we have to use your control?

The other challenge we have had is that your widget slows our site down quite a bit. Are there ways to make it "lighter" so our page load times are not slowed down so much?

If you are referencing the original Chat Widget, we have not been updating that as we have been working in moving standalone Chat accounts and their respective widgets over to the Support platform and our Web Widget.

We are currently in the final stages of this process and as such, you should be seeing an updated look reflected in your account.

If you have an integrate Chat service,(ie connected to a Support instance and not Phase 4), and have any other services enabled besides Chat, like Contact Form/Help Center/talk, then the integrated widget layout takes over and you will not have those settings available to adjust in the Chat Dashboard widget section.

However, if you disable all but the Chat service in your web widget, (temporarily), you will see the above described options become available. It may take a bit of time for the widget settings to update so if you don't see it right away, clear your cache and cookies, wait a few minutes, and then refresh.

In my comment above I asked about speed issues with your widget. Our dev team won't let me deploy it because it is too slow to load. Will using the API address this? Is this something you have heard from other customers? I would love feedback on that. Thanks!

In the middle of last year we adjusted the weight of the widget script to have a lighter load. If you haven't checked your script recently, I would recommend confirming that you are using the most current script.

Otherwise, there is no other native option to load the script. You can create your own load experience by using our web sdk, https://api.zopim.com/web-sdk/, if your IT needs a more custom load of the Chat service.

Wren,

If you are on a Phase 4 account, new recent chat only account, you will need to make sure that only Chat is enabled for the widget and you should see the setting show. If you do not, submit a ticket to support@zendesk.com along with some account specific info and a screenshot or two and our Agents can see what might be stopping these options for showing.

I checked in with the developer support team and they said that the widget is really just a chunk of JavaScript code, and that there's nothing that should keep it from being used in a React based web app.

In terms of customization, is there any way to change the size of the open chat window on the screen? Our marketing manager was hoping a chat conversation on our website could take up less real estate so clients can still view lots of details on a page while having a chat open.

Something like having the ability to change the pixel size of the open conversation would be great!

If you're using just the standalone Chat without Support you should be able to adjust the size of the widget to small using the API. If you're using Chat along with the Web Widget I'm afraid there's no way to adjust the widget size unfortunately :-/

Its not the best solution in the world since scale tends to cause a little blurring but its a solution and as far as I know the only solution. Also annoying because you cannot use px or other units of measure.

The reason this is the only solution is because you cannot style elements within an iframe (especially a cross domain iframe) but you can style the iframe. Because transform scale works on the iframe itself this solution works. Adjusting the height and the width of the iframe does not work because that has no impact on the height and width of the elements in the iframe when using Zendesk.

It looks like you also sent a ticket to our Customer Advocacy team regarding this issue. I've copied their response for you below:

I just checked this but it seems like we do not have the option to remove that in Chat settings. However, if you're on the Chat Enterprise plan, you can use WEB SDK to customize the chat widget the way you want.