Customizing the appearance of your widget

Return to top
Have more questions? Submit a request

38 Comments

  • Jacob Bockelmann

    Are there any plans to modernize the design of the chat widget? It looks like it hasn't been updated since 2014. Compared to Intercom, Drift, etc., it looks super dated. Thanks!

    6
  • NIkhil Shimpi

    Hi I understand this customization to chat widget for website.

    How can I obtain the same ui on android app?

    For example, Currently app has, back icon and "Chat" text and cross icon.
    I want to have an avatar image of agent instead of back icon.
    And concierge - display title and byline text instead of "chat" text.
    etc.

     

    How can I achieve the same using android sdk?
    Few suggested to override back_icon resource with profile icon. But I need to update the icon based on agent with whom the user is interacting.

    Please help.

    5
  • OZGUR AGIRMAN

    hi,

    Even i'm on pro plan and activated the chat widget outside the support product, i cant see neither Chat Badge not Chat Button sections under appearance tab . (Chat Window section only lists "mobile widget" title , no "Top Title or "Simple / Classic  titles )

    thanks,

    4
  • Jason Good

    Can we change the design of the widget anymore than what is outlined in this help topic?  Our challenge is that the widget covers up functionality in our site.  Are there more controls for placement?  For example, can we create our own icon/button and when someone pushes it the widget content appears?  Or do we have to use your control?  

    The other challenge we have had is that your widget slows our site down quite a bit.  Are there ways to make it "lighter" so our page load times are not slowed down so much?

    Jason

    2
  • Daniel Lewis

    You can resize the widget (even when using Chat along with the Web Widget) using new CSS transform scale:

    iframe#launcher {
    transform: scale(2) !important; /* double the size of the launcher */
    }

    iframe#webWidget {
      transform: scale(0.5) !important; /* half the size of the web widget */
    }

    Its not the best solution in the world since scale tends to cause a little blurring but its a solution and as far as I know the only solution. Also annoying because you cannot use px or other units of measure.

    The reason this is the only solution is because you cannot style elements within an iframe (especially a cross domain iframe) but you can style the iframe. Because transform scale works on the iframe itself this solution works. Adjusting the height and the width of the iframe does not work because that has no impact on the height and width of the elements in the iframe when using Zendesk.

     

    2
  • Jason Good

    Patrick,

    In my comment above I asked about speed issues with your widget.  Our dev team won't let me deploy it because it is too slow to load.  Will using the API address this?  Is this something you have heard from other customers?  I would love feedback on that.  Thanks!

     

    Jason

    1
  • Jason Holloway

    Hi gang, I need to get the integration code/script to use the widget in React. Where do I get that? Thanks.

    1
  • Achmad Syarif Hidayatullah

    How can i customize px (height and width) web widget Zendesk Chat?

    1
  • Ross Newton

    I guess I set up Chat by creating an account within Zendesk Support (not really sure though since Zendesk is so confusing). I'm not seeing all the really cool customization features of the chat widget.

    Is there a way to get access to these?

    Are you saying that I'm punished for having a Zendesk Support account and setting up Chat through it? Versus just using Chat by itself?

    0
  • 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
  • Patrick Bosmans
    Zendesk Customer Advocate

    Jason,

    In the middle of last year we adjusted the weight of the widget script to have a lighter load.  If you haven't checked your script recently, I would recommend confirming that you are using the most current script.

    Otherwise, there is no other native option to load the script.  You can create your own load experience by using our web sdk, https://api.zopim.com/web-sdk/, if your IT needs a more custom load of the Chat service.

     

    Wren,

    If you are on a Phase 4 account, new recent chat only account, you will need to make sure that only Chat is enabled for the widget and you should see the setting show.  If you do not, submit a ticket to support@zendesk.com along with some account specific info and a screenshot or two and our Agents can see what might be stopping these options for showing.

    0
  • Rinku Kumari

    Great Article thanks i have one question

    How can i hide Chat Popout: The chat window opens in a new tab while launching from java script 

    0
  • Wren Tidwell (Lakehouse)

    New account as of today. Paid for TEAM account. I do not see options to update the chat bubble.

    0
  • Victoria

    Is there a way to automatically minimize the chat window upon loading the page?

    0
  • Kay
    Community Moderator

    Aha, have you tried to disable the Chat badge in Zendesk Chat under Settings > Appearance

    0
  • Patrick Bosmans
    Zendesk Customer Advocate

    Jason,

    If you are referencing the Legacy Widget, then you can find more options here, https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html.

    If you are looking for options in building your own look and buttons, this is the docs sets that you would want to look at, https://api.zopim.com/web-sdk/

    0
  • Kay
    Community Moderator

    @Carman can you share how it looks now?

    0
  • Patrick Bosmans
    Zendesk Customer Advocate

    Jacob,

    If you are referencing the original Chat Widget, we have not been updating that as we have been working in moving standalone Chat accounts and their respective widgets over to the Support platform and our Web Widget.

    We are currently in the final stages of this process and as such, you should be seeing an updated look reflected in your account.

    For more information on the Web widget and customization options, you can refer to this article, https://support.zendesk.com/hc/en-us/articles/229167008-Advanced-customization-of-your-Web-Widget.

    0
  • Carman Okon

    We are using the web widget and we want it to have it start out minimized state like  this image. 

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Rinku,

    It looks like you also sent a ticket to our Customer Advocacy team regarding this issue. I've copied their response for you below:

    I just checked this but it seems like we do not have the option to remove that in Chat settings. However, if you're on the Chat Enterprise plan, you can use WEB SDK to customize the chat widget the way you want.

    https://api.zopim.com/web-sdk/ 

    You'll want to pass the above link along to your developers to see if this is something they can assist with.

    Hope this helps!

    0
  • Kay
    Community Moderator

    Hi Carman,

    Are you using the Web Widget, or just the Chat Widget?
    With minimized, do you mean closed, or completely hidden?

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Jason,

    If you're using just the standalone Chat without Support you should be able to adjust the size of the widget to small using the API. If you're using Chat along with the Web Widget I'm afraid there's no way to adjust the widget size unfortunately :-/

    Let me know if you have any other questions!

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Achmad,

    Have you had a chance to look into the pre-chat form to help capture customer information before they send their first message? More information here: Enabling the pre-chat form on the Chat widget

    Let me know if you have additional questions for me :)

    0
  • Jason Harding

    In terms of customization, is there any way to change the size of the open chat window on the screen? Our marketing manager was hoping a chat conversation on our website could take up less real estate so clients can still view lots of details on a page while having a chat open.

    Something like having the ability to change the pixel size of the open conversation would be great!

    0
  • Achmad Syarif Hidayatullah

    Please help me..
    How can i add some lable and textfield before customer send the first message?

    0
  • René
    Zendesk Customer Advocate

    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'.

     

     

    0
  • Same as OZGUR AGIRMAN

    High Paid Plan and cannot see those features:

    • Top Title - to change default translated "Support" text

    • And more apparently

    here's a quick view:


    Anyone know what has changed?

    0
  • Nicole S.
    Zendesk Community Team

    HI Johan Skibdahl

    You can provide multi-language support for Chat via the Dynamic Content app. Here's the information on that: 

    Providing multiple language chat support with the Dynamic Content app

    0
  • Carman Okon

    How do I have set up the chat badge to start minimized? I am using the web script and want to start the chat badge minimized.

    0
  • Patrick Bosmans
    Zendesk Customer Advocate

    Cengiz,

    If you have an integrate Chat service,(ie connected to a Support instance and not Phase 4), and have any other services enabled besides Chat, like Contact Form/Help Center/talk, then the integrated widget layout takes over and you will not have those settings available to adjust in the Chat Dashboard widget section.

    However, if you disable all but the Chat service in your web widget, (temporarily), you will see the above described options become available.  It may take a bit of time for the widget settings to update so if you don't see it right away, clear your cache and cookies, wait a few minutes, and then refresh.

    0

Please sign in to leave a comment.

Powered by Zendesk