
You can modify some or all of the following widget elements to match the look and feel of your company's website.
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.
- Concierge, what Chat visitors see before connected to an agent.
- Chat Badge, how the widget looks before a chat is started.
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.
Chat + Support in the Web Widget (Classic) 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 widget users
Here, you can customize the following Chat Window elements:
- Top Title: This text appears on the top of your chat window.
- 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: This allows you to place the widget in the bottom-left or bottom-right of your webpage.
You can also 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 tagline of the chat Concierge.
-
Display name and Tagline: This text appears at the top of the
chat window. The following example shows the default settings for the Display name "Live
Support" and the tagline "Ask us anything".
- Avatar: Upload a custom image of the avatar you want to appear for your chat Concierge.
Customizing the Chat Badge section
- 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.
20 comments
Radu Conopan
After the Trial expires, the chat badge automatically turns ON and you don't have the possibility to turn it OFF. I didn't realize that until I've accessed the website on desktop.
Not cool. I had to remove the widget.
-1
Fredrik Olsson
The Chat badge in the zendesk chat --> Manage widget--> appereance option needs to be set to off too have the "chat badge" minimized.
Not very selfexplaining and or explained by Zendesk FAQ that the Chat still is active on the page while the chat badge is off
0
René Boettger
Hello Frederik, Thanks for pointing it out. Basically, the 'Chat badge' is just a cosmetic feature of our Chat widget. When the 'Chat badge' is turned off, it does not mean that the 'Chat Widget' itself has been deactivated. So instead of the larger 'Chat badge', you will just see the smaller 'Chat button'.
-1
Maky
Hi!
Where can I found some information/documentation for Web Widget Chat with multibrand istanze? (No Zopim)
I have a Zendesk Suite account with Web Widget chat and dashboard chat on istanze.
We need to use different widgets that the dashboard default widget has. Each widget is created on xxxxxxx.zendesk.com/agent/admin/widget link with this configuration:
Using API I need to configurate the badge and this isn't open:
<script type="text/javascript">
window.zESettings = {
webWidget: {
launcher: {
chatLabel: {'*': 'Customer Care'},
badge: {
label: {'*': 'Chat with us'},
image: 'https://www.example.com/images/img.jpg',
layout: 'image_right',
},
},
chat: {
departments: {
enabled: [],
select: 'Brand test'
},
title: {
'*': 'Chat Test',
},
},
}
};
</script>
Everything works except the badge.
Any advice?
Thanks.
Maria
1
arrvind
Hi
I'm looking to change the Pencil icon that appears in chat widget,
How can i do that?
Please refer the image below, this is the one i want to change
Thanks in Advance,
Arrvind
0
Francis Casino
0
Jon Emmett
Is there anyway customize the chat widget on the fly? We may use this for multiple clients and would need to brand based on that client. Can I just send a json file with configuration, if so where can I find that information?
0
Francis Casino
I'm afraid that the changes you want to do is already out of our support scope since that is a custom coding.
0
Maya
How can I get the chat widget to look like Zendesk's chat widget?
0
Brett Bowser
I'd recommend taking a look at this article: Advanced customization of Web Widget (Classic)
I don't have the exact code we use so you'll want to get a developer to help get this set up.
I hope this points you in the right direction!
0
Henry Eagar
Legacy, Classic.
and ? current
All the docs are all for old versions? and the help is as confusing as your undefined Names.
0
Christine
To identify the Chat version that you're using, see Determining your Zendesk Chat account version.
0
Henry Eagar
And which "Chat Phase" is "Web Widget (Classic)"?
Which instructions relate to Zendesk Chat Phase 4?
-1
Christine
0
Duangkamon
Can I set translations for Chat Concierge (Display title and byline)?

I've tried dynamic contents but it doesn't work. And I can't find developer doc about this section..
0
Dainne Kiara Lucena-Laxamana
Hi Duangkamon
It can be done via API.
Let me know if you have any follow-up questions
0
Fares T
@... Regarding the configuration options available at subdomain.zendesk.com/chat/agent#widget/appearance# , we used to be able to configure it as shown in "chat widget users" but now we can only configure as shown in "Chat + Support". Is this just a glitch? Is there a way to have access to the full scope of configuration without needing to use the script stuff?
Also, what does the "Concierge" part control? I'm unable to see any difference in the actual widget (so not the preview) no matter what I do.
0
Salim Cheurfi
The concierge section covers the display settings of the avatar before the visitor requests a chat (for example, if chatting with the bot).
If you have any setting missing, it might be because of the configuration that you have between Support and chat, I will recommend going through this documentation Missing Chat widget settings
I hope this helps,
Best regards
0
Nikki
For me, and several others I've checked with, our help bubble/widget appears instantly or within a few seconds. But for one of my coworkers, it doesn't appear until she hovers over the corner. She & I are both using macs & both on Chrome. Do you know what could be the cause?
0
Brett Bowser
I would recommend having your colleague reach out to our Customer Care team regarding this issue so they can dig into this further. More information on how to contact them here: Contacting Zendesk Customer Support
I hope this helps!
-1