When you've finished configuring your Web Widget, you can install it on your website or help center and make it available to your customers. You can also choose to add an allowlist to the Web Widget to specify the domains where the widget can be installed.
This article includes the following topics:
Installing the Web Widget on a website
Installing the Web Widget on a website requires some basic familiarity with your website's code.
The following video gives you an overview of how to add messaging to your website:
Adding messaging to your website [1:40]
To add the Web Widget to your website
- In Admin Center, click
Channels in the sidebar, then select Messaging and social > Messaging.
- Click the name of the widget you want to install, then click the Installation tab.
- Click the Copy icon (
) at the bottom of the code snippet frame.
- In the source code of the web page where you want to add the widget, paste the code snippet before the closing HTML </body> tag. Add the code to every web page where you want the widget to appear.
- If you want to send the code to someone else (a developer, for example), click Email code to a team member.
- Make sure your firewall is configured to allow the Web Widget to appear.
Installing the Web Widget on a help center
Installing the widget on a help center is a simple, one-click process – no tech support needed.
To add the Web Widget to your help center
- In Admin Center, click
Channels in the sidebar, then select Messaging and social > Messaging.
- Click the name of the widget you want to edit, then click the Installation tab.
- Click the checkbox to Automatically embed Web Widget in your Help Center. The widget is added to every page of your help center.
Creating an allowlist for the Web Widget
Admins can create an allowlist of website domains to specify where their Web Widget can be shown to end users. When you enable the allowlist:
- The widget can be embedded and accessed on any web pages within the domains (or subdomains) added to the list.
- The widget cannot be accessed on any web pages from domains not included in the list.
- Admins can quickly block the Web Widget from appearing on a domain or subdomain by removing it from the widget’s allowlist.
It’s important to note that the allowlist does not prevent your Web Widget code snippet from being added to a website’s code. Rather, it stops the code snippet from functioning, blocking the widget on any sites in the domains not included in the list.
To create an allowlist for a widget
- In Admin Center, click
Channels in the sidebar, then select Messaging and social > Messaging.
- Click the name of the widget you want to edit, then click the Installation tab.
- Click the checkbox to Only allow Web Widget to be installed
on these domains.
Only alphabetical characters are allowed after the final dot (.) in the subdomain. For example,
my-awesome-restaurant.pizza
is valid, butmy-awesome-restaurant.pizza-chain
is not. - Add the domains or subdomains where the widget can be
installed. To add all subdomains from a single domain, add an asterisk
before the domain name (for example,
*.yourdomain.com
). - Click Save settings.
Removing a domain from the allowlist
If you no longer wish to allow your Web Widget on a domain or subdomain, you can remove that domain from the allowlist, which immediately blocks it from the removed website.
To remove a domain from the allowlist
- In Admin Center, click
Channels in the sidebar, then select Messaging and social > Messaging.
- Click the name of the widget you want to edit, then click the Installation tab.
- Deselect the checkbox to Only allow Web Widget to be installed on these domains.
- Click the X next to the domains or subdomains where the widget should be blocked.
- Click Save settings.
Disabling the allowlist
If you choose to no longer restrict your Web Widget by domain, you can disable the allowlist on that widget. When you disable the allowlist, the Web Widget becomes active on all websites that have added the Web Widget code snippet to their page code.
To disable the allowlist
- In Admin Center, click
Channels in the sidebar, then select Messaging and social > Messaging.
- Click the name of the widget you want to edit, then click the Installation tab.
- Deselect the checkbox to Only allow Web Widget to be installed on these domains.
- Click Save settings.
12 comments
Noa Kressel
Is there a way to block the widget from SPECIFIC pages in a domain?
1
Viktor Osetrov
Thanks a lot for your interesting question.
For suppressing widget features on specific pages in the Web Widget (Classic), please enable chat and then use the suppress setting to change the features offered on particular pages of your site to suit your needs.
For example, you can use suppress to:
If you would like to suppress the web widget when your chat is offline, please use
hideWhenOffline
variable.Hope it helps.
1
Blaine Light
It seems like I installed the Web Widget via wordpress using this article -- do I still need to follow the steps in this article here too?
0
Gab
Once you're able to add your Web Widget to your Wordpress site, you're all set! The article serves as a guide for your Zendesk Support connection with Wordpress.
0
mfg
we want to include multiple subdomains - ABC, MNO, & XYZ in our allowlist, but not the primary domain. Assuming this can be done, what is the delimiter - is this accomplished with a comma, space, semi-colon, row, etc separated list?
ie.
or
etc
0
Christine
Enter multiple domains separated by a space to allow more than one domain access.
In the following example, email from the domains mondocamcorp, comdocam, and mondostore are permitted:
See Understanding the allowlist and blocklist for usage examples, limitations, and considerations.
Thanks,
Christine
0
Tory Lester
Do you have any guidance on adding the Web Widget to a Blazor web app?
0
JR Lausin
Upon checking the integration to Blazer web app is not yet supported so we don't have any documentation aside from adding widget to a website please check this article.
https://support.zendesk.com/hc/en-us/articles/4500748175258-Installing-the-Web-Widget
0
Christina hernandez
We have added messaging to our help center page article_page.hbs using the Web Widget snippet. However, we didn't want messaging to appear on every article page, just on select ones. I don't see any recommendation for how to do this. I only see that we can add it to all pages or create an allowlist for specific subdomains.
The workaround we came up with is we created an article template page that's an exact copy of the article_page.hbs, but it has the messaging snippet code on it. Then, we apply this template to any article where we want chat.
My questions for you are:
0
Destiny
Thank you for getting in touch. I understand that you are seeking clarity on how to display the Messaging widget on select pages within your Help Center.
The method you've employed is indeed recommended as a potential solution for deploying web widgets. The only limitation I can foresee is in the scenario where your client navigates to different pages; it's uncertain whether the widget will automatically hide itself or continue to be visible. However, as the Messaging feature is designed to maintain ongoing conversations, any active dialogues between your agents and users should not be interrupted.
Beyond embedding the widget on designated pages, another option is to employ a custom script that uses our Messaging API (https://developer.zendesk.com/api-reference/widget-messaging/web/core/) in combination with page URL checker script to control on which webpages the Messaging widget appears. Unfortunately, we do not have a premade script or a specific guide to offer at the moment, so we advise enlisting the assistance of your technical team to handle the scripting aspect.
I trust this information is of assistance to you.
0
Christina hernandez
Hi Destiny Thanks for your response. The link you provided to developer resources doesn't work, can you please repost?
0
Destiny
Thank you for getting back to me on this. I am pretty sure the same link works for me. Screenshot for reference:
Image1: Page loaded showing same URL as shared previously
If this does not work, try searching the term zE('messenger', 'show'); Zendesk Messaging API in Google Chrome. Or you can also check out this link https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/web/messaging-show-web-widget/
Let me know if that helps
0