onboarding-tour-faizu

Onboarding Tour Package

A lightweight, customizable onboarding tour library for web applications that guides users through your interface with interactive tooltips and highlights.

Features

• Interactive step-by-step tours
• Customizable tooltips with multiple positioning options
• Element highlighting with different styles (solid, dotted, dashed, pulse, glow)
• Media support (images, GIFs, videos including YouTube embeds)
• Keyboard navigation (arrow keys and Esc)
• Configurable appearance (colors, behavior)
• Completion celebration with confetti

Installation

npm install onboarding-tour-faizu
# or
yarn add onboarding-tour-faizu


Usage

Basic Usage

import { Onboarding } from 'onboarding-tour-faizu';

const steps = [
  {
    element: '#first-feature',
    title: 'Welcome!',
    description: 'This is our main feature'
  },
  {
    element: '#second-feature',
    title: 'Advanced Options',
    description: 'Configure your settings here'
  }
];

const onboarding = new Onboarding(steps);
onboarding.start();



Advanced Usage with Media

import { Onboarding } from 'onboarding-tour-faizu';

const steps = [
  {
    element: '#upload-button',
    title: 'File Upload',
    description: 'Click here to upload your files',
    media: {
      type: 'image',
      url: '/path/to/demo-image.jpg',
      alt: 'Upload demonstration'
    highlightStyle: 'pulse'
    },
  {
    element: '#video-tutorial',
    title: 'Watch Tutorial',
    description: 'Learn how to use our features',
    highlightStyle: 'dotted'
    media: {
      type: 'video',
      url: 'https://youtu.be/swI0WRmaqtU?si=K24v_SzFttj-ZhdN',
      alt: 'tutorial'
    }
];

const options = {
  overlayColor: "rgba(0, 0, 0, 0.85)",
  textColor: "#333",
  backgroundColor: "white",
  allowSkip: true,
  skipOnMissingElement: true,
  allowKeyboardNavigation: true,
  onComplete: () => console.log("Onboarding completed!")
};

const onboarding = new Onboarding(steps, options);
onboarding.start();


MIT © Faizu Rahman