Tour Kit + Intercom: show tours before chat, not after

Most teams wire up Intercom, bolt on its product tours add-on, and hope for the best. The problem: users who don't understand a feature reach for the chat widget first. Support answers the same "how do I..." questions on repeat. Intercom's own data shows proactive onboarding can reduce support contact rates by roughly 80% (Intercom blog). But Intercom's built-in tours can't coordinate with its own Messenger to make that happen.

This guide wires Tour Kit's headless tour engine into Intercom's JavaScript API so tours fire at the right moment, completion events flow into Intercom for targeting, and the chat widget only appears after users have seen the relevant guidance. We built this integration for a B2B dashboard and hit three gotchas along the way.

npm install @tourkit/core @tourkit/react

What you'll build

A Tour Kit-powered integration that shows contextual product tours before the Intercom chat widget appears, reducing repetitive support questions by giving users guidance at the moment they need it. Tour Kit handles the contextual onboarding (a 3-step tour explaining a feature) and fires a completion event into Intercom via trackEvent. Intercom uses that event to suppress auto-messages for users who already got the tour. If a user skips or hits a dead end, the Messenger launcher appears immediately as a fallback.

The whole integration is about 40 lines of glue code. No custom backend required.

Why Intercom + Tour Kit instead of Intercom tours alone?

Intercom's built-in product tours are a bolt-on add-on that costs $99 to $199 per month on top of your base plan, ships without lifecycle callbacks, and silently fails on mobile. Tour Kit fills those gaps at a fraction of the cost while letting Intercom do what it does best: messaging and support. Intercom product tours cost $99 to $199 per month as an add-on to a base plan that starts at $29 per seat per month (Intercom Proactive Support Plus). At 50,000+ MAU, one G2 reviewer reported the tours add-on alone would cost "over 4,000 EUR" (via UserGuiding). And you get some real limitations for that price:

The callback gap is the big one. Intercom's own community forum confirms it: "At present there is no JS callback function for Tours, nor is there a way to specifically detect if an end-user is due or about to trigger/receive a Tour" (Intercom community). Without lifecycle hooks, you can't coordinate tours with anything else in your app.

Tour Kit gives you those hooks. Intercom stays as your support channel. Each tool does what it's good at.

Prerequisites

This integration requires a React 18+ project with the Intercom Messenger already installed and Tour Kit's core and react packages added as dependencies. You'll wire up about 40 lines of glue code between them, with no backend changes needed. If you're using the modern SDK:

// src/lib/intercom.ts
import Intercom from '@intercom/messenger-js-sdk';

Intercom({
  app_id: process.env.NEXT_PUBLIC_INTERCOM_APP_ID!,
});

And Tour Kit set up with at least one tour defined:

npm install @tourkit/core @tourkit/react

Step 1: Define a tour with completion callbacks

Tour Kit's onComplete and onSkip callbacks give you the lifecycle events Intercom's product tours lack entirely, letting you fire custom events into Intercom's user timeline the moment a tour finishes or gets abandoned. Here's a 3-step feature tour with an onComplete callback wired to Intercom:

// src/components/FeatureTour.tsx
import { TourProvider, Tour, TourStep } from '@tourkit/react';

const steps = [
  { target: '#export-button', content: 'Export your data as CSV or PDF.' },
  { target: '#filter-panel', content: 'Filter results before exporting.' },
  { target: '#schedule-export', content: 'Schedule recurring exports here.' },
];

function FeatureTour() {
  return (
    <TourProvider>
      <Tour
        tourId="export-feature"
        steps={steps}
        onComplete={() => {
          // Fire event into Intercom
          window.Intercom?.('trackEvent', 'tour-completed', {
            tour_id: 'export-feature',
            steps_viewed: steps.length,
          });
        }}
        onSkip={(stepIndex) => {
          window.Intercom?.('trackEvent', 'tour-skipped', {
            tour_id: 'export-feature',
            skipped_at_step: stepIndex,
          });
        }}
      />
    </TourProvider>
  );
}

The trackEvent calls push custom events into Intercom's event timeline for each user. You can target auto-messages, filter audiences, and build segments based on these events, all without the tours add-on.

Step 2: Control the Messenger based on tour state

The core of this integration is a 20-line hook that hides Intercom's chat launcher while a Tour Kit tour is active, then shows it again when the tour finishes or gets skipped, so users see guidance before they see the support widget. Hide the Intercom launcher while a tour is active, show it when the tour ends:

// src/hooks/useIntercomTourBridge.ts
import { useEffect } from 'react';
import { useTour } from '@tourkit/react';

export function useIntercomTourBridge(tourId: string) {
  const { isActive, currentStep } = useTour(tourId);

  useEffect(() => {
    if (!window.Intercom) return;

    if (isActive) {
      // Hide the launcher while the tour runs
      window.Intercom('update', { hide_default_launcher: true });
    } else {
      // Show it again when the tour finishes or gets skipped
      window.Intercom('update', { hide_default_launcher: false });
    }
  }, [isActive]);

  return { isActive, currentStep };
}

This is the glue code. Twenty lines. The user sees the tour first. When it finishes (completed or skipped), the Messenger appears. Users who already got the guided help won't immediately open chat with "how do I export?"

Step 3: Build the targeting loop in Intercom

Once Tour Kit fires trackEvent on completion, you can build audience segments inside Intercom that distinguish between users who finished the tour, users who skipped it, and users who never saw it, then target each group with different follow-up messages. No additional code required:

