HubSpot/shepherd
Shepherd
Shepherd is an interactive product tour framework and JavaScript onboarding library used to build step-by-step instructional journeys. It serves as a web application guidance tool that presents sequences of instructional overlays to help users navigate interfaces and discover features.
The library enables the creation of guided user tours, onboarding experiences, and interactive application guides. It is used to provide contextual in-app education and drive product feature adoption by leading users through specific workflows.
The framework utilizes configuration-driven tour definitions and a sequential state machine to track user progress. It employs DOM-element anchoring and coordinate-based positioning to bind tooltips to specific HTML elements, while using overlay-based focus masking to highlight focal points.
Features
- Onboarding and Walkthroughs - A JavaScript library specifically designed for creating guided tours and user onboarding flows.
- Tour State Management - Tracks the current step index and user progress to trigger transitions in a predefined walkthrough sequence.
- Guided Tour Components - Provides interactive overlays that highlight UI elements for step-by-step user onboarding.
- In-App User Education - Provides contextual in-app assistance and tutorials to reduce the learning curve for a software interface.
- Interactive UI Overlays - Provides interactive UI overlays that highlight specific elements to teach complex tasks.
- Product Tour Libraries - Functions as a comprehensive library for building interactive, multi-step product walkthroughs.
- Tour Step Orchestrators - Manages the sequential progression of a guided tour based on user interaction events.
- Web Applications - Provides a client-side utility for presenting sequences of instructional overlays to drive product adoption.
- Coordinate-Based Position Calculators - Implements logic to calculate viewport coordinates for precise placement of instructional overlays.
- Focus Masking - Renders a semi-transparent layer to highlight a single element while disabling interaction with the rest of the UI.
- Feature Adoption Tours - Leads existing users through specific workflows to increase usage of new or underutilized features.
- Guided Tour Construction Tools - Provides a system for authoring and configuring guided tours via declarative data objects.
- Element Anchoring - Binds instructional tooltips to specific HTML elements using CSS selectors to ensure correct positioning.
- Guided Tours - Guided application walkthroughs.
- User Tours and Guides - App tour and guidance library.
