How to add Intercom to a Next.js site

PublishedJanuary 22, 2021

Senior Full-Stack Developer with over 20 years of experience building web applications for startups, government, and higher education.

Comments (1)

Join the discussion

Glenn Rempe5y ago

Very helpful. Thanks for the writeup. I did find I had to add a call to:

  const router = useRouter()

Without this the useEffect() for routes will not work.

More from this blog

Basic Jest and Typescript setup

Writing this up so I have somewhere to quickly grab basic Jest setup. This information is copied from the Jest Documentation Site compressed into just the parts I'm interested in. Create folders mkdir -p <project>/src cd <project> Install and init n...

Mar 21, 20231 min read44

Step-by-Step: Setting Up a Postgres Database with Docker and Seeding Test Data

In this blog post, we'll explore the process of setting up and configuring a Postgres database using Docker and seeding it with test data. This approach can be used for a variety of apps and can be easily adapted for your own needs. We'll cover all t...

Mar 20, 20233 min read954

Step-by-Step: Setting Up a Postgres Database with Docker and Seeding Test Data

SvelteKit - Create & Update

Continuing from last time, we will explore the concepts behind Create and Update functionality and provide a step-by-step guide on how to implement it in your SvelteKit application. Let's get started! Server & Client Code In SvelteKit, the server-sid...

Mar 19, 20233 min read246

REST API in Kotlin & Spring Boot

Introduction In this post, I will explore how to create a REST API using Spring Boot and Kotlin. We will dive into the fundamentals of Spring Boot and Kotlin, explain how to set up the project, and guide you through the process of building the API st...

Mar 14, 20234 min read91

Koan Wars: Kotlin vs TypeScript - Scrabble

Introduction Welcome to the latest post in my series of Koan Battles using Kotlin and TypeScript. In this series, we'll complete a Koan in both languages and then discuss the differences between the two solutions. My goal is to help you gain a deeper...

Mar 10, 20233 min read102

Koan Wars: Kotlin vs TypeScript - Scrabble

Justin's Dev Journal

26 posts

I'm a Senior Full-Stack Developer with over 20 years of experience building web applications for startups, government, and higher education.

This is how I integrated Intercom into a Next.js website.

Intercom has a guide on how to setup a single page app Integrate Intercom in a single page app but I couldn't find anything specific to React or Next.js.

The guide linked above documents the 3 step process to integrate Intercom into a website:

Copy and paste a code snippet before the tag on every page you want the Messenger to appear
Once your app initialises, add a boot call
Update Intercom whenever the view or URL changes in your app. This will allow people to receive your most recent messages

Great but how do we implement this in Next.js?

1. Add the Intercom snippet to Next.js

We only want Intercom loaded once when the site loads, so we add their snippet to a useEffect hook in _app.tsx.

pages/_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  ...
  useEffect(() => {

    // Intercom code snippet
    (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/your_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);}}})();

  }, []);
  ...
}

2. Call the Intercom boot method:

Once Intercom is loaded we need to call the boot method. We can do this in the same useEffect hook:

pages/_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  ...
  useEffect(() => {

    // Intercom code snippet
    (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/your_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);}}})();

    // Call boot method
    (window as any).Intercom('boot', {
      app_id: 'your_app_id'
    });

  }, []);
  ...
}

3. Update Intercom with URL changes

We need to call Intercom on every url change. We can do this with another useEffect in our _app.tsx using the Next.js router event 'routeChangeComplete':

pages/_app.tsx

...
import { useRouter } from 'next/router';
... 

function MyApp({ Component, pageProps }: AppProps) {
  ...
  useEffect(() => {
    const handleRouteChange = () => {
      (window as any).Intercom('update');
    };

    router.events.on('routeChangeComplete', handleRouteChange);

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, []);
  ...
}

With this code in place we should now have the Intercom message button on the site 😀

Command Palette

Comments (1)

More from this blog

1. Add the Intercom snippet to Next.js

2. Call the Intercom boot method:

3. Update Intercom with URL changes