Recent searches


No recent searches

Configuring the name and appearance of the Web Widget



image avatar

Aimee Spanier

Zendesk Documentation Team

Edited Jun 21, 2024


0

54

54 comments

Is there a way to change the font on the web widget for Zendesk Messaging?

0


image avatar

Gabriel Manlapig

Zendesk Customer Care

Hi Kaila,
 
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


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


Being able to change the header text color is something my team needs as well.

0


image avatar

Paolo

Zendesk Engineering

Hi Justin,
 
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


What is this checkbox (Show on Mobile) for?

 

 

0


image avatar

Hiedi Kysther

Zendesk Customer Care

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


Hi, Hiedi Kysther 
and what will show on Mobile?

is it the text "Hi, Need any help?" or what?

 

Thanks

0


image avatar

Hiedi Kysther

Zendesk Customer Care

Hi @...

It will apply all settings set in the Messaging - Style section in Mobile SDK. 

0


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


image avatar

Christine Diego

Zendesk Customer Care

Hi Kiichi,
 
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


How do we change the orientation of articles in the widget?  It is odd that they display horizontally in such a narrow window. 

0


image avatar

Tony

Zendesk Customer Care

Hi Liam,
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


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


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


image avatar

Destiny

Zendesk Customer Care

Hi Şule Bayraktar,
 
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


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


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


Hi Patanwala,
 
Thank you for your questions. Kindly see the details below:

  1. Currently, it is not possible to keep the focus on the launcher button.
  2. Could you suggest an alternative that you think would be more appropriate?
  3. At this time, the placeholder text cannot be changed.
    What you aim to achieve is not currently possible, but we are interested in exploring this possibility in future product development.
     

0


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


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


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


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


Please sign in to leave a comment.