This module provides Backdrop integration with Hopscotch by Linkedin.
Hopscotch is a framework to make it easy for developers to add product tours to
their pages. Hopscotch accepts a tour JSON object as input and provides an API
for the developer to control rendering the tour display and managing the tour
- Download the current, stable version from https://github.com/backdrop-contrib/hopscotch
- Download the current of Hopscotch at https://github.com/linkedin/hopscotch
and extract the contents. It should contain a
- Create a 'hopscotch' folder in ./libraries and copy the contents of the
distfolder into your
should therefore be found in ./libraries/hopscotch/js/hopscotch.min.js`.
- Enable the Hopscotch module and Libraries module
- Enable the Hopscotch UI module to view the demos and edit/add/delete tours
- Check that module is working by viewing the demo pages here: admin/config/user-interface/hopscotch/demo.
A full description of Hopscotch Tour features can be found at:
The Hopscotch module reads tours stored as Backdrop config files and loads the
necessary JQuery and CSS needed to provide guided tours. See the included config
for an example to the storage format.
The main Hopscotch module will detect all existing tour config files if they are
named in the format
- Tours with
auto_start = 1set will start on navigating to the tour path.
- Otherwise tours can be launched by providing a link created in the format
<?php print theme('hopscotch_start_link', array('tour_name' => 'manual_trigger')); ?>
Tour config files may have the following settings:
- title: A human readable title.
- description: A description of the tour.
- path: The path at which the tour is active.
- module: The module providing the tour.
- machine_name: A unique machine name.
- editable: (values 0 or 1) Whether the tour is editable in Tour UI.
- auto_start: (values 0 or 1) Whether the tour will start automatically on
navigating to the
- play_once: (values 0 or 1) For auto_start tours, whether the tour plays once,
or every time you navigate to the path.
- exported: (values 0 or 1) Whether this is a tour provided by tour module or
by another contrib module.
- content: (An array of tour steps)
Tour content(steps) may have the following values:
- optional: An array of options as found in http://linkedin.github.io/hopscotch/#all-step-options
- target: The CSS ID target for the step.
- title: The header for the popup tip.
- content: The body of the popup tip.
- placement: where the bubble should appear in relation to the target.
- weight: The weight of the tip. (Determines the step order.)
- View all tours at admin/config/user-interface/hopscotch to edit or delete.
- New tours are saved in a tour.tour.<machine_name> file in the site config
folder (in files//active).
- If providing a tour with your module, this config file should be copied to
the /config folder of the providing module then renamed to
tour.<your_module>.<machine_name> (also rename the "_config_name" key in the
This is useful if your wish your module to provide a guided tour of its
features. Hopscotch will automatically pick up your tour config.
- Exported tours can be set to be editable or not.
- Tours being created just for the use of the current site will be saved in
Hopscotch module's config folder. Careful not to mark them as not editable. If
this happens, the module should be disabled and the config file manually edited
to set editable to "1".
- Tour UI is not required for having site tours. Tours can be also written
manually following standard Backdrop config file rules.
This project is GPL v2 software. See the LICENSE.txt file in this directory
for complete text.
- Andy Shillingford (https://github.com/docwilmot/)
This module was based on Joyride JQuery for Drupal Site Tours created for Drupal by Mark Koester
("Drupal user markwk":http://drupal.org/user/1094790/)
at "Int3c.com":http://int3c.com and
sponsored by "MicroEntrepreneur.me":http://microentrepreneur.me