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

Advanced Usage with Media

import { Onboarding, OnboardingStep, OnboardingOptions } from 'onboarding-tour-faizu';

useEffect(() => { const steps: OnboardingStep[] = [ { 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', media: { type: 'video', url: 'https://youtu.be/C6t2nIPyjcU?si=rqjQWsP9eNjVddUm' } } ];

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

const onboarding = new Onboarding(steps, options);

// Start onboarding after a slight delay to ensure DOM is ready
const timer = setTimeout(() => {
  onboarding.start();
}, 500);

return () => clearTimeout(timer);

}, []);

API Reference OnboardingStep Interface Property Type Description Default element string CSS selector for the target element Required title string Tooltip title Required description string Tooltip description Required position 'top'|'bottom'|'left'|'right'|'auto' Tooltip position relative to element 'bottom' media object Optional media to display in tooltip undefined media.type 'image'|'gif'|'video' Media type Required media.url string Media URL Required media.alt string Alt text for media '' highlightStyle 'solid'|'dotted'|'dashed'|'pulse'|'glow' Element highlight style 'solid' OnboardingOptions Interface Property Type Description Default overlayColor string Color for the background overlay 'rgba(0, 0, 0, 0.7)' textColor string Tooltip text color '#333' backgroundColor string Tooltip background color '#fff' allowSkip boolean Allow users to skip the tour true skipOnMissingElement boolean Skip steps if element not found true allowKeyboardNavigation boolean Enable keyboard controls true onComplete function Callback when tour completes () => {} Methods start(): Begins the onboarding tour

next(): Advances to the next step

prev(): Returns to the previous step

complete(): Ends the tour early

Customization Highlight Styles Choose from several highlight effects:

solid: Solid colored border

dotted: Dotted border

dashed: Dashed border

pulse: Pulsing glow effect

glow: Constant glow effect

Media Support Embed different media types in your tooltips:

Images: Regular JPG/PNG images

GIFs: Animated GIFs

Videos: MP4/webm videos with controls

YouTube: Automatic embedding of YouTube videos

Keyboard Controls When enabled (allowKeyboardNavigation: true):

→ (Right Arrow): Next step

← (Left Arrow): Previous step

Esc: Skip tour