1. Go to Intercom > Outbound > Messages
2. Create an auto-message targeting users who have NOT triggered tour-completed where tour_id = export-feature
3. Set a delay (e.g., 48 hours after signup)
4. The message can prompt them to retry the tour or open the docs

Users who finished the tour never see this message. Users who skipped get a gentler nudge two days later instead of an immediate chat popup. Users who never encountered the tour get a proactive prompt.

This pattern replaces what Intercom's tours add-on does, but with full control over timing, styling, and the mobile experience.

Step 4: Verify the integration works

Testing this integration takes three checks: confirm the custom events land in Intercom's user timeline, verify the Messenger launcher toggles visibility during a tour, and run the same flow on mobile where Intercom's own tours silently fail. Open your app in a test environment, walk through the tour, then check Intercom:

1. Events tab on the test user's profile should show tour-completed with the metadata
2. Messenger visibility should toggle: hidden during tour, visible after
3. Mobile test: load the same page on a phone. Tour Kit renders the tour. Intercom's startTour would silently fail here, but Tour Kit doesn't rely on it

The gotcha we hit: if you call Intercom('update', { hide_default_launcher: true }) before Intercom finishes booting, it gets overwritten by the boot defaults. We added a 500ms delay on initial page load. Not elegant, but it works. A cleaner approach: listen for Intercom's onShow callback to confirm the Messenger is ready before toggling.

// Defensive timing for initial page load
useEffect(() => {
  const timer = setTimeout(() => {
    if (isActive && window.Intercom) {
      window.Intercom('update', { hide_default_launcher: true });
    }
  }, 500);
  return () => clearTimeout(timer);
}, []);

Going further

Once the basic Tour Kit-to-Intercom bridge is working, three patterns let you push the integration further: dual analytics pipelines, checklist-driven messaging, and a mobile fallback strategy that covers the gap Intercom leaves open.

Pipe analytics both ways. Tour Kit's @tourkit/analytics package can log tour events to PostHog, Mixpanel, or any custom sink alongside Intercom. One tour completion fires into two systems.

Coordinate with checklists. @tourkit/checklists tracks task completion across multiple tours. When a user finishes the entire onboarding checklist, fire a single onboarding-complete event into Intercom. Use it to trigger a "welcome to the product" message from your support team, the first human touchpoint after self-serve onboarding.

Handle the mobile gap. Intercom's tours don't work on mobile. Tour Kit does. For teams with mobile web traffic, this integration means Tour Kit runs the guided experience everywhere while Intercom handles messaging on every platform.

One limitation to call out: Tour Kit requires React 18+ and doesn't have a visual builder. If your product team wants drag-and-drop tour creation without code, this integration isn't the right fit. Intercom's visual editor handles that use case, even with its other limitations.

Check the full Tour Kit docs for the hooks API and analytics configuration. Intercom's JavaScript API reference covers trackEvent, update, and startTour.

FAQ

Can Tour Kit replace Intercom product tours completely?

Tour Kit replaces the guided tour functionality (step-by-step guides, tooltips, checklists) at under 8 KB gzipped versus Intercom's ~210 KB Messenger bundle. It can't replace Intercom's audience targeting or message scheduling, but those features work without the tours add-on. Most teams keep Intercom for chat while Tour Kit handles product tours.

Does this integration work with Intercom's modern SDK?

Yes. The @intercom/messenger-js-sdk npm package exposes the same Intercom() global. Tour Kit's callbacks fire standard JavaScript, so no special adapter is needed. Install both packages, wire up the trackEvent calls in your tour callbacks, and the event data flows into Intercom's user timeline.

What happens on mobile where Intercom tours don't work?

Intercom's startTour API silently does nothing on mobile web (Intercom FAQ). Tour Kit renders the same tour on desktop and mobile using the same React components. The useIntercomTourBridge hook still toggles the Messenger launcher visibility on mobile, so the experience stays consistent across devices.

How much does this save compared to the Intercom tours add-on?

The Proactive Support Plus add-on costs $99 per month for 500 tour sends, with overages beyond that (a 3,000-user run adds roughly $145). Tour Kit's core is MIT-licensed and free. The Pro package is a one-time $99 purchase. For 5,000 monthly tour views: $200+ per month with Intercom versus $0 ongoing with Tour Kit.

Can I still use Intercom's built-in tours alongside Tour Kit?

Yes. Intercom('startTour', tourId) still works for any published Intercom tours with "Use tour everywhere" enabled. Some teams use Tour Kit for the initial onboarding flow (where callbacks and mobile matter) and keep Intercom tours for simple one-off announcements created by product managers in the visual editor. The two systems don't conflict.

Related articles

IntegrationsApr 9, 2026 · 8 min read

Tour Kit + Segment: piping tour events to every analytics tool

Build a custom Segment plugin for Tour Kit that sends tour lifecycle events to 400+ destinations. TypeScript code, gotchas, and free tier limits.

Read article

IntegrationsApr 9, 2026 · 9 min read

Tour Kit + Storybook: documenting tour components in isolation

Build and test product tour components in Storybook with Autodocs, play functions, and the a11y addon. Working TypeScript examples included.

Read article

IntegrationsApr 9, 2026 · 8 min read

Tour Kit + Supabase: tracking tour state per user

Persist product tour progress in Supabase PostgreSQL with Row Level Security. Replace localStorage with cross-device tour state in under 100 lines.

Read article

IntegrationsApr 9, 2026 · 8 min read

Tour Kit + TanStack Router: multi-page tours with type safety

Build type-safe multi-page product tours with Tour Kit and TanStack Router. Route context, beforeLoad guards, and typed search params for onboarding flows.

Read article