You can configure a number of appearance-related settings for the Web Widget from the Style tab of the Web Widget page.
This article includes the following topics:
Configuring the widget frame
The Web Widget frame includes the structural elements of the window through which customers conduct messaging conversations with agents. You can define where on the page the frame is located, select colors for text and frame elements, upload a logo, and more.
To update the widget frame
- In Admin Center, click
Channels in the sidebar, then select Messaging and social > Messaging.
- Click the name of the channel you want to edit. The widget’s edit page opens.
- Click the Style tab and configure the following settings:
- Primary color , the main color of the launcher button and widget header. Enter a hexadecimal number, or click the color swatch to open a color picker. If you're migrating from Web Widget (Classic), the color defaults to that brand's widget settings.
- Position, the location of the widget and launcher on your website or help center. Select Bottom left or Bottom right, then enter the offset spacing from the bottom and side of the page. The default position is 16px from the selected option.
- Border, the border radius, or curve, of the outer edges of the widget. Use the slider to select a radius from Straight corners (0 px) to Curved corners (20 px).
- Message color, the color of the bubble around customer messages. Enter a hexadecimal number, or click the color swatch to open a color picker.
- Action color, the color of any buttons or customer actions (such as a selected option). Enter a hexadecimal number, or click the color swatch to open a color picker.
- Attachment permission for customers. Select the checkbox to allow customers to add attachments to messaging conversations. Deselect to prevent customers from adding attachments. Attachments are allowed by default.
- Logo (optional), a JPG or PNG to appear at the top of the frame. The logo is the visual identity of the conversation flow. Click Upload image, then browse to the image you want to add.
- Title, the name that appears at the top of the frame. This might be a call to action ("Contact us") or your business name.
- Description (optional), a short piece of text under the title. This can be information you want to share, or a tagline, for example. Enter the description in the text box.
- Show Zendesk logo, which switches on and off the Zendesk logo on a web widget or mobile channel. Available for Suite Enterprise accounts.
- Sound notifications (Web Widget only), which activates audio alerts for your customers when they receive a response from an agent or bot in an inactive Web Widget messaging conversation. When activated, customers can choose to disable sound notifications on their end of the conversation.
- Click Save settings.
Configuring the widget launcher
The Web Widget launcher is the button the customer clicks to open the widget. You can define where it appears on the web or help center page, its shape, text, and more.
You can also use the Web Widget API to create a custom Web Widget launcher and define how it behaves. See Web Widget API for more information.
To update the launcher
- In Admin Center, click
Channels in the sidebar, then select Messaging and social > Messaging.
- Click the name of the channel you want to edit. The widget’s edit page opens.
- Click the Style tab.
- Update the Position in browser window, where the launcher button appears in your browser window. Use the radio buttons to choose either Bottom right or Bottom left.
- Update Shape (Web Widget only), the shape of the launcher button.
Choose one of the following:
- Square: Use the slider to adjust the curve of the outer edges of the square launcher button.
- Circle
-
Custom launcher Note: Selecting Custom launcher removes the launcher from your website or help center. You can then add the launcher to your web or help center pages using the open, close, and unread messages APIs. See Web Widget API.
- Text (optional), text that appears next to the launcher button
- Show on mobile, select to display the text in a mobile SDK.
- Click Save settings.
54 comments
Kaila Holt
Is there a way to change the font on the web widget for Zendesk Messaging?
0
Gabriel Manlapig
We do not currently support changing the font in the Chat Widget or Messaging Widget. I've taken a look and found that other users are discussing similar needs here:
Set a font in the widget
You can up-vote that original post and add your detailed use-case to the conversation. Threads with a high level of engagement ultimately get flagged for product managers to review when they go through roadmap planning. Thank you!
0
Hunter Hramika
It was reported over 16 months ago that there would be a way to change the header text color. Any update on this lol? My website's main color is Orange so the orange + black makes it look like I am running a Halloween store.
2
Justin Hunt
Being able to change the header text color is something my team needs as well.
0
Paolo
Thanks for the Feedback!
I've taken a look and found that other users are discussing similar needs here: Customizing web widget text color in the header when using messaging
You can up-vote that original post and add your detailed use case to the conversation. Threads with a high level of engagement ultimately get flagged for product managers to review when they go through roadmap planning. Specific examples, details about impact, and how you currently handle things are the most helpful things to share to help our product teams understand the full scope of the need when working on solutions.
We truly value customer feedback and your voice and votes in the product feedback topics in the community help influence future Zendesk functionality.
Best,
Paolo | Technical Support Engineer | Zendesk
0
Permanently deleted user
What is this checkbox (Show on Mobile) for?
0
Hiedi Kysther
Hi @...,
That setting is for Mobile SDK. If you have Mobile SDK and that option isn't enabled then that setting will not show in your app.
0
Permanently deleted user
Hi, Hiedi Kysther
and what will show on Mobile?
is it the text "Hi, Need any help?" or what?
Thanks
0
Hiedi Kysther
Hi @...

