Guided Website Tour With Directional Arrows - jQuery Guides

Guides.js is an easy-to-use jQuery plugin that adds an intuitive, interactive, dynamic guided tour to your website.

It automatically scrolls the page, highlights related elements, and connects them with arrows accompanied by explanatory text. 

Great for product tours, step-by-step tutorials, or demonstrating the new features and functionalities of your site.

How to use it:

1. Download and load the Guides.js plugin's files.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Guides.js -->
<link rel="stylesheet" href="/path/to/guides.css" />
<script src="/path/to/guides.js"></script>

2. Create an element to trigger the tour. OPTIONAL.

<button id="trigger">Start</button>

3. Call the function on the trigger button and define an array of guide objects as follows.

$('#trigger').guides({
  guides: [{
    element: $('#title'),
    html: 'Welcome',
    color: '#fff', // text/arrow color
  }, {
    element: $('#cta'),
    html: 'A CTA button'
  }, {
    element: $('#action'),
    html: 'An intro'
  }, {
    element: $('#footer'),
    html: 'Footer',
    render: function(){
      // called before rendering
    }
  }]
});

4. You can also start the tour manually.

var myGuides = $.guides({
    guides: [
      // guides here
    ]
});
// start the tour
myGuides.start();

5. Set the distance between the explanatory text and the related element.

var myGuides = $.guides({
    distance: 100,
});

6. Overide the color of the explanatory text and the SVG arrow.

var myGuides = $.guides({
    color: '#fff',
});

6. More API methods.

$('#trigger').guides('start');
$('#trigger').guides('end');
$('#trigger').guides('next');
$('#trigger').guides('prev');
$('#trigger').guides('destroy');
$('#trigger').guides('setOptions', options);

7. Events.

$('#trigger').guides({
  start: onStartFunction,
  end: onStartFunction,
  next: onNextFunction,
  prev: onPrevFunction,
  render: onRenderFunction,
  destroy: onDestroyFunction
});

---

This awesome jQuery plugin is developed by ejulianova. For more Advanced Usages, please check the demo page or visit the official website.