Package Exports

onboarding-tour-faizu
onboarding-tour-faizu/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (onboarding-tour-faizu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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