It will apply all settings set in the Messaging - Style section in Mobile SDK.
0
Permanently deleted user
Hi Hiedi Kysther
Ahh I got it, Thank you!
0
貴一 徳永
Hello. Is it possible to change the size of the Zendesk widget? It doesn't matter if it's the old version or the new one.
0
Christine Diego
If you have the Web Widget (Classic) or current Chat widget, at this time it is not possible to customize the shape or size of the Web Widget (Classic). If you have the Legacy Chat widget You can change the size between small, medium and large from the Chat dashboard. You can check this article for details How do I change the shape and size of the Zendesk widget?
0
Liam Kelly
How do we change the orientation of articles in the widget? It is odd that they display horizontally in such a narrow window.
0
Tony
I'm not too sure that's possible at the moment. You might want to create a post as feedback, so our team can check that out!
Best,
0
Chris Evans
Hi all,
I'm unable to add any customisation to my widget. I've followed all of the suggested methods from https://developer.zendesk.com/api-reference/widget/api/, and also tried accessing the zIndex property from window.zE. I always put the window.zESettings script directly before the main snippet.js script, but no colours ever change.
To demonstrate the issue, I've created a code sandbox: https://codesandbox.io/p/sandbox/admiring-colden-44k5kk
I've tried two approaches: 1. setting the scripts directly in index.html (currently commented out), 2. Creating a widget component in React. Both approaches set the widget, but neither can change the colours of the widget. I have removed our account key, so you will need to swap in a working key to see the widget.
I have a couple of questions regarding this:
1. Is there an example anywhere of a working web widget with JS customisation? So I can view the code. I'm aware of the one in your quick start guide, but that is exactly what I tried -- the settings script before the main script. Tried in both html and javascript.
2a. Is there a way to know if I'm using the classic web widget or not? It seems as though you have a classic version and a newer version, if I'm understanding correctly.
2b. Should the newer web widget be customised in a different way, or should it also be customised via a script that sets window.zESettings?
3. Any other tips / things I can check would be useful to know.
0
Şule Bayraktar
Hello, I have a few questions:
Can we change the color of message types (images, carousel, etc.)? Can we modify the red color in the Failed version to match our brand's palette?
Can we change the font type and font size?
Can we change the badge color in the Launcher?
Can we change the action button radius?
Can we assign radius values to message bubbles?
Can we change the color line under the images?

0
Destiny
I appreciate you bringing this up. Unfortunately, the customization options that you've listed are not currently supported by our classic web widget, either natively or via API integrations. While we do have plans to enhance customization features, these enhancements are slated only for the Messaging Web Widget. That said, compiling a wishlist such as yours is very valuable as it serves as a helpful reference for our future development efforts.
0
Hussain Patanwala
Is it Possible to make changes below listed to the messaging.
1. When we click “X” using Keyboard for removing the text Appearing next to the launcher. It should focus the Launcher button and upon pressing enter activate the Launcher. Currently when browsing through keyboard the X focus text can be removed using Enter however it loses the focus to the next item i.e. Launcher. The user will have to use Tab several times again to bring focus to Launcher and it is losing the CX from accessibility perspective.
2. Screen Reader read the launcher as “Open Messaging window button”. Is it possible to change this or customise this.
3. Is it possible to customise the text “ Type a message” in the Launcher text box.
0
Naresh Ugaonkar
How do you change the image shown when the bot is not clicked? there's no option visible anywhere to change that. I can change the image inside the chat but not the outside widget.
0
Ariane Frances dela Cruz
Hi Patanwala,
Thank you for your questions. Kindly see the details below:
What you aim to achieve is not currently possible, but we are interested in exploring this possibility in future product development.
0
Ariane Frances dela Cruz
Hi Naresh,
Are you referring to changing the launcher icon? You can modify the elements in the launcher as mentioned in this article Configuring the name and appearance of the Web Widget but if you wish to customize it in any way you want to, you can use a custom launcher Quick start - Creating a custom launcher for the messaging Web Widget.
0
Aldrin B.
Hi, is there a way to disable / not display the default question mark icon in the launcher? I just want to display the text only.
0
Ibrahim Khan
Hi,
I am looking to customize the widget icons, specifically adjusting their size from 64px to 48px. I attempted to override the size using CSS by modifying the iframe dimensions via the ID selector. However, directly altering elements within the iframe can't be done directly through CSS due to security limitations.
Additionally, I would like to know how to change the icons used for the widget. Is there an option within the admin settings to adjust both the widget size and the chat icons? Any guidance on this would be greatly appreciated.
0
Tariq
Hi team ,
We have set the styling of our messenger widget, which is presented perfectly on our site. However, when we allow for translations based on the end user's browser settings then our widget appears buggy when it is translated.
Based on the article “If the conversation bot is embedded in your website, the bot text is translated into the customer's selected browser language.” (https://support.zendesk.com/hc/en-us/articles/4408842754202-Managing-languages-in-a-conversation-bot). This is true, but then our styling completely disappears.
How can we use translations but maintain the styling?
See below image of our styling, then the appearance on the front-end when it is a language different to our default.
0