Note:This article applies to accounts using the messaging Web Widget. If you're using Web Widget (Classic), seeConfiguring the components in Web Widget (Classic).
You can configure a number of appearance-related settings for the Web Widget from the Style tab of the Edit 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
- InAdmin Center, click
Channelsin the sidebar, then selectMessaging and social > Messaging. - Click the name of the channel you want to edit. The widget’s edit page opens.
- Click theStyletab 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. SelectBottom leftorBottom right, then enter the offset spacing from the bottom and side of the page. The default position is 16 px 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 aselected 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. ClickUpload image, then browse to the image you want to add.
- Title, text which appears at the top of the frame – usually 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 toggles on and off the Zendesk logo on a Web Widget or mobile channel. Available for Suite Enterprise accounts, and Professional accounts with the Productivity Pack add-on.
- 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.
- ClickSave 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. SeeWeb Widget APIfor more information.
To update the launcher
- InAdmin Center, clickChannelsin the sidebar, then selectMessaging and social > Messaging.
- Click the name of the channel you want to edit. The widget’s edit page opens.
- Click theStyletab.
- Update thePosition in browser window, where the launcher button appears in your browser window. Use the radio buttons to choose eitherBottom rightorBottom left.
- UpdateShape(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:SelectingCustom launcherremoves 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. SeeWeb Widget API.
- Text(optional), text that appears next to the launcher button
- Show on mobile, select to display the text in a mobile SDK.
- ClickSave settings.
30 Comments
How do we change the color of the chat text?
HiMichael,
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.
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.
Thank you! That's noted.
- Miranda.
HeyMiranda 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.
你有新闻分享的吗ddition 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?
Is there a way to hide the chat or not allow any messaged to be sent outside of business hours?
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?
Hola precisamos poder cambiar de color la letra del chatbot para que concuerde con mi marca.
HiOla 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.
Hi, are there anyway to change arrow direction under text of the widget launcher ?
HiPink,
我们收到了一大堆关于direc反馈tion 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.
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
"Update thePosition in browser window, where the launcher button appears in your browser window. Use the radio buttons to choose eitherBottom rightorBottom 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
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.
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?
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...
HiMichael 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!
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 readthis articleexplaining 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!
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 throughweb SDKorZendesk Sunshine Conversations.
Thank you!
ThanksJupete Manitas,
I see the web SDK is from Chat Web and is in maintenance mode. We currently have a Messaging Web Widget (we useMessaging 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 aboutcustomizingMessaging web widgets with sunshine conversations API?
Thanks!
Hi Diogo, natively the only customization/appearance changes that are available are the ones describedhere. 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 submitproduct feedbackfor this.
That is the API documentation I shared to start with for SunCo.
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?
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?
Hi Pedro,
End user sound notifications are now supported within the messaging Web Widget.
- Miranda.
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.
Hi Pedro,
>没有选项来启用它最终用户ide.
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.
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.
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:
Hi! I don't see the Custom Launcher option.
I need to hide it because I'm using a custom button.
Please help.
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 theGeneral Product Feedback topicin 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.
Pleasesign into leave a comment.