Use this article to create a script that loads a different Web Widget based on when a user opens your website or theme, and their time zone.

This approach is beneficial for businesses that operate in multiple countries and use messaging. You can prevent ticket submission outside business hours without setting up multiple brands, widgets, flows, and schedules. The workflow includes these steps:

  • Step 1: Create two brands
  • Step 2: Create two Web Widgets
  • Step 3: Optional, create bots linked to your Web Widgets
  • Step 4: Implement the script
  • Step 5: Customize your script
Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee custom code. Post any issues in the comments section or try a search for a solution online.

Step 1: Create two brands

Create two brands:

  • One brand for offline hours
  • Another brand for online hours

Step 2: Create two Web Widgets

Create two Web Widgets, one for each brand you created.
Add channel.png

Step 3: Optional, create bots linked to your Web Widgets

For each Web Widget, follow these details:

  • Offline Web Widget: If you create a bot linked to your Web Widget, ensure the flow does not end at the Transfer to agent step and use self-service features and AI
  • Online Web Widget: If you create a bot linked to your second Web Widget, that flow can end at the Transfer to agent step and use self-service features and AI

Step 4: Implement the script

Add this script to the source code of your theme or website. Place it in the header file, before the </header> tag.

<script>
// Get the user's time zone
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

// Get the current date and time in the user's time zone
const currentDateTime = new Date();
const currentHour = currentDateTime.getHours();
const currentDay = currentDateTime.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday

// Save the script of the widget to load
let widgetScript;

// Set the times when your agents start and finish their shift
const startShift = 9;
const finishShift = 17;

// Check if the current day is a weekday and if the current hour is within business hours
if (currentDay >= 1 && currentDay <= 5 && currentHour >= startShift && currentHour < finishShift) {
  widgetScript = 'YOUR_OWN_WIDGET_SCRIPT'; // Online widget script
} else {
  widgetScript = 'YOUR_OFFLINE_WIDGET_SCRIPT'; // Offline widget script
}

document.write(widgetScript);
</script>

Step 5: Customize your script

  1. In the script, replace YOUR_OWN_WIDGET_SCRIPT with the source code of your widgets from the Installation tab

    Note: Put the script inside single quotation marks ' and escape the end script tag. For example:
     

    '<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=WIDGET_KEY"><\/script>'
  2. Adjust the business hours by updating const startShift and const finishShift in the script to match your hours
Powered by Zendesk