
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 🙂
Related
Published by: Michael in Website Development, Wordpress
Tags: Customizations, Dynamic, Engagement, Intercom, JavaScript