The Web Widget can be added to any page of your website, or to your Zendesk Support Help Center.
The Web Widget is fully optimized for the mobile experience and does not affect page load times. The widget is presented in the end user’s language, according to the language setting for end user’s web browser. You can force the widget to always appear in a specific language (see Displaying your widget in a different language).
This article contains the following topics:
Related articles:
You cannot use SSO authentication in the Web Widget itself. However, you can restrict access by setting up SSO on your Help Center, or on the website hosting the widget. See Single sign-on options in Zendesk and Using restricted Help Center content with the Web Widget.
Adding the widget to your website
You can add the Web Widget to any page of your website. After you add the code, you manage changes in Zendesk Support and with the Advanced Customization JavaScript APIs, and updates are reflected in the widget wherever it appears.
To add the Web Widget to your website
- Click the Admin icon (
) in the sidebar, then select Channels > Widget. - Click the Setup tab, if it is not already selected.
- Under the code box, click Copy to clipboard.
- If you want to add the widget to your website, go to the web page where you want to add the widget, then paste the code before the closing HTML
</HEAD>tag.Inserting the widget code before the
</HEAD>tag ensures that the Web Widget API is ready for use by JavaScript in your HTML page. See Web Widget API in the developer docs. If you prefer, you can paste the code before the closing HTML</BODY>tag. In that case, make sure any API method calls occur after the widget code.You need to add the code to every web page where you want the widget to appear.
If you haven't already, make sure you configure the components in your widget.
Adding the widget to your Help Center
Adding the Web Widget to your Help Center also allows you to monitor usage initiated from the widget. For more information on using Insights to track Web Widget usage, see the following articles:
To add the Web Widget to your Help Center
- Click the Admin icon () in the sidebar, then select Channels > Widget.
- Click the Setup tab, if it is not already selected.
- Click the Add to Help Center toggle.
This adds the Web Widget to your Help Center document_head.hbs code, and displays the widget on every page of your Help Center:
If you're on a Team, Professional, or Enterprise Support plan, you can restrict the pages where the Web Widget appears in your Help Center by using the zE.hide() method of the Web Widget API. See Advanced Customization of your Web Widget and the Web Widget API documentation for more information.
26 Comments
Hey!
the code to cut and paste "To add the Web Widget to your website" is not available. I would appreciate if you can send me a line to download for testing on my website.
Thanks
Hi, Matthew. If you go to Admin > Channels > Widget > Setup, do you see the code, along with the "Copy to clipboard" button?
Can I add the widget before I activate my Help Desk?
Hi Emily,
You sure can add the widget to your Guide platform prior to activating it. It just won't be visible to the public until you've activated Guide. :)
If you go to Admin > Channels > Widget > Setup there is a little toggle button which will automatically add the widget to your Guide platform for you. Alternatively you can do it manually by copying the code and pasting it into the Guide site code from your Guide admin area.
Hope this helps. :)
Hi Amie,
When I follow those steps and go to "set-up" I don't see the toggle.
Hi Emily! Welcome to the Community!
When you click on the Set-up tab in your Widget settings, you should see a little slider button in the lower right corner of the window:
Let us know if you're still having trouble! If you can post a picture of your settings, that would be really helpful. :)
I'm also not seeing the button that you're mentioning. Any ideas?
Hey Sean -
Welcome to the Zendesk Community! Is your Help Center enabled? That toggle doesn't show up until it is.
Hi, we enabled the various options (Chat, Help Center, Ticket Form) etc. on the Customization Page in Settings -> Channels -> Widgets -> Customization.
Following that, we toggled the 'Add to Help Center' setting as well. We still do not see the widget appear on our Help Desk page. Are there more settings we need to toggle?
Hi Shaunak,
Thanks for letting us know. I'm going to create a ticket and join you in there so we can troubleshoot this further together from there. See you in the ticket. :)
Hey Shaunak -
Glad to see that you're getting help in a ticket. I also see that this is your first post - Welcome to the Zendesk Community! I encourage you to head over to the Welcome Thread in The Lounge to introduce yourself.
We look forward to seeing you around the Community. Happy Zendesking!
Is the web widget available for all plans & packages?
Hi Inbal -
Yes, Web Widget is included on all Support plans.
I see that this is your first post - Welcome to the Zendesk Community! I encourage you to head over to the Welcome Thread in The Lounge to introduce yourself.
We look forward to seeing you around the Community. Happy Zendesking!
Is there any difference in how much it can be customized among the different plans? I am building a ticket submission form with many drop downs for the end user to fill (category, severity, location, etc.) and also a few boxes for free text. Can this be created on the web widget and applied to all plans?
Hi Inbal! I'm looking for someone to help you with this. Stand by!
Hi, I followed the steps listed but am not able to successfully add the Web Widget to our Help Center. The chatbox ("Chat With Us") appears, but I'd hoped that by enabling the Web Widget it would override the chatbox and drive guests to try to self-service before requesting help. I toggled the Web Widget onto the Help Center about 15 minutes ago and it still isn't appearing.
I also read this article (https://support.zendesk.com/hc/en-us/articles/115010139107-Why-isn-t-my-Web-Widget-appearing-in-the-Help-Center-) and our site is HTTPS secured so I don't think that's the issue.
Hi Steven,
Thanks for letting us know. I'm going to create a ticket and we can troubleshoot this further with you from there. See you in the ticket. :)
Hi is it compulsory to add the widget script in the HEAD section ?
I want to only show this widget on Desktops and Laptops and I have some common JS which checks for mobile and tablet devices which loads at the end of the page.
I've tried adding it to the end of the page, it works.
Hi Nigel,
I see this is your first post, welcome to The Community!
It is not necessary to place the widget code in the header. We recommend this to prevent other code from hiding the widget or interfering in other ways. You're welcome to insert it in whatever way works best for your site.
Hey, quick question. Can i add a custom js script to show a slider/carousel?
I was checking at the source code and apparently, showing unsafe content (like loading a script) is not allowed in the widget, even if the option to show unsafe content is checked. This doesn't happen if the user views the article in full page.
The allowed tags are: `["h1", "h2", "h3", "h4", "h5", "h6", "blockquote", "p", "a", "ul", "span", "ol", "nl", "li", "b", "i", "strong", "em", "strike", "hr", "br", "div", "sup", "sub", "img", "iframe", "table", "thead", "tfoot", "tbody", "tr", "th", "td", "pre", "video", "source"]`
My question is... why this is not allowed? even if the option to display unsafe content is checked, and why in one place is allowed and not in the other? this seems inconsistent and confusing
Thanks in advance!
Hi Mauro, the checkbox relates to the display of unsafe content in the Help Center. For the Web Widget, we maintain more control and always restrict unsafe content, like loading a script, to avoid breaking the functionality or the display of the Web Widget. Most customers that decide to show unsafe content use scripts intended for use only on a Help Center page and could cause unintended side effects in the Web Widget. For example, where the Help Center page is a much larger size than the Web Widget, or where certain Help Center features don’t exist in the Web Widget.
Our CMS won't allow scripts. Is it possible to iframe this form onto our site?
Hey Michael -
It's neither recommended nor officially supported, but we have seen customers use iframes to get around similar issues. The greatest area of trouble with that kind of workaround has to do with domain whitelisting, as the iframe ends up having a different domain than your primary site.
Our support team can't instruct you on how to set it up, though you could pose the question in the Q&A topic in our community and see if any other users have done something similar and could help you out.
The script I've been given appears to have a key component, is this not a sensitive key that is bound to our account? Is this something that should be protected?
Hey Jayson!
Your Web Widget script and the key are not considered sensitive information on their own. The primary consideration for security is the websites your Widget script can be placed on. You can configure the Whitelisted Domains that allow your Widget script under your Widget settings by toggling the Help Center option to enabled; this will expose the Security Settings option where you can set the Whitelisted Domains for your Widget script.
Please sign in to leave a comment.