Guide your users through a tour of your app

Shepherd is maintained by Ship Shape. Contact us for web app consulting, development, and training for your project. Browsers support Edge Firefox Chrome Safari

Information

Category: JavaScript / Tours And Guides
Watchers: 104
Star: 11k
Fork: 604
Last update: Mar 13, 2023

Resource links

http://github.hubspot.com/shepherd/docs/welcome

https://github.com/shipshapecode/shepherd

Popular

Shepherd is maintained by Ship Shape. Contact us for web app consulting, development, and training for your project.

Guide your users through a tour of your app

Browsers support

Edge	Firefox	Chrome	Safari
Edge	last 2 versions	last 2 versions	last 2 versions

Documentation

API documentation

Demo

Contributing

We encourage contributions of all kinds. If you would like to contribute in some way, please review our guidelines for contributing.

License

MIT License

Projects Using Shepherd

Here we showcase some of the awesome libraries built using Shepherd.

JS Framework Wrappers

ember-shepherd

Ember addon for the site tour library Shepherd

angular-shepherd

An Angular wrapper for the site tour library Shepherd

react-shepherd

A React wrapper for the site tour library Shepherd

vue-shepherd

A Vue wrapper for the site tour library Shepherd

Rails gems

abraham

Rails engine that generates and tracks Shepherd tours within an application

Websites and Apps

SimplePlanner uses Shepherd to help new users get familiar with its collaborative scheduling approach. You do need to sign up via OAuth or email to see the scheduling tour. Check out the Envato Tuts+ Startup Series on its codebase which describes how Simple Planner was built.

Brokermate

Brokermate uses Shepherd to guide users through initial setup steps.

Your Project Here

If you have a cool open-source library built on Shepherd, PR this doc.

38 Open More issues

Closed

Accessibility support

I'm part of a team that has been looking at using Shepherd (and ember-shepherd) within one of our externally-facing Ember sites, however we've noticed that the accessibility support is fairly minimal - there are no ARIA attributes on any Shepherd elements and the semantic markup could be improved (no nav tag around the navigation buttons, for example).

I know there was an issue #26 raised along these lines but it was closed without explanation late last year.

I realize that this is a period of transition in terms of the stewardship of Shepherd but I was wondering if any efforts were being planned in this regard.

enhancement a11y

opened Jul 31, 2018 by gorner 46

Closed

IE11 support is broken

The README.md states that Shepherd still supports IE11, but the dist and demo (latest beta) give JavaScript errors. So Shepherd doesn't work with IE11 right now.

Is there a way to fix these issues or build Shepherd with IE11 support? There are still a lot of IE11 users on our platform (> 10%).

The lambda's are definitely breaking for IE11, see following example:

// returns true if 'el' should be allowed to receive touchmove events
  const allowTouchMove = el => locks.some(lock => {
    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
      return true;
    }

    return false;
  });

bug

opened Jul 15, 2019 by rubnig 34

Closed

Progress dots for steps

Is a progress indicator planned? Something like a set of dots denoting each step, and clicking a dot can take you to steps back.

Current step and total steps can currently be had as you suggested here: https://github.com/shipshapecode/shepherd/issues/427

feature request

opened Jul 24, 2019 by IamSachin 31

Closed

useModalOverlay not working after few steps

There are few addStep I used, however, after step four, the overlay doesn't create an opening around my remaining target element (next step till the end).

