Case Study

How to Redirect Customers to Intercom on a Blog

May 30, 2025

woman in black headphones holding black and silver headphones

When you’re running a blog or content-heavy website, your readers may have questions, need support, or want to speak with a real human. Rather than cluttering your layout with a visible chat icon on every page, sometimes it makes more sense to let users trigger a conversation only when they need it. That’s where Intercom comes in.

In this post, you’ll learn how to properly integrate Intercom into your blog, how to hide the default launcher, and how to trigger the Intercom chat window using a custom button or section—just like we implemented recently.

Why Use Intercom on a Blog?

Before diving into the code, here’s why integrating Intercom the right way matters:

Cleaner design: No intrusive widgets floating around.
Controlled experience: Intercom is triggered only when users engage.
Better performance: Fewer distractions = higher dwell time and engagement.
Focused intent: Only users who need help interact with chat.

So, if your blog is all about education, documentation, news, or updates, this approach is perfect.

Step 1: Add the Intercom JavaScript Snippet

The first step is to install the Intercom widget as usual. Paste the following script just before the closing </body> tag of your blog's HTML:


<script>
  window.intercomSettings = {
    app_id: "qlaspwkh",
    hide_default_launcher: true
  };
</script>

<script>
  (function() {
    var w = window;
    var ic = w.Intercom;
    if (typeof ic === "function") {
      ic('reattach_activator');
      ic('update', w.intercomSettings);
    } else {
      var d = document;
      var i = function() {
        i.c(arguments);
      };
      i.q = [];
      i.c = function(args) {
        i.q.push(args);
      };
      w.Intercom = i;
      var l = function() {
        var s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'https://widget.intercom.io/widget/qlaspwkh';
        var x = d.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
      };
      if (document.readyState === 'complete') {
        l();
      } else if (w.attachEvent) {
        w.attachEvent('onload', l);
      } else {
        w.addEventListener('load', l, false);
      }
    }
  })();
</script>

The key part here is hide_default_launcher: true. This tells Intercom not to show the launcher by default.

Step 2: Create a Custom Section to Trigger Intercom

Now, let’s build a clean-looking support section you can embed into your blog. This looks like a native blog block but acts as a trigger for chat.

Here’s the HTML + CSS:


.support-box {
  background-color: #ffe8f1;
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  max-width: 350px;
  margin: 2rem auto;
  cursor: pointer;
  box-sizing: border-box;
  transition: box-shadow 0.3s ease;
  font-family: sans-serif;
}

.support-box:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.support-box .avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid white;
  object-fit: cover;
  margin-bottom: 1rem;
}

.support-box h3 {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
}

.support-box p {
  font-size: 0.95rem;
  color: #444;
  margin: 0.5rem 0 0;
  line-height: 1.4;
}

And the CSS:


.support-box {
  background-color: #ffe8f1;
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  max-width: 350px;
  margin: 2rem auto;
  cursor: pointer;
  box-sizing: border-box;
  transition: box-shadow 0.3s ease;
  font-family: sans-serif;
}

.support-box:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.support-box .avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid white;
  object-fit: cover;
  margin-bottom: 1rem;
}

.support-box h3 {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
}

.support-box p {
  font-size: 0.95rem;
  color: #444;
  margin: 0.5rem 0 0;
  line-height: 1.4;
}

This creates a pink card with a circular image, headline, and message. Once clicked, it launches Intercom.

Step 3: Make it Responsive

To ensure the widget looks clean on all devices:

@media (max-width: 480px) {
  .support-box {
    margin: 1rem;
    padding: 1.5rem;
  }

  .support-box .avatar img {
    width: 64px;
    height: 64px;
  }

  .support-box h3 {
    font-size: 1rem;
  }

  .support-box p {
    font-size: 0.9rem;
  }
}

Now your Intercom support card is mobile-friendly.

Bonus: When Should You Trigger Intercom Instead?

Instead of launching it on page load, here are smart ways to open Intercom:

When a user clicks "Need help?"
After 30 seconds on a pricing page
On exit intent (with a modal)
After reading 75% of a long-form article

You can do all of this with:

Intercom('show');

Add it to any click or scroll logic in JavaScript.

Final Thoughts

Adding Intercom to your blog doesn’t mean you need to overwhelm readers with a chat icon in the corner. Instead, build it into your layout. Let your content breathe, and allow readers to reach out on their own terms.

This approach gives you full control, keeps the user experience tight, and helps support come in only when needed. If you're running a blog and want chat support without clutter—this is how you do it.