Chatsimple for part of the day

You can set up Chatsimple after your team takes the day off to handle any sales and customer concerns. During your day shift, you can set up another system as needed.

Pre-requisites:

Chatsimple Google Tag Manager set-up.

Please review the above demo before proceeding.

Step 1. Set Business hours for your current chatbot/agent

This depends on which service you are using, but taking the example of Hubspot you can find this option under the "availability" tab in your inbox > chat settings.

Tell your chatbot the hours you want it to be inactive, then let Chatsimple handle the rest. If your service doesn't have such an option or it's a JavaScript injection, continue reading (there's another way).

Step 2

If Hubspot (ie an option to turn off your other agent natively available)

Follow the steps in the Google Tag Manager guide, but before publishing tweak your embed code to be in the following format.

<script type="text/javascript" defer>
    // Alternative DOMContentLoaded check
    function onDOMContentLoaded() {
      try {
        var timezoneOffset = 12; // Tweak as necessary. For example, EST is -5
        var currentUTCHour = new Date().getUTCHours();
        var userTime = (currentUTCHour + timezoneOffset + 24) % 24;

        // Define active hours based on your requirements
        var isActiveHours = function() {
          var currentUTCHour = new Date().getUTCHours(); 
          var userHour = (currentUTCHour + timezoneOffset + 24) % 24;
          var currentDay = new Date().getUTCDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
          var isWeekday = currentDay >= 1 && currentDay <= 5; // Tweak as necessary. Monday to Friday
          var isActive = isWeekday && (userHour >= 7 && (userHour < 15 || (userHour === 15 && new Date().getUTCMinutes() <= 30)));
          return isActive;
        };

        var nightScript = function() {
          // Create and append the chat-bot element
          var chatBotEl = document.createElement('chat-bot');
          chatBotEl.setAttribute('platform_id', '3e90cc75-59a1-4ff6-a810-2f11fsdf70b4');
          chatBotEl.setAttribute('user_id', '73656437-0fae-4f87-897b-09dfdsf37fdb');
          chatBotEl.setAttribute('chatbot_id', '4150d0cf-7f35-47cd-b871-75sdfsdf504f1');

          var chatbotLink = document.createElement('a');
          chatbotLink.href = 'https://www.chatsimple.ai/?utm_source=widget&utm_medium=referral';
          chatbotLink.innerHTML = 'chatsimple';
          chatBotEl.appendChild(chatbotLink);
          document.body.appendChild(chatBotEl);

          // Dynamically load the external script
          var cs = document.createElement('script');
          cs.src = 'https://chatsimple-widget.s3.us-east-2.amazonaws.com/chat-bot-loader.js';
          document.body.appendChild(cs);
        };

        // Load the chatbot script only if it's not active hours
        if (!isActiveHours()) {
          nightScript();
        } else {
        }
      } catch (error) {
        console.error('Error in DOMContentLoaded handler:', error);
      }
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', onDOMContentLoaded);
    } else {
      onDOMContentLoaded();
    }
  </script>

The edited code below may work better for Webflow-type platforms.

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  var timezoneOffset = 12; // Tweak as necessary. For example, EST is -5
  var currentUTCHour = new Date().getUTCHours();
  var userTime = (currentUTCHour + timezoneOffset + 24) % 24;

  // Define active hours based on your requirements
  var isActiveHours = function() {
    var currentUTCHour = new Date().getUTCHours(); 
    var userHour = (currentUTCHour + timezoneOffset + 24) % 24;
    var currentDay = new Date().getUTCDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
    var isWeekday = currentDay >= 1 && currentDay <= 5; // Tweak as necessary. Monday to Friday
    var isActive = isWeekday && (userHour >= 7 && (userHour < 15 || (userHour === 15 && new Date().getUTCMinutes() <= 30)));
    return isActive;
  };

  var nightScript = function() {
    // Create and append the chat-bot element
    var chatBotEl = document.createElement('chat-bot');
    chatBotEl.setAttribute('platform_id', '3e90cc75-59a1-4ff6-a810-2f11dbc970b4');
    chatBotEl.setAttribute('user_id', '73656437-0fae-4f87-897b-093b32e37fdb');
    chatBotEl.setAttribute('chatbot_id', '4150d0cf-7f35-47cd-b871-751c178504f1');

    var chatbotLink = document.createElement('a');
    chatbotLink.href = 'https://www.chatsimple.ai/?utm_source=widget&utm_medium=referral';
    chatbotLink.innerHTML = 'chatsimple';
    chatBotEl.appendChild(chatbotLink);
    document.body.appendChild(chatBotEl);

    // Dynamically load the external script
    var cs = document.createElement('script');
    cs.src = 'https://chatsimple-widget.s3.us-east-2.amazonaws.com/chat-bot-loader.js';
    document.body.appendChild(cs);
  };

  // Load the chatbot script only if it's not active hours
  if (!isActiveHours()) {
    nightScript();
  } 

});
</script>

