Web Widget & Chat advanced customization Follow

Problem

There might be clients who prefer to have all three main components (Help Center Search, Chat & Contact Form) of the Web Widget enabled, yet have the ability to offer specific combination of them depending on the use case/web page. For instance, some might prefer to have only search functionality enabled on their homepage yet have solely chat enabled on critical pages such as checkout and have all three components enabled on the remainder of pages. In essence, customers have the ability to enable any combination of those 3 elements on any page of their site.

Solution

This can be achieved by using our newest set of Web Widget API endpoints to suppress the Help Center Search, Chat & Contact Form component. All the Web Widget endpoints are also explained and documented in this article.

Implementation

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

What it does:

  • uses the Web Widget script that can be placed either directly on the page, or via Google Tag Manager (GTM);
  • uses various API endpoints that will allow customers to customise various titles used on both Web Widget and Chat windows;
  • uses the suppress API endpoints that will allow us deactivate specific components; 
  • uses Chat department routing depending on the status of the department, documented in more details here.

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); 
    Search_only4.gif

 

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

  

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

 

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, you could place the code (except for the runWidgetLogic.init(true, false, false); line) in a file (.js) added 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.

 

 

 

Have more questions? Submit a request

Comments

Please sign in to leave a comment.

Powered by Zendesk