Last active
May 18, 2019 05:50
-
-
Save sn3p/852cfed0ee22b07b5263ca04930705c8 to your computer and use it in GitHub Desktop.
Gist for blog post "Customizing the Intercom Launcher" http://blog.learningspaces.io/customizing-the-intercom-launcher
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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%; } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $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%; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
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?