tour-guide-live

Lightweight React SDK for embedding in-app product tours powered by Tour Guide Live.

Install

npm install tour-guide-live

Usage

Wrap your app with TourProvider and include TourTooltip:

import { TourProvider, TourTooltip } from 'tour-guide-live';

function App() {
  return (
    <TourProvider
      apiKey="tgl_your_api_key"
      userId="user-123"
      apiBaseUrl="https://your-dashboard.herokuapp.com"
      userAttributes={{ plan: 'pro' }}
    >
      <TourTooltip />
      <YourApp />
    </TourProvider>
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiKey | string | Yes | Your Tour Guide Live API key | | userId | string | Yes | Unique identifier for the current user | | apiBaseUrl | string | No | Dashboard URL (defaults to localhost:3000) | | userAttributes | Record<string, unknown> | No | User attributes for tour targeting |

Hooks

import { useTour } from 'tour-guide-live';

function MyComponent() {
  const { startTour, endTour, currentStep } = useTour();
  // ...
}

License

MIT