Preparing for the new Web Widget experience

If you are using both the Chat widget and the Web Widget on your Help Center or website, you may need to manually update some Chat and Support settings to ensure the widget appears and functions as intended.

This article walks you through the updates you should make before Zendesk begins moving Chat functionality for all users to the new, integrated Web Widget.

The steps you need to perform differ, depending on whether your widgets are implemented on a Help Center or website. Use the links below to view the steps that are relevant to your implementation.

• Updating your Help Center implementation
• Updating your website implementation

After you make these changes, your Chat functionality and the appearance of your widget may change slightly. For information on these changes, see Feature differences: Legacy Chat and Chat in the Web Widget.

Updating your Help Center implementation

If you have the Legacy Chat widget and Web Widget installed on your Zendesk Help Center, you’ll need to perform the following steps to prepare for the new Web Widget experience:

• Disabling Chat in Guide
• Enabling and configuring the Web Widget in Zendesk Support
• Making the Web Widget Chat-only (optional)

Disabling Legacy Chat in Guide

If you are displaying the Legacy Chat widget on your Help Center, you need to remove Legacy Chat from your Help Center. To do this, you need to disable the Chat widget in your Guide settings.

To disable Legacy Chat in your Guide settings

1. In Guide, click the Settings icon () in the sidebar.
2. Scroll down to Integrations, and locate the Chat entry.

   

3. Clear the Chat check box.
4. Scroll to the top of the Settings page and click Update.

Next, you’ll need to take a few steps in Zendesk Support.

Enabling and configuring the Web Widget in Zendesk Support

To make sure the Web Widget is displayed in your Help Center, you need to enable that functionality in Zendesk Support, then enable the Integrated Chat Experience in the Web Widget.

To enable the Web Widget in your Help Center

1. In Zendesk Support, click the Admin icon () in the sidebar, then select Channels > Widget.
2. Click the Setup tab, if it is not already selected.
3. Click the Add to Help Center toggle.

   

   This adds the Web Widget to the Help Center header document_head.hbs, and displays the widget on every page of your Help Center.

To enable the Integrated Chat Experience in the Web Widget

1. In Zendesk Support, click the Admin icon () in the sidebar, then select Channels > Widget.
2. Click the Customization tab, if it is not already selected.
3. Click the Integrated Chat Experience toggle.

Making the Web Widget Chat-only (optional)

If you want your Web Widget to show only Chat functions, you will need to add the suppress Javascript API to below your widget snippet.

To add the Suppress API to your website

1. On each page where you’ve enabled the Web Widget, find the Web Widget snippet.
2. Add the following code below the snippet:

    <script type="text/javascript">
       window.zESettings = {
            webWidget: {
               chat: {
                 suppress: false
                },
               contactForm: {
                 suppress: true
                },
                helpCenter: {
                 suppress: true
                },
                talk: {
                  suppress: true
                 },
                 answerBot: {
                   suppress: true
                 }
              }
            };
   </script>

Updating your website implementation

If you have both the Chat widget and Web Widget installed on your website, you’ll need to perform the following steps to prepare for the new Web Widget experience:

• Enabling Chat in the Web Widget
• Removing the Chat snippet from your website
• Replacing the Zendesk Chat for Wordpress or Shopify plugins

Enabling Chat in the Web Widget

To display the Integrated Chat Experience in the Web Widget, you need to enable it in Zendesk Support.

To enable the Integrated Chat Experience in the Web Widget

1. In Zendesk Support, click the Admin icon () in the sidebar, then select Channels > Widget.
2. Click the Customization tab, if it is not already selected.
3. Click the Chat toggle to enable Chat functionality in the Web Widget.
4. Click the Integrated Chat Experience toggle.

Removing the Chat snippet from your website

To make sure your website code is not loading unnecessary assets, you should remove the Chat snippet (also called the embed script).

Note: You should already have the Web Widget snippet added to your website code before removing the Chat snippet.

To remove the Chat snippet from your website code

1. In the source code of each web page displaying the Chat widget, locate the embed script. It should look something like this:

   <!-- Start of DomainName Zendesk Widget script -->  
       <script id="ze-snippet"
       src="https://static.zdassets.com/ekr/snippet.js?key=83775dab-6ee6-4fd7-85c0-39eb5ec114fe">
       </script> 
   <!-- End of DomainName Zendesk Widget script -->

   Some older versions of Chat may have snippets that are fairly different than the example above. If you have Chat embedded in your website but cannot find the snippet above, try one of the following:

   • Search your code for <!-Start of Zendesk Chat Script-> and <!-End of Zendesk Chat Script->. The snippet is everything between these two lines.
   • Search your code for references to zopim. Older snippets will contain multiple references.
2. Delete the embed script.
3. Save and publish the page.

Replacing the Zendesk Chat for Wordpress or Shopify plugins

If you are using the Zendesk Chat plugins for Wordpress or Shopify, you’ll need to replace them with the Zendesk Support versions.

For information on using the Zendesk Support for Wordpress plugin, see Wordpress: Setting up and using the Zendesk Support for Wordpress plugin.

For information on using the Zendesk Support for Shopify plugin, see Shopify: Setting up Zendesk Support for Shopify integration.