Does anyone know how to solve this problem? Please help :( Thank you in advance!

question

opened Apr 9, 2020 by porespod 29

Closed

ES2015 imports not working

Hi, first of all thank you for maintaining this module. I am trying to upgrade from tether-shepard and lots of things have changed.

I have tried both with 2-beta.14 and 2-beta.15 and get two different errors depending on the version.

in 2-beta.14 i get an error TypeError: __WEBPACK_IMPORTED_MODULE_1_shepherd_js___default.a.Tour is not a constructor importing it like this:

import Shepherd from 'shepherd.js';
import Popper from 'popper.js';
window.Popper = Popper;
window.Shepherd = Shepherd;

export function initTour() {
  return new Shepherd.Tour({
    defaults: {
      classes: 'shepherd-theme-default',
      scrollTo: true,
      showCancelLink: true,
    },
  });
}

in 2-beta.15 i get the error: TypeError: Popper is not a constructor

In node_modules/shepherd.js/dist/js/shepherd.js:430 at this.popper = new Popper(opts.element, this.el, popperOpts);

Any idea on what I am missing? Does Shepherd work when it is used within an es6 module?

Some advice would be greatly appreciated!

bug

opened Aug 14, 2018 by janusch 27

Closed

Buttons behind tour shouldn't be clickable?

On the GitHub demo page, shouldn't I be disallowed from clicking on buttons outside of the tour unless I exit the tour or the tour specifically tells me to press a button?

opened Aug 11, 2014 by ilanbiala 25

Open

[QUESTION] How to add offset from the focusing element for shepherd-content

Hello, Maybe there is a better way to add a custom margin for the description modal?

I did this by changing the styles, but the arrow's position was wrong

opened Mar 13, 2023 by CrazyNoodl 1

Open

Facing Uncaught TypeError c.set is not a function

Hi, I am facing this issue when trying to start the tour in console using tour.start():

Uncaught TypeError: c.set is not a function
    at orderModifiers.js:8:9
    at Array.forEach (<anonymous>)
    at Qb (orderModifiers.js:7:13)
    at Rb (orderModifiers.js:37:26)
    at Object.setOptions (createPopper.js:74:32)
    at createPopper.js:215:14
    at Ra._setupElements (general.js:87:18)
    at Ra._show (step.js:404:10)
    at Ra.show (step.js:244:10)
    at Cc.show (tour.js:260:14)

Any idea why is this happening, and what can I do to fix it?

question

opened Mar 8, 2023 by canaryGrapher 1

Open

Bump rollup-plugin-filesize from 9.1.2 to 10.0.0

Bumps rollup-plugin-filesize from 9.1.2 to 10.0.0.

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies

opened Mar 6, 2023 by dependabot[bot] 0

Open

[Question] How can I disable click enent but enable contextmenu event on the target element

How can I disable click enent but enable contextmenu event on the target element

opened Mar 1, 2023 by XYZ204720310 0

Open

Modal overlay don't create an opening around the target after scrolling

Hello!

I have some issues with modal overlay. When next is fired but the element is out of viewport, shepherd.js scroll to element but the opening around the target is not create.

My configurations:

 const tour = new Shepherd.Tour({
      useModalOverlay: true,
      defaultStepOptions: {
        scrollTo: { behavior: 'smooth', block: 'center' },
      }
    });
    tour.addSteps(this.steps)
    tour.start()

https://user-images.githubusercontent.com/21287627/222006556-98d654f2-b864-45f5-99fc-0f0a2134792a.mp4

On the above video, charts title should be clarity like the first and second one. Someone could help me?

question

opened Feb 28, 2023 by bncunha 3

Open

Arrow position's incorrect with custom tooltip size

Thanks so much for this package!

I intend to have a custom width for my tooltips (e.g. 60% of parent) which I set via:

.shepherd-element {
  max-width: 60%;
}

When I do this though, the arrow gets misplaced

I've also tested this out on a regular web app (i.e. non-mobile) viewport

Is this the correct way to set the width?

question

opened Feb 26, 2023 by anonimitoraf 2

Vue Tour is a lightweight, simple and customizable guided tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.

An fantastic step-based site tour written with React

vue-tour - Lightweight and customizable tour plugin

Tour of Heroes (Vue 2.0) Tour of Heroes revue vue-router Airbnb eslint @aweber1Tour of Heroes (Vue 2.0): A Vue 2.0 port of the Angular 2.0 Tour of Heroes demo app. Highlights: ES6/7, render functions, JSX, revue (redux bindings for Vue), vue-router, Airbnb eslint, webpack. by @aweber1

C++ Introductory Tour. Click here to take the tour:

A tour of different data access approaches in .NET 5+.

Go Website (Official Tour in Thai)

Tourist Guide into your React Components

A tour through recommendation algorithms in python

A boilerplate for creating your own custom style guide

Vite SSR Plugin. Simple, full-fledged, do-one-thing-do-it-well.

jQuery feature tour plugin.

A simple, lightweight, clean and small library for creating guided product tours for your web app.

Write Through and Read Through caching library inspired by CacheMoney and cache_fu, support ActiveRecord 4 and 5.

users - Library for accessing Unix users and groups

The Python developer's guide

Modern Django: A Guide on How to Deploy Django-based Web Applications in 2017

Python best practices guidebook, written for humans.

A better way for new feature introduction and step-by-step users guide for your Flutter project.

The Mobile Security Testing Guide (MSTG) is a comprehensive manual for mobile app security development, testing and reverse engineering.

Web feeds/RSS "getting started" guide for new users.

Share this repo

Related Repos

Tours And Guides

1.2k

Simple, flexible tours for your app

Tourist.js Tourist.js is a simple library for creating guided tours through your app. It's better suited to complex, single-page apps than websites. O

Tours And Guides

🏆 The most expected has arrived, a package for Angular that facilitates us to improve the...

The most expected has arrived, a package for Angular that facilitates us to improve the experience of our users when guiding them in our interface

Tours And Guides

173

🏛️ Give tours of your Shiny apps

cicerone A convenient API to create guided tours of Shiny applications using driver.js, visit the website for more details. Usage Let's create a very basic Shiny app to demonstrate: it takes a text input and on hi

Tours And Guides

288

A simple, lightweight, clean and small library for creating guided product tours for your ...

Tourguide.js Simple, lightweight library for creating guided tours for your web, apps and more. A tour guide is a person who provides assistance, information on cultural, historical and contemporary heritage to peop

Tours And Guides

14.5k

A light-weight, no-dependency, vanilla JavaScript engine to drive the user's focus across ...

Driver.js Powerful, highly customizable vanilla JavaScript engine to drive the user's focus across the page No external dependencies, supports all major browsers and highly customizable Simple: is simple to

Tours And Guides

2.2k

Vue Tour is a lightweight, simple and customizable guided tour plugin for use with Vue.js....

Vue Tour Vue Tour is a lightweight, simple and customizable tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application. Table of Contents Getting Started

Tours And Guides

21.9k

A better way for new feature introduction and step-by-step users guide for your website an...

Intro.js v2.9.3 Better introductions for websites and features with a step-by-step guide for your projects. Where to get You can obtain your local copy of Intro.js from: 1) This github repository, using git cl

Tours And Guides

✅ Lightweight jQuery step wizard plugin.

A simple, lightweight jQuery step wizard plugin. Features Easy configuration Lightweight (2KB gzipped) Works in all major browsers including IE11+ Compatibility IE11+, Edge, Chrome, Firefo

Popular

Tours And Guides

11k

Guide your users through a tour of your app

Shepherd is maintained by Ship Shape. Contact us for web app consulting, development, and training for your project. Browsers support Edge Firefox Chrome Safari