To get your code in the above format, get your nightScript code from the Chatsimple embed using GTM button in the following section.

Copy the part that starts from 'function() and ends with the squiggly brackets {} in the relevant nightScript section

<script type="text/javascript">
  (
  // part before this unnecessary
  function() {
      // Create and append the chat-bot element
      var chatBotEl = document.createElement('chat-bot');
      chatBotEl.setAttribute('platform_id', 'd3dfe2cc-08fe-42e9-97b4-fdfd51147cd');
      chatBotEl.setAttribute('user_id', 'e009b037-58d2-4196-af25-20dfsdfd06b731');
      chatBotEl.setAttribute('chatbot_id', '24ce6fbc-760a-4c8d-845d-e26b21dfdsc4');
      
      var chatbotLink = document.createElement('a');
      chatbotLink.href = 'https://www.chatsimple.ai/?utm_source=widget&utm_medium=referral';
      chatbotLink.innerHTML = 'chatsimple';
      chatBotEl.appendChild(chatbotLink);
      document.body.appendChild(chatBotEl);
      
      // Dynamically load the external script
      var cs = document.createElement('script');
      cs.src = 'https://chatsimple-widget.s3.us-east-2.amazonaws.com/chat-bot-loader.js';
      document.body.appendChild(cs);
  }
  // part after this unnecessary
  )(); 
</script>

Add the appropriate 'timezoneOffset' to indicate your timezone (to get this, just Google 'my city timezone offset')
Then finally enter your work hours & days in the code relating to 'isActiveHours'. To note, these are the hours Chatsimple will NOT BE ACTIVE.

If the option to turn off your other agent NOT natively available

Follow the steps in the Google Tag Manager guide, but before publishing tweak your embed code to be in the following format.

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
  
    var timezoneOffset = 5; // Tweak as necessary. For eg EST is -5
    
    var currentUTCHour = new Date().getUTCHours();
    var userTime = (currentUTCHour + timezoneOffset + 24) % 24;
    
    // All numbers below are random for demonstrative purpose only
    var dayScript = function() {
      // your script for your other agent / chatbot
    };
    
    // Get this from the embed
    var nightScript = function() {
      var copilot = document.createElement('co-pilot');
      copilot.setAttribute('platform-id', '06c36c1c-18c3-44fc-8531-c864343d4346');
      copilot.setAttribute('user-id', '595591493234-23-423434=486923');
      copilot.setAttribute('chatbot-id', '13fd518b-a832-46e0-a946-605342348588f90');
      copilot.setAttribute('is-local', 'false');
      copilot.setAttribute('base-url', 'https://chatsimple.ai');
      document.body.appendChild(copilot);

      var script = document.createElement('script');
      script.src = 'https://cdn.chatsimple.ai/ai-loader.js';
      script.defer = true;
      document.body.appendChild(script);
    };
  
    // Tweak work hours as necessary
    if (userTime >= 9 && userTime < 17) {
      dayScript();
    } else {
      nightScript();
    }
  });
</script>

To tweak the above,

Input the appropriate dayScript and nightScript. You can get the relevant Chatsimple embed script in the following section. (ie your night script). For your dayscript, refer to the documentation of your other service provider (and some ChatGPT never hurt anyone 😉).

Copy the part that starts from 'function() and ends with the squiggly brackets {} in the relevant nightScript section

<script type="text/javascript">
  (
  // part before this unnecessary
  function() {
      // Create and append the chat-bot element
      var chatBotEl = document.createElement('chat-bot');
      chatBotEl.setAttribute('platform_id', 'd3dfe2cc-08fe-42e9-97b4-fdfd51147cd');
      chatBotEl.setAttribute('user_id', 'e009b037-58d2-4196-af25-20dfsdfd06b731');
      chatBotEl.setAttribute('chatbot_id', '24ce6fbc-760a-4c8d-845d-e26b21dfdsc4');
      
      var chatbotLink = document.createElement('a');
      chatbotLink.href = 'https://www.chatsimple.ai/?utm_source=widget&utm_medium=referral';
      chatbotLink.innerHTML = 'chatsimple';
      chatBotEl.appendChild(chatbotLink);
      document.body.appendChild(chatBotEl);
      
      // Dynamically load the external script
      var cs = document.createElement('script');
      cs.src = 'https://chatsimple-widget.s3.us-east-2.amazonaws.com/chat-bot-loader.js';
      document.body.appendChild(cs);
  }
  // part after this unnecessary
  )(); 
</script>

Add the appropriate 'timezoneOffset' to indicate your timezone (to get this, just Google 'my city timezone offset')
Then finally enter your work hours in the code relating to 'isActiveHours'. To note, these are the hours Chatsimple will NOT BE ACTIVE.

Then publish and enjoy! 🎉

PreviousGoogle Tag Manager NextGoogle Tag Manager Integration

Last updated 4 months ago