Workflow: Load different Web Widgets based on the time a user opens your website

With this article, create a script that will load a different Web Widget, based on the time 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 restrict users from creating tickets outside of business hours without the need to set up multiple brands, widgets, flows, and schedules. The workflow includes the steps below.

• Step 1: Create two brands
• Step 2: Create two 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 reports. Post any issues you have in the comments section or try searching for a solution online.

Step 1: Create two brands

With this method, create two brands:

• One brand for offline hours
• And another brand for online hours

Step 2: Create two Web Widgets

Then, create two Web Widgets, one for each brand you created.

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 never ends 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 as well

Step 4: Implement the script

To implement this functionality, add the following script to the source code of your theme or website. Place the below script in the header file, before the closing </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 actual source code of your widgets from the Installation tab
   
   Note: The script must be added within single quotation marks ', and the closing script tag should be scraped. For example:
   

   '<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=WIDGET_KEY"><\/script>'

2. Adjust the business hours by modifying the const startShift and const finishShift values in the script to match your business hours