Quickstart – Web Widget JavaScript APIs

Have more questions? Submit a request

10 Comments

  • David Lance
    Comment actions Permalink

    This is particularly helpful. Thank you Darren. Particularly for specifying where to position the window.zESettings object and the API commands relative to the Zendesk Widget script. I think I was getting hung up by doing that wrong.

    0
  • Darren Chan
    Comment actions Permalink

    Hi David,

    Thanks for the feedback. I'm glad you found it helpful!

    0
  • Renan
    Comment actions Permalink

    Darren Chan how are you ?

    Im using the Zendesk Web Widget in an existing application, but always that the page fire an ajax request, the "help" widget disapear.
    Did you have this problem ? Which suggestion could you tell me to diagnostic and solve this error ?

    Thanks.

    0
  • Bryan - Community Manager
    Comment actions Permalink

    Hi Renan -- without having your code or a page that reproduces this, it's hard to say exactly what's happening. If you post a distilled/very-simplified example that shows the behavior, we could maybe figure it out.

    My guess is that your AJAX request has a side effect of reloading the page or manipulating its DOM in some way where the widget's snippet is somehow removed or affected.

    0
  • Khoa
    Comment actions Permalink

    Hi David,

    I just want to open my widget when I clicking on the button. However, my code does not work. Can you help me?

     

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <title>Hello, World!</title>
    </head>

    <body>
    <p>Hello, World!</p>
    <script type="text/javascript" id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=abc"> </script>
    <script type="text/javascript">
    window.zESettings = {
    webWidget: {
    helpCenter: {
    chatButton: {
    fr: 'Discutez avec une personne',
    '*': 'Chat with a person now'
    }
    }
    }
    };
    zE('webWidget', 'helpCenter:setSuggestions', { search: 'credit card' });
    zE('webWidget', 'setLocale', 'en');
    zE('webWidget', 'hide');
    function openHelpDesk() {
    zE('webWidget', 'open');

    }
    </script>

    <!-- Start of Zendesk Widget script -->
    <!-- End of Zendesk Widget script -->
    <button onclick="zE('webWidget', 'open')">Open Web Widget</button>
    </body>

    </html>

    0
  • Greg - Community Manager
    Comment actions Permalink

    Hi Khoa! If you are hiding the widget on page load, you will first need to show the widget and then you can open it. I haven't tried this with an onclick event, but I'm thinking that this should work:

    <button onclick="zE('webWidget', 'show');zE('webWidget', 'open')">Open Web Widget</button>

    Let me know if that works for you!

    1
  • Khoa
    Comment actions Permalink

    Thanks for your support, Greg! It works!
    One more question: Can we customize the label field in a contact support form?

    Exp: Email address, Your name..etc.

    Thanks.

    0
  • Alejandro Colon
    Comment actions Permalink

    Darren Chan

    Thank you for providing this. 

    -------------------------------------------------------------------

    I have taken the liberty of distilling this down and creating a tip in the Support Community called "What to add Web Widget Code?"

    https://support.zendesk.com/hc/en-us/community/posts/360046749634-Where-to-add-Web-Widget-Code-

    --------------------------------------------------------------------

    Also, if you are interested, I have some suggestions for making your post even better. Such as making things a little more clear and cleaning up some grammar. 

    Let me know if you are interested. 

    0
  • Luke Grannis
    Comment actions Permalink

    The company that we hire to test our site for accessibility concerns has flagged the Zendesk widget for a number of problems.  

    • The widget's title is using an h1 element.  Which means, when open, the page has 2 h1 elements.
    • After opening the widget, nothing within the widget receives focus, so it is very confusing for the visually impaired user.  Is there a recommended way of handling this?  I would think it would be the default behavior, ie the first interactive element in the zendesk widget getting focused.
    • Low contrast warning, related to drag and drop fields for attaching files.
    0
  • Miranda Burford
    Comment actions Permalink

    Hi Luke Grannis,

    Thanks for your message.  We appreciate you highlighting areas where we can make the Web Widget more accessible.  Just to let you know, we're planning to dedicate some time to Accessibility later in the year with a focus on alt text & form fields within the Web Widget.  Unfortunately, the three items you raised weren't on that list but I'll make a note of them on our side and we'll do our best to address them as soon as we can.  Unfortunately, I can't provide an exact timeframe but I'll record your details and reach out when there's news.

    Thanks for taking the time!

    - Miranda.

    0

Please sign in to leave a comment.

Powered by Zendesk