Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Intercom is an app for communicating with customers of your app. They have a suite of tools for this, helping you do things like live chat with your leads, onboard people with targetted emails, and do customer support.

It does need to be integrated into your app, though, which means some development work and a learning curve. In order to help you learn, the Intercom docs have set up a CodePen example. Cathal Horan explains why:

We’ve used CodePen because it has convenient editors for JS, HTML, and CSS which enable the sample content to be easily laid out. You just add the code to the relevant editor and you’ll see the results on the lower part of the page immediately.

Their docs also make the case:

The beauty of CodePen is that you can tinker away with it and try different things. And if it doesn’t work out you can just start over. The goal is to get you using the Intercom JavaScript code. In a way, the goal is to run into any problems here so you can figure it out and then you can won’t run into any of these issues on your own setup.

We just like to shout out when companies use CodePen in cool ways to help the people they need to help. Much like Shopify, recently.

Speaking of which, Dollar Shave Club agrees. Jeff Wainwright:

We’ve learned that a key to improving our open source products and our learnings is providing demos for our open source projects in live code editing tools like CodePen.

Providing demos in a live code editing tool gives developers who are interested in using the plugin the ability to quickly view, edit, and test the plugin to see if it fits their needs.

An unexpected benefit of providing demos in this format is that developers can quickly offer support for bugs or opportunities to improve products.

Hear, hear, Jeff.