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.
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.
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.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
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.
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).
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.
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.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
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.
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.
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.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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>
.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;
}
//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();
}
});
Also see: Tab Triggers