Simple Tour Guide

Description

Simple Tour Guide is an easy to use step-by-step onboarding user guide that lets you create an interactive guided tour for your visitors.
The plugin provides a great, neat and fast way to indroduce users to your product or service – by guiding them visually to different elements on your website.
An interactive user walkthrough is a powerful way to increase user experience and customer satisfaction. This plugin is based on Shepherd.js – an open-source lightweight vanilla js library for guided tours.
Customize the text, the number of popups (steps) and link to any DOM element through a friendly user admin interface.

Plugin Options

You can create a tour and add as many steps to it as you want from “Create a Tour” tab. You can add step title, step description, link the step to a specific dom element and add a custom class to it. You can also choose to display the tour only once or show it everytime you reload a page (test mode) and ask for confirmation when the close button is clicked. Another cool feature is the ability to choose on which pages to display the tour. If you want, you can also choose to display the tour to logged in users only and disable the rest of the site while the tour is active. You can also add a progress bar to show the users how many steps remain until the end of the tour and customize the colors of the step buttons and the progress bar via the “Style” tab.

Screenshots

  • Plugin settings page: add steps
  • Plugin settings page: tour options
  • Plugin settings page: style options
  • Plugin frontend

Installation

  1. Take the easy route and install through the WordPress plugin installer or download the .zip file and upload the unzipped folder to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

FAQ

How to add, edit or delete steps?

From the WordPress admin, go to Settings => Simple Tour Guide and add as many steps as you want.

Can I link a step to a page element?

Sure, you can! Inspect a page element with the browser dev tool (right click with the mouse => inspect element) and then add its selector in the “Step Position” field from “Create a Tour” tab. You can add class, id or tag selector like so: .class, #id, tag. If you do not assign a selector, that is also fine, the step will appear exactly in the middle of the screen.

Can I show the tour only once?

Absolutely! In fact, by default the plugin hides the tour when the user finishes or dismisses it. However, you can also choose to display the steps on every page reload (test mode) from the “Tour Options” tab.

How to show the tour guide only on one page?

Go to “Tour Options” tab, uncheck “Show the tour on all pages” box and copy the plugin shortcode [stg_kef]. Then, navigate to a page or post you want, click "edit" and paste the shortcode on the top of the post content.

How to customize the style of the steps?

Go to “Style” tab and customize accordingly. For additional customizations, you can use the .stg classname or add a custom class to each step from the “Create a Tour” tab. Go to Šppearance => Customize => Additional css and add your own custom styles there.

Can I create more than one tour?

The plugin currently supports only one tour, however you can add an additional tour. Check Shepherd.js documentation on how to do it, as well as the last question in this section (you would need to add some custom code to make it work).

Can I add a background overlay to disable the rest of the site while the tour is active?

Yes, this feature is available since version 1.03. All you need to do is check the option “Show modal background overlay when the tour is active” in the Tour options tab. This will disable any site interaction until the user has finished or dismissed the tour.

The tour stops when I link a step to an element that is not visible. What can I do?

This may happen when you link a step to a page element that is hidden with css on specific screen sizes. For example, a menu item on mobile that is hidden until the user opens the menu. If the user has not opened the menu yet, the tour might stop in the middle. Luckily, there are a few ways to handle this.

The easiest way to fix this is not to attach the step to the element and the step will appear in the middle of the screen.

Since version 1.04, you can skip a step if the element which is attached to it appears off-screen. All you need to do is go to “Tour Options” and add a tick to “Skip a step if a step is attached to an element but the element is not visible”.

Another solution could be to “detach” the element from its step for that screen size only. In this way, the step will appear in the center of the screen and the tour will continue to work just fine. Add the following css to Appearance => Theme => Customize:

@media(max-width:62em) {
    .stg[data-popper-reference-hidden]{
        opacity: 1 !important;
        visibility: visible !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: auto !important;
    }
    .stg[data-popper-reference-hidden] > .shepherd-arrow {
        display: none;
    }
}

The above code targets mobile and tablet users only and detaches a step that was linked to an element which is not visible.

Can I show the tour to logged in users only?

Since version 1.02 you can! You can check the option “Show the tour to logged in users only” in the Tour Options tab.

Can I run the tour inside the WP Admin?

No, the scope of this plugin is the site frontend only. If you need to display a tour on the admin pages, you can check the Custom Welcome Guide plugin.

Can I customize the tour beyond the existing options?

You can override the plugin’s default js file and enqueue your own:

function my_modified_tour() {
    wp_dequeue_script( 'simple-tour-guide' );
    wp_deregister_script( 'simple-tour-guide' );
    wp_enqueue_script( 'custom-tour', get_stylesheet_directory_uri() . '/assets/js/custom-tour.js', array(), '', true );
}

add_action( 'wp_enqueue_scripts', 'my_modified_tour' );

In this way, you will be able to create your own custom tour and get access to all the options provided by the Shepherd.js library.
Happy Coding!

Reviews

September 6, 2021
Lightweight and easy to use. You just need to edit a little CSS and then you're good to go. Thanks for the wonderful plugin.
July 19, 2021
Simple yet the best free tour guide plugin for WordPress. Suggestions for future updates: It would be a good idea to add a help icon on the front-end where users can click on to view the guide anytime they want. This can be useful if the guide is only set to show once.
May 5, 2021
This is absolutely brilliant. Simple but very very useful. Thank you so much Atanas!
April 19, 2021
That's exactly what I needed. Great idea. Thanks!
April 15, 2021
Great plugin for site owners who'd like to show around a specific features of their sites to first time visitors. Keep up the good work!
Read all 6 reviews

Contributors & Developers

“Simple Tour Guide” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Simple Tour Guide” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.0.7

  • Use one js file for all supported wp versions. Update translation functions.

1.0.6

  • Remove Freemius SDK. Upgrade docs. Minify shepherd js.

1.0.5

  • Integrate Freemius SDK

1.0.4

  • Add option to skip a step for better ux and rewrite sanitization function for backwards compatibility. Update docs.

1.0.3

  • Add option to show dark modal overlay to cover the site until the user has finished the tour.

1.0.2

  • Add option to show tour to logged in users only.

1.0.1

  • Refactor and optimize decrement count steps function. Hide the tour afrer the user finishes or dismisses it. Update css.

1.0.0

  • First publicly available version of the plugin. Update css.