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 header 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 documenation for more information.
Comments
23 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!
Hello Inbal!
That is a great question regarding using custom ticket fields and ticket forms with the Web Widget :)
Customers on any Support plan can choose to display one or all visible, editable custom ticket fields to your Web Widget contact form.
Customers on the Enterprise Support plan, or Professional plan with the Productivity Pack add-on, can use ticket forms in Web Widget.
Plan options:
API: Web Widget extra customization is available on all plans:
Disclaimer: The articles above are provided for instructional purposes only. Zendesk does not support or guarantee the code. Zendesk also can't provide support for third-party technologies such as JavaScript, jQuery, or CSS. We encourage posting any issues you have in the comments section or try searching for a solution online.
If you would like us to create a ticket to go more in-depth and/or get you in touch with the resources for this option/pricing please let us know!
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.
Please sign in to leave a comment.