✨ SparkGuide

Getting Started

SparkGuide has no peer dependencies and no required build tooling — pick whichever install method matches how the rest of your project is set up.

Install via npm

npm install @capsbharg/sparkguide-js
import { SparkGuide } from '@capsbharg/sparkguide-js';

const guide = new SparkGuide({
  theme: { primaryColor: '#4f46e5' },   // optional branding
  storageKey: 'myapp_onboarding',       // localStorage namespace
  user: { plan: 'pro' }                 // used for segment targeting
});
ESM CommonJS TypeScript types included

Without a build step

Drop the IIFE build straight into a page with a plain <script> tag — no bundler, no npm install:

<script src="https://unpkg.com/@capsbharg/sparkguide-js/dist/iife/index.js"></script>
<script>
  const guide = new SparkGuide.SparkGuide({ theme: { primaryColor: '#4f46e5' } });
</script>
Note: the global is SparkGuide.SparkGuide — the outer SparkGuide is the whole module (in case you need other exports like Targeting), and the inner SparkGuide is the class itself.

Quick start: your first tour

guide.addFlow('welcome-tour', {
  segment: { user: { plan: ['pro', 'trial'] } }, // optional targeting
  steps: [
    { type: 'modal', title: 'Welcome 👋', content: 'Let’s take a quick tour.' },
    {
      target: '#dashboard-nav',
      title: 'Your dashboard',
      content: 'Everything starts here.',
      placement: 'bottom'
    },
    {
      target: '.create-project-btn',
      title: 'Create a project',
      content: 'Click here to get started.',
      placement: 'top',
      advanceOn: 'click'   // auto-advances when the user clicks the target
    }
  ]
});

guide.start('welcome-tour');

guide.on('flow:complete', (flowId) => trackEvent('onboarding_complete', flowId));
guide.on('flow:dismiss', (flowId) => trackEvent('onboarding_dismissed', flowId));

Progress is persisted to localStorage automatically — a completed or dismissed flow won't show again, and an in-progress flow resumes exactly where the user left off on the next page load.

Next steps