Create a gist now

Instantly share code, notes, and snippets.

@sn3p /index.html
Last active Nov 10, 2017

What would you like to do?
Gist for blog post "Customizing the Intercom Launcher" http://blog.learningspaces.io/customizing-the-intercom-launcher
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inject a stylesheet into the iframe</title>
<link rel="stylesheet" href="intercom.css">
</head>
<script>
// IMPORTANT: Make sure to change YOUR_APP_ID
(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/YOUR_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);}}})()
</script>
<body>
<script src="script.js"></script>
</body>
</html>
/* iframe element */
#intercom-container iframe.intercom-launcher-frame {
height: 50px !important;
width: 50px !important; }
/* iframe content */
#intercom-container .intercom-launcher {
height: 50px;
width: 50px; }
#intercom-container .intercom-launcher-open-icon {
background-position: 50% 60%;
background-size: 54% 60%; }
#intercom-container .intercom-launcher-close-icon {
background-size: 30%; }
$launcher-size: 50px;
#intercom-container {
// iframe element
iframe.intercom-launcher-frame {
height: $launcher-size !important;
width: $launcher-size !important;
}
// iframe content
.intercom-launcher {
height: $launcher-size;
width: $launcher-size;
}
.intercom-launcher-open-icon {
background-position: 50% 60%;
background-size: 54% 60%;
}
.intercom-launcher-close-icon {
background-size: 30%;
}
}
// Initialize Intercom
window.Intercom('boot', {
app_id: 'YOUR_APP_ID',
});
// Stylesheet to inject
const stylesheet = document.createElement('link');
stylesheet.rel = 'stylesheet';
stylesheet.href = 'intercom.css';
// Wait for the iframe to become ready (max 30 seconds)
const timeout = setTimeout(() => clearInterval(interval), 30000);
const interval = setInterval(() => {
const iframe = document.querySelector('.intercom-launcher-frame');
if (iframe) {
// Append the stylesheet to the iframe head
iframe.contentDocument.head.appendChild(stylesheet);
clearInterval(interval);
clearTimeout(timeout);
}
}, 100);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment