It provides a functionalities for site tour with model popup using javascript API.

This module support two ways to create 'Site Tour' popup.

1) Block Configuration
2) Render Element(API)

1) Block Configuration

  • This module also supports to create each tour items by adding new block from the "Site Tour" Block type.
  • Place the created custom block into content region and assign the block to page you want to display.
  • After installing this module, don't forget to enable the fields from Manage form display of "Site Tour" Block type and "Site Tour" Paragraphs type.

2) Render Element(API)

  • It provides a render element to generate a tour pop up from custom block.
  • This module require parameters to pass to the render element. Create a custom block plugin and pass the value in the below format as return value.
      $tour = [];
      $build['sitetour']['#data']['tour'] = [];
      $build['sitetour']['#type'] = 'sitetour';

      // First tour element

      $tour['id'] = 'sitetour';
      $tour['steps'][0]['target'] = '#slide-show'; // Dom element id
      $tour['steps'][0]['title'] = 'Slide show';
      $tour['steps'][0]['content'] = 'It includes five images. Please click the next button to view the next slide image.';
      $tour['steps'][0]['placement'] = 'bottom';
      $tour['steps'][0]['arrowOffset'] = 60;

       // Second tour element

      $tour['steps'][1]['target'] = '.search'; // Dom element class
      $tour['steps'][1]['title'] = 'Search Box';
      $tour['steps'][1]['content'] = 'Please enter the text in the search box and click enter button to search.';
      $tour['steps'][1]['placement'] = 'bottom';
      $tour['steps'][1]['arrowOffset'] = 60;
      $build['sitetour']['#data']['tour'] = $tour;
   

REQUIREMENTS

This module requires no modules outside of Drupal core.

INSTALLATION

* Install the Site tour module as you would normally install a
contributed Drupal module. Visit https://www.drupal.org/node/1897420
for further information.

CONFIGURATION

This module does not require any configuration.

You can find more information about this plugin in the below link,
- https://github.com/LinkedInAttic/hopscotch

MAINTAINERS

Current maintainers:
Elavarasan R - https://www.drupal.org/user/1902634

Supporting organizations: 

Project information

Releases