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
Michael Lebow
How do we change the color of the chat text?
7
Miranda Burford
Hi Michael,
Unfortunately it isn't possible to change the font colour at the moment. I'll note this as a feature request on our side for future consideration. Out of interest, what colour were you hoping to change it to and why?
Thanks,
- Miranda.
-1
Michael Lebow
I was hoping to change the text font color to white. The black does not contrast well with my brand color in the header or in the chat bubbles. Thanks.
5
Miranda Burford
Thank you! That's noted.
- Miranda.
-2
Simon Blouner
Hey Miranda Burford
This is a must-have feature, as I'd imagine the black doesn't match with a lot of brand colors.
For us, it is looking bad as well.
Do you by any chance have news to share with the addition of changing the icon color and header text color in-widget?
I see that the Zendesk widget present on this very Help Center has a different icon and color - must be because the Zendesk team did something custom.
Can you share the solution on what they did, so the impatient customers can get a proper-looking widget as well?
7
Sherry D.
Is there a way to hide the chat or not allow any messaged to be sent outside of business hours?
2
Ola Timpson
We have the messaging web widget on both our help centre and website. Is there any way for us to have different colours in the different locations?
1
Natalia Maglioni
Hola precisamos poder cambiar de color la letra del chatbot para que concuerde con mi marca.
0
Miranda Burford
Hi Ola Timpson,
Thanks for your question! It isn't possible to have different Web Widget colours based on location today but it's great feedback. I'll note it down as a feature request for future reference.
- Miranda.
0
Duangkamon
Hi, are there anyway to change arrow direction under text of the widget launcher ?
0
Miranda Burford
Hi Duangkamon,
We've received a bunch of feedback about the direction of the arrow/tail (supporting both ways) so we actually have plans to remove it completely to prevent any further issues. This is in our backlog to address but unfortunately, I don't have an exact date that I can provide.
Hope this helps!
- Miranda.
0
Daniel Elizalde
Hi,
In Messaging, how do you clean up the conversation from a user in the chatbox, so when the user comes back will see the chatbox empty?
Or at least the user can see the conversations grouped, just like the chatbox on this help center?
Any ideas? Thanks
0
Hai Nguyen Duc
"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."
As here I don't see any configure to move icon higher and move left a bit. How can we do that?
Can we set id to the iframe tag for easier to style it like this website
1
Miranda Burford
Hi Hai Nguyen Duc,
Unfortunately, we don't have an offset API available within messaging (to match what we have within Web Widget (Classic)). This is something that we are considering in the future though so you will have full control over where the launcher & widget are positioned on the page.
Thanks for your suggestion!
- Miranda.
4
Angel Studios
Being able to have more control is a high priority for our widget. We have a footer banner that we have on at all times and we can't use the widget as it blocks our banner. When will this be an option?
0
Zigor Salvador
In addition to changing the text color for the header of the chat, we'd like to change the foreground color for the launcher icon. Having a black text/foreground is not suitable for our brand color. Being able to select black or white would be a major improvement...
0
Miranda Burford
Hi Michael Jenkins,
>Being able to have more control is a high priority for our widget. We have a footer banner that >we have on at all times and we can't use the widget as it blocks our banner. When will this be an >option?
Good news! We are very close to releasing an Admin setting for the messaging widget which will allow you to control the exact position of where the launcher & widget displays. We are hoping to release this to customers before the end of the year so please stay tuned.
Thanks!
2
Diogo Lessa Costa
Hi!
I'm curious about what's the recommended way of adding the close button to the Zendesk widget topbar, like you do. I'm talking about the "X" button aside the title (unfortunately I'm unable to attach a screenshot here).
I've read this article explaining how to build a custom launcher, but it's specific to the launcher. The options in admin center also doesn't help on that.
Is there a proper way to inject that custom HTML? If so, does it require some additional resource to be acquired?
Thanks!
0
Jupete Manitas
If you are looking to have a similar X button in the Messaging widget and not use the arrow down button. Currently, that part is not yet supported within our native settings and APIs. However, what we can recommend as a workaround if you want to make a different Messaging widget experience is by creating your own widget through web SDK or Zendesk Sunshine Conversations.
Thank you!
1
Diogo Lessa Costa
Thanks Jupete Manitas,
I see the web SDK is from Chat Web and is in maintenance mode. We currently have a Messaging Web Widget (we use Messaging SDK), so I believe it won't help - Or is the web SDK able to work with Messaging Web Widget? Does sunshine conversation suits well for this case? Is there any guide/documentation you can share about customizing Messaging web widgets with sunshine conversations API?
Thanks!
0
Jupete Manitas
Hi Diogo, natively the only customization/appearance changes that are available are the ones described here. Since your goal is not supported yet, the workaround that we can recommend is to create or build a new custom widget according to your needs, you can still build through the legacy Web SDK or the new Sunshine Conversations API for Messaging. Otherwise, you can submit product feedback for this.
That is the API documentation I shared to start with for SunCo.
0
CR
Hi we are trying to modify the chat bubble icon to a pill shaped one as used in one of your demo videos for web widgets and also on sites like faithfullthebrand.com. Can you advise if we have to be on a particular plan to have it?
1
Pedro Reis
when contacting zendesk support, there is no sound notification when an agent replies, or any way to activate it. Am I the only one who finds this odd?
0
Miranda Burford
Hi Pedro,
End user sound notifications are now supported within the messaging Web Widget.
- Miranda.
0
Pedro Reis
Hi Miranda,
I don't think you understood the question.
If it is now supported, why don't you enable it on your own support messaging window? There is no option to enable it on the end user side.
0
Miranda Burford
Hi Pedro,
>There is no option to enable it on the end user side.
Admins have the power to decide whether to enable end user sound notifications. Then, end users have the option to be able to turn those off and on. End user toggle is included below.
0
Pedro Reis
Hi Miranda,
I don't think you understood the question. I am talking about Zendesk Support Messaging Window (Zendesk account Admin center) - your own support widget, NOT your user's accounts widgets. So the widget I use to contact YOUR support. There is no way to enable sound. So I assume Zendesk has not activated it on his end, Are there plans to do it? Asking this because every time one of your agents replies, there is no sound alert, which is quite annoying.
1
Shaun Luong
My logo is not being rendered properly in the Messaging web widget. I have tried 3 different sizes of the logo, 1200x290px, 207x50px, and 50x12px:
But all 3 sizes render like this:
1
Juan Manuel Antonellini
Hi! I don't see the Custom Launcher option.
![](/hc/user_images/bPlEuvwBxFAaUf1JqDU-yQ.png)
I need to hide it because I'm using a custom button.
Please help.
0
Julio H
Unfortunately, this is not possible currently with the Messaging Web Widget. The widget you are referencing to, it is the old version called Web Widget Classic and does not work with Messaging.
Currently, the style options for the web widget Messaging are here:
You can create a custom launcher as per: Configuring the widget frame
Quick start - Creating a custom launcher for the messaging Web Widget
I've marked this conversation as product feedback for review, which means that your input will be aggregated as a part of our Voice of the Customer program that provides customer feedback to our product development teams.
In addition, I encourage you to create a new post in the General Product Feedback topic in our community to engage with other users who have similar needs and discuss possible workarounds. Conversations 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 helpful for our product teams to understand the full scope of the need when working on solutions. You may also want to review the Product feedback guidelines and how to write an effective feedback post [https://support.zendesk.com/hc/en-us/articles/4413820079386-Giving-Product-Feedback-at-Zendesk-].
We truly value customer feedback and your voice and votes in the forums help influence future Zendesk functionality.
0