Simple Tour Guide is a lightweight WordPress onboarding plugin that lets you create intuitive step-by-step user tours with popups to guide people through your website. It is based on Shepherd.js – the best open-source JS library for welcome introduction guides / interactive user walkthroughs. No coding needed – just install the plugin, add steps and link them to the page elements via a friendly user admin interface.

How to add a tour?

Install the plugin from the admin dashboard => plugins => add new, then go to the Settings => Simple Tour Guide and customize accordingly. You can add as many steps as you want directly from the WordPress admin. Link the step to any page element and assign custom css class to it for additional customization (optional).

Image 1: Adding a tour with steps

What are the options?

You can create a tour with steps from Settings > Simple Tour Guide. You can add step title, step description, link the step to a specific dom element and add a custom class name to the step. You can also choose to display a tour only once or show it every time you reload a page (test mode) and ask for confirmation when the close or cancel button is clicked.

Image 2: Simple Tour Guide in action

Another cool feature is the ability to choose on which pages to display the tours. For this, you need to uncheck the option “Show tour on all pages” and add a shortcode [stg_kef] on the page you want to display the tour. If you want, you can also choose to display the tour to logged in users only. You can also add a progress bar to show the users how many steps remain until the end of the tour.

Image 3: Tour Options Tab

To change the appearance of the tour, you can adjust the settings in the “Style” tab. You have the options to change the look and feel of the tour (header background color, header text color, progress bar color and the color of previous / next / finish buttons.

Image 4: Style Tab