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 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.