Skip to content

Instantly share code, notes, and snippets.

@sn3p sn3p/index.html
Last active May 18, 2019

Embed
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);
@dcworldwide

This comment has been minimized.

Copy link

dcworldwide commented Nov 20, 2018

I tried the css and it didn't work. Only this block worked.

// iframe element
iframe.intercom-launcher-frame {
height: $launcher-size !important;
width: $launcher-size !important;
}

Is it true you can't style IFRAME children?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.