Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/hmac-sha256.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/enc-base64-min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
  <div class="container">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8">
              <h1> Configure the Intercom Messenger</h1>
              <pre>
This interactive Codepen example will allow you to try out the different configuraiton
options which are available for the Intercom Messenger. Try them out and see what suits 
your use case of a particular web page on your site. Feel free to use our default test 
App ID provided or simply insert your own. Either way we want you to be able to get a 
feel for the Messenger and how it will help you communicate with your customers.
If you want to know more about Codepen then this <a ref="https://blog.codepen.io/documentation/views/editor-view/">Codepen editor doc</a> will help </pre>

              <h2> Install Intercom to get started <span class="checkmark">
                    <div class="checkmark_stem"></div>
                    <div class="checkmark_kick"></div>
                </span></h2>
              <pre>
For this example we will use the install format for a basic JavaScript layout. This
is where your site will have multiple pages characterised by regular page refreshes.
You can refer back to our install options page if you want more info on how to 
install Intercom on your site. 
The important thing here is that you are familiar with
the different configuration option available. You can then choose what is best for your
particular setup. 
Copy the code you see when toggling the link below and paste it where you see "Insert
Intercom basic JS code here" in the JS Editor in the upper right of your screen</pre>
               
              <a href="javascript:toggle('non-minified')">Basic JavaScript Install Code </a> 
              <div id="non-minified" style="display: none;">
  <pre>
//Set your APP_ID or use our test app "fyq3wodw"
var APP_ID = "APP_ID";

window.intercomSettings = {
    app_id: 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/' + 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);}}})()
</pre>
</div>

              <a href="javascript:toggle('visitorCode')"><h2>Troubleshooting: Did you change the APP_ID?</h2></a> 
<div id="visitorCode" style="display: none;">
 <pre>
 You need to specify an App ID in the JS library code. If you do not it will not work. 
 You can use our test app ID "fyq3wodw" or provide your own (note if you have secure
 mode enabled you will need to use the test app for this example to work). When you
 copy and paste the code into the JS editor replace APP_ID with either fyq3wodw or
 your own App ID
</pre>
</div>     
              <h2> Show Messenger </h2>
              <pre>
This will show the Messenger. If there are no conversations it will open with the 
new message view, if there are it will open with the message list. 
</pre>

              <a href="javascript:toggle('showcode')">Show Messenger Code</a><br>
              <div id="showcode" style="display: none;">
<pre>
Intercom('show');
</pre>
                </div>
              <button onclick="messenger('show')">Show </button>
  <p id="display"></p> 
              <h2> Show message window </h2>
              <pre>
To open the message window with the message list you can call. 
</pre>

              <a href="javascript:toggle('msgwindow')">Message Window Code</a>
              <div id="msgwindow" style="display: none;">
                
<pre>
Intercom('showMessages')
</pre>
                </div> <br>
                <button onclick="messenger('showMessages')">Show Messages</button>
  <p id="display"></p> 
                <div id="showevent"></div>

              
              <h2> Show new message window </h2>
              <pre>
This will show the Messenger. If there are no conversations it will open with the 
new message view, if there are it will open with the message list. 
</pre>

              <a href="javascript:toggle('newmsgwindow')">New Message Window Code</a>
              <div id="newmsgwindow" style="display: none;">
                
<pre>
Intercom('showNewMessage')
</pre>
                </div> <br>
                <button onclick="messenger('showNewMessage')">Show New Messages</button>
  <p id="display"></p> 
              
              <h2> Hide the Messenger</h2>
              <pre>
This will hide the Messenger. 
</pre>

              <a href="javascript:toggle('hidecode')">Hide Messenger Code</a>
              <div id="hidecode" style="display: none;">
<pre>
Intercom('hide')
</pre>
                </div><br>
                <button onclick="messenger('hide')">Hide Messenger</button>
  <p id="display"></p> 
              
              <h2> Take action when Messenger shows </h2>
              <pre>
Gives you the ability to hook into the show event. Requires a function argument. 
</pre>

              <a href="javascript:toggle('showaction')">Show Action Code</a>
              <div id="showaction" style="display: none;">
<pre>
Intercom('onShow', function() { // Do stuff });
</pre>
                </div><br>
              Trigger Event on Show?: <input type="checkbox" id="myCheck">

<button onclick="check()">Check Checkbox</button>
<button onclick="uncheck()">Uncheck Checkbox</button>

              <h2> Take action on unread count change </h2>
              <pre>
This method allows you to register a function that will be called when the current
number of unread messages changes.  
</pre>

              <a href="javascript:toggle('unreadaction')">Unread Count Action Code</a>
              <div id="unreadaction" style="display: none;">
<pre>
Intercom('onUnreadCountChange', function(unreadCount) {
  // Do stuff...
});
</pre>
                </div>

              <h2> Take action on hide </h2>
              <pre>
Gives you the ability to hook into the hide event. Requires a function argument. 
</pre>

              <a href="javascript:toggle('hideaction')">Hide Action Code</a>
              <div id="hideaction" style="display: none;">
<pre>
Intercom('onHide', function() { // Do stuff });
</pre>
                </div>
              
              
              
              <h2> Next Step: Configure the Messenger </h2>
              <pre>
You should now have the Messenger up on running on the page. So you can test it out
and interact with it to send some messages. After that you might want to go through
the options you have to configrue the Messenger. For example, the different display 
modes or how you can hide and customize it. check out our configure doc for more 
info.
</pre>
!

CSS 

              
                .center {
  text-align: center;
  color: mediumblue;
  }

input[type=text], input[type=email], input[type=number] {
    width: 40%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid red;
    border-radius: 4px;
}

.checkmark {
    display:none;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width:6px;
    height:18px;
    background-color:green;
    left:11px;
    top:4px;
}

.checkmark_kick {
    position: absolute;
    width:6px;
    height:6px;
    background-color:green;
    left:5px;
    top:17px;
}

#sent-event {
  color:green;
}

.form-group {
  width:100%;
}

.form-label,
.form-input {
  height:auto;
  float:left;
  margin-bottom:8px;
}

.form-label {
  width:10%;
}

.form-input {
  width:70%;
}

.form-label label,
.form-input input {
  vertical-align:middle;
  margin:0;
  padding:0;
}
!

JS 

              
                //Insert Basic JS code here
//Set your APP_ID
var APP_ID = "fyq3wodw";

// Set Show Event to be false initiall
var SHOW_EVENT = false;

window.intercomSettings = {
    app_id: 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/' + 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);}}})()


function messenger(display) {
  //Insert sign out code here
  Intercom(display)
  return(true) //check to see if code was correctly copied
}











// The code below here is only related to the demo
// i.e. it has nothing to do with installing Intercom

// Code to show snippet code on toggle
function toggle(element) {
    document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
}

//Code to check that launcher is loading
var retries = 0;
var launcherExist = setInterval(function() {
  if ($('.intercom-launcher-frame').length) {
    $('.checkmark').css({'display':'inline-block'});
    $('.still-no-messenger').hide();
    clearInterval(launcherExist);
  }
  retries += 1;
  if (retries >= 120) {
    clearInterval(launcherExist);
  }
}, 500);
  
$('#myCheck').click(function() {
  if ($('#display').is(":visbile")) {
    $('#display').hide();
  } else {
    $('#display').show();
  }
});
!
999px

Console