Created
May 1, 2017 04:59
-
-
Save mhulet/12f12797bcdf5dc56fa20a6cc3f43eb6 to your computer and use it in GitHub Desktop.
Helpman widget with Intercom (side-by-side)
This file contains 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
| <!-- Add this at the bottom of <body> on your app/online store --> | |
| <!-- This will show/hide Helpman iframe when Intercom Messenger is shown/hidden --> | |
| <script type="text/javascript"> | |
| Intercom('onShow', function() { | |
| document.getElementById('helpman-iframe-container').style.display = 'block'; | |
| document.getElementById('helpman-iframe').contentWindow.widgetShown(); | |
| }); | |
| Intercom('onHide', function() { | |
| document.getElementById('helpman-iframe-container').style.display = 'none'; | |
| }); | |
| </script> |
This file contains 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
| /* Add this AT THE END of the CSS defined on your 'Widget' page */ | |
| #helpman-button { | |
| display: none; | |
| } | |
| #helpman-iframe-container { | |
| right: 400px; | |
| height: calc(100% - 20px - 75px - 20px) !important; | |
| max-height: 590px !important; | |
| bottom: calc(20px + 75px) !important; | |
| } | |
| #helpman-iframe { | |
| width: 400px; | |
| height: 100%; | |
| border: 1px solid #DDD; | |
| background: #FFF; | |
| border-radius: 8px; | |
| border: 1px solid #dae2e8; | |
| box-shadow: 0 5px 40px rgba(0,0,0,.16)!important; | |
| } | |
| #helpman-iframe-close { | |
| display: none; | |
| } | |
| @media (max-width: 500px) { | |
| #helpman-button { | |
| display: block; | |
| bottom: 20px; /* use top/bottom/left/right to set the button position */ | |
| right: 100px; | |
| display: block; | |
| padding: 0 20px; | |
| line-height: 60px; | |
| } | |
| #helpman-iframe-container { | |
| right: 0; | |
| top: 0; | |
| max-height: inherit !important; | |
| height: 100vh !important; | |
| } | |
| #helpman-iframe { | |
| width: 100%; | |
| border-radius: 0; | |
| } | |
| #helpman-iframe-close { | |
| display: block; | |
| } | |
| } |
This file contains 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
| /* Add this AT THE END of your widget.css.liquid file using the 'Widget Editor' */ | |
| body { | |
| font-size: 14px; | |
| } | |
| @media (min-width: 501px) { | |
| #search { | |
| margin-right: 0; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment