Activating Intercom in the Example App

Intercom is a well-established customer messaging platform for supporting customers and assisting in your sales cycle through emails, in-app messages or tours, for example. It includes versatile tools, e.g. for organizing, targeting and segmenting your leads and customers. We are using Intercom on scrivito.com, too.

The Scrivito Example App features sample integrations of several widely used services, and one of them is Intercom. This guide is an overview of how the Intercom integration works in a Scrivito-based application.

The Intercom React component

For rendering the so-called chat widget, the Example App uses an included React component, Intercom, which has been developed along the lines of the Integrate Intercom in a single page app documentation article. The Intercom component resides in your project folder’s “src/Components” subfolder. It is rendered on the top level, i.e. in the “App.js” file, thus making it available on every page:

src/App.js
Copy
…
import Intercom from "./Components/Intercom";
…

export default function App() {
  return (
    <ErrorBoundary>
      <HelmetProvider context={helmetContext}>
        <div>
          <div className="content-wrapper">
            <Navigation />
            <Scrivito.CurrentPage />
            <NotFoundErrorPage />
          </div>
          <Footer />
          <CurrentPageMetadata />
          <CookieConsent />
          <Tracking />
          <Intercom />
        </div>
      </HelmetProvider>
    </ErrorBoundary>
  );
}

Providing the Intercom app ID

All that needs to be done to enable Intercom-powered chats and integrations in the Example App is to specify your Intercom workspace ID, which Intercom provides you with when you sign up. This ID is called intercomAppId in the Intercom component; just add it to the site settings via the page properties of the homepage (in editing mode).

That was it – you can now chat with visitors to your Intercom-enabled website!