December 5, 2017 - No Comments!

Hide Intercom chat between certain times on a schedule or at night

It turns out Intercom doesn't offer a dynamic way of hiding the chat launcher button. It's either on or it's off, as set through the Intercom dashboard.

With the help of a little JavaScript, we can set predefined times to hide the chat window.

Why would anyone want to hide the chat button between certain times?

Better user experience—don't offer a real-time chat if you're not available at 1am. Here's how to hide Intercom while you sleep.

 

For you TLDR's; here's the full code:

<script>
var d = new Date();
var currentHour = d.getHours();
var currentMins = d.getMinutes();

var newTime = (currentHour +':'+ currentMins).split(":");
var currentMils = (+newTime[0] * (60000 * 60)) + (+newTime[1] * 60000);

var availableStart = ('05:00').split(":"); // 05:00 = 5am
var startSplitMils = (+availableStart[0] * (60000 * 60)) + (+availableStart[1] * 60000);

var availableEnd = ('23:00').split(":"); // 23:00 = 11pm 
var endSplitMils = (+availableEnd[0] * (60000 * 60)) + (+availableEnd[1] * 60000);

if (currentMils >= startSplitMils && currentMils <= endSplitMils) {
 
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/APP_ID';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()

var APP_ID = "x123456x";
// be sure to use your App ID here

window.Intercom('boot', {
 app_id: APP_ID,
 });
 console.log('Chat available from ' + availableStart +' - '+availableEnd);

} else {
 Intercom('shutdown');
 console.log('Chat unavailable from ' + availableEnd +' - '+availableStart);
}
<script>

 

Breaking it down:

Get the current date (hours and minutes)

var d = new Date();
var currentHour = d.getHours();
var currentMins = d.getMinutes();

Convert 24-hour times to milliseconds

var newTime = (currentHour +':'+ currentMins).split(":");
var currentMils = (+newTime[0] * (60000 * 60)) + (+newTime[1] * 60000);

Set your desired start time - this is the beginning of the scheduled time to show Intercom

This is when the chat will begin displaying. In our example, it's 5am (05:00)

var availableStart = ('05:00').split(":");
// 05:00 = 5am

Convert the start time to milliseconds, define the end time (begin to hide Intercom), and convert to MS

var startSplitMils = (+availableStart[0] * (60000 * 60)) + (+availableStart[1] * 60000);
// converts the start time to milliseconds

var availableEnd = ('23:00').split(":");
// 23:00 = 11pm 
var endSplitMils = (+availableEnd[0] * (60000 * 60)) + (+availableEnd[1] * 60000);

Lastly, write the conditional check

There are a few approaches here. You may choose to use window.intercomSettings.hide_default_launcher = true; instead but I found the explicit loading and shutdown to be more reliable on site with cached files.

if (currentMils >= startSplitMils && currentMils <= endSplitMils) {
  // activate the chat launcher
}

else {
  // we're sleeping, don't run the chat launcher code
};

 

That's it!

Have questions? Comment below 🙂

Leave a Reply