[COMPLETED] Web Widget Customization Options


105 コメント

  • Tom van Oorschot

    I would be interested in custom CSS. I'm running a widget with no text now, just the question mark and this is off set. I'd like to modify the padding of it so it's nicely aligned. All other questions I had were solved using the javascript API, thanks for that.

  • Buck

    We have used the ze.activate code to allow us to open the Web Widget form from a specific button on our Contact Us page (since our actual ContactUs form will no longer operate after the Feedback Tab support is removed).

    However, the form that opens on iPhone when called by the ze.activate button jumps out of view on the screen when the "name" field is tapped in to begin data entry. This does NOT happen in mobile when the regular web widget form is opened by clicking on the "?" that appears in mobile.

    We have submitted a ticket but I'm posting here too to see if anyone else using ze.activate is experiencing this problem in Mobile.

  • Daniel Lindén

    How do I hide the default "Help" button and implement a custom one?

  • Admin

    Question: Hi,

    I really want to sign up to zendesk and have the widget for our website - we have used Zopim Chat for a few years as a paid subscriber and would come over to ZenDesk fully.

    The problem is we need to be able to specify the position of the widget for mobile and desktop, just like you can do with Zopim, otherwise we can't use it as the widget conflcts with a mobile navigation element.

    With zopim i can do this:

    $zopim(function() {



    The zendesk functions are everything we need, but without this we simply can't move as it won't work - is there anything we can do to work together to fix this? I note it's possible for desktop.


  • Nathaniel James

    I'm not sure if this solves everyone's issues, but certainly in terms of button placement issues, the new web widget has a workaround in the developer documentation I haven't seen any admins here suggest. 

    So, in your header you add the auto-generated script for your site. 

    Then, under that, you just add:


            zE(function () {




    Which will hide the default button (which doesn't match the style of our site at all). 

    Then you add your own custom item like this one:

    <div class="zendeskButton" onclick="zE.activate();">



    The css class is in our style sheets which allows me to style it how I want. The only magic is that onclick function, which is what the default button calls when it is clicked. 
    So I'm not restyling the default button, I'm just replacing it with one of my own...

  • Karen Stephen


    I would be interested in hearing more about how you turn the search from the widget into a subject line for the ticket!


  • Carl Emmoth

    We cannot use the Widget until it's expanded by default. We would need a embedded form which the customer can use directly.

    Using the floating widget questionmark down left or right obstructs our layout and cannot be used.


  • Matthew Bachelder

    The ability to resize the widget is something we need. Our users are having a hard time seeing the widget when it appears on the page.

  • Erica Wass
    Zendesk Product Manager

    @matthew I'd recommend a custom launcher. You can make your own and use it to open the Web Widget.

  • Nate Legakis

    We would like to widget form to load in the center of the page.   What's the easiest way to do this?

    I came up with a hack that seems to work, but I'd love to have a cleaner solution.


       var rePositionIFrame = function() {

          jQuery("iframe#webWidget").css('margin', 'auto');
          jQuery("iframe#webWidget").css('top', '0');
          jQuery("iframe#webWidget").css('left', '0'); 


          window.setInterval(rePositionIFrame, 3000);


    Again, I'd rather not use a hacky solution like this, but is this my only option?

  • Tri Ardini

    Hi @Nathaniel James

    I face same problem with you, and I do what you write above. But I got a new problem, after I minimize the chat window, and I click the custom button again, the window not show.

    any suggestion?



  • Dan Cumings

    We have a multi-tenant site and we would like to customize the Support button accordingly.  Mostly we want to change away from rounded corners, change the color per client and change the size, padding,margins of the button.

  • Brett Bowser
    Zendesk Community Team

    Hey Dan,

    Have you had a chance to review our Advanced customization of the Web Widget documentation?

    The article will provide an overview of what customization options are available within the web-widget as well as provide useful links to our developer documentation.

    Hope this helps!

  • Kevin Andreychuk

    On chat mobile, how can we change it so the top bar minimizes the chat? Many people don't know that you have to select the "-" button in the top right corner.

  • Brett Bowser
    Zendesk Community Team

    Hi Kevin,

    There's not a callback function for just clicking on the topbar unfortunately which would be needed to call the hide API endpoint. You'd most likely need to use the Web SDK and build your own widget to register an event when the bar is clicked by the end-user.

    Let me know if you have any other questions :)



Powered by Zendesk