What is TourGuide JS?

TourGuide JS is an open-source JavaScript library crafted to facilitate the creation of interactive and customizable user onboarding experiences for web applications. Operating independently of any specific framework, it supports integration via both NPM and CDN, ensuring broad compatibility across development environments. With a rich API and TypeScript support, developers can build onboarding steps that are tailored to their application's unique needs, using either data attributes or predefined step arrays for flexibility.

The library provides various customization options, including dialog and backdrop styling, step grouping, and content defined in custom HTML. Features like auto-scrolling, keyboard controls, progress indicators, and user-friendly labeling enhance usability, while minimal external dependencies contribute to efficient performance. TourGuide JS is suitable for both commercial and personal use under an open license, making it an ideal choice for developers seeking to improve user engagement and onboarding.

Features

Framework Agnostic: Compatible with any web framework via NPM or CDN.
TypeScript Support: Provides type definitions for robust development.
Rich API: Offers promise-driven methods and callbacks for developers.
Customization: Flexible options for styling, content, and tour management.
1 Dependency: Minimal dependencies for optimal performance.
Step Grouping: Enables segmentation of onboarding steps via grouping.
Progress Indicators: Visual step dots, progress bars, and step counters.
Keyboard Controls: Navigation through keyboard arrows and escape key.
Open Source: Freely available for commercial and personal projects.
Flexible Initialization: Define steps via attributes or JavaScript arrays.

Use Cases

Onboarding new users to a SaaS platform interface.
Guiding users through updates or new app features.
Providing interactive product walkthroughs for demo sites.
Delivering step-by-step instructions within web dashboards.
Enhancing e-commerce experiences with guided shopping tours.
Building internal tool tutorials for team onboarding.
Training users on complicated application workflows.

FAQs

Is TourGuide JS compatible with all major JavaScript frameworks?

Yes, TourGuide JS is framework agnostic and can be used with any major JavaScript framework via NPM or CDN.
Can I use custom HTML in my onboarding content?

Yes, TourGuide JS allows the use of custom HTML for tour step content, providing full flexibility for user onboarding experiences.
How are onboarding steps defined in TourGuide JS?

Steps can be defined using data attributes on HTML elements or by specifying an array of step objects in JavaScript.