How can I enable or disable certain Web Widget (Classic) components on different pages of my site?

Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Please post any issues you have in the comments section or try searching for a solution online. 

Question

How can I enable or disable combinations of Web Widget (Classic) components on different pages of my site?

Answer

This can be achieved by using our set of Web Widget (Classic) API endpoints to suppress the Help Center Search, Chat and Contact Form component. All the Web Widget (Classic) endpoints are also explained and documented in Advanced customization of the Web Widget (Classic).

This script can help easily enable or disable various combination of components depending on necessity.

What it does:

• Uses the Web Widget (Classic) script that can be placed either directly on the page, or with Google Tag Manager (GTM).
• Uses various API endpoints that will allow customers to customize various titles used on both Web Widget (Classic) and Chat windows.
• Uses the suppress API endpoints that allow us to deactivate specific components.
• Uses Chat department routing depending on the status of the department.

The actual script:

To enable or disable a component, just change the relevant parameter in the runWidgetLogic.init function. 

Examples:

• If you want to enable only the search option, use: runWidgetLogic.init(true, false, false); 
  

• To enable search and contact form use: runWidgetLogic.init(true, false, true);
  

• To enable only Chat: runWidgetLogic.init(false, true, false);
   

Elements in the code that will have to be updated:

• document.zendeskHost = 'mycompany.zendesk.com' => update "mycompany" with your subdomain);
• 'Department Name'  => update with the name of your Zendesk Chat department.
• The titles or labels names used in the script can be updated on necessity. 

To easily release the solution on a website, place the code (except for the runWidgetLogic.init(true, false, false); line) in a file (.js). Then, add the code in the header section of the web page and then call the function via Google Tag Manager or directly in the web page by using a certain conditionality.