How to Use Walkthroughs

Updated 1 month ago by Max Smith-Gee

Our interactive Walkthrough app is an automated guide that educates users by interactively presenting step-by-step instructions on product features. A walkthrough guides a user through a website by highlighting specific elements and providing handy tooltips.


How to Create a Walkthrough

  1. To create a new walkthrough, go to the Walkthrough App, then click the "new" button located top right on the page.
  1. On the new walkthrough page, you will see the Point & Click Walkthrough Recorder. Enter the exact site address of where you wish to create an interactive walkthrough and click "Go to builder >>"
For creating content over your own website, it is requested to embed the JavaScript snippet or download the extension.
In both cases, the Base URLs must be added to the configuration page.

Building a Walkthrough

Upon opening a new walkthrough in the dashboard, you will be redirected to your site page and can begin creating your walkthrough.

The builder pop-up is where you create and edit walkthroughs.


Builder

There are different components the builder, details are can be found below.

  1. Walkthrough Title
    Here you can find the title used when the Walkthrough was created
  2. Minimize the builder
    In order to see the page or move around, the builder can be minimized.
  3. Walkthrough settings
    In here we can set the general settings for the Walkthrough.
    You can find a detailed explanation below.
  4. Exit Walkthrough
    Close the builder
  5. Initial Step
    The first step in the Walkthrough is represented by the connection with the Go step. It can be changed at any time.
  6. Created steps
    There will be an icon for each step, and if there is any connection between them, a line indicating how they are connected will appear.
    There are three types of steps: tooltips, announcements, and hidden. Later we will discuss each in more detail.
  7. Zoom in/out on the steps
    You have a big Walkthrough? Zoom out to see all the steps!
  8. View all created steps in the builder
    Adapt the view to see all the steps automatically.
  9. Add new step / Recording
    Add a new step after selecting the type
  10. Play built steps
    Play the Walkthrough until the created step.
  11. Update and close the builder
    Done creating? Save and close!

Recording Mode

Recording mode is used to create a step. When you press the green plus button, you are prompted to choose the type of step. Depending on which step you select, you will be able to select the linked element.

Selecting an element stops the recording and switches to settings mode.

You can stop recording by pressing the red, flashing stop button.

You can activate the recording mode by pressing Ctrl + Shift + Q.
This shortcut comes in handy when the element is within a dropdown or menu.

Types of steps

Within the walkthrough, four different types of steps can be created. These steps can be arranged in any order.

Tooltips

Each of these steps is connected to an element on the page, which displays a balloon with a message relevant to that element.

Announcements steps

On the center of the screen, display a message that is unconnected to any element. This is ideal for general messages.

Hidden steps

Steps that require no user intervention are contained here. Typically, they operate between tooltips and announcements by setting up the appropriate conditions for them to appear. 

There are various actions that can be executed from this step.

Delay next step
Delay the next step by setting the amount of seconds between 0.1 and 300 (allowing decimals)
Navigate to
Bring the user to a particular page.
The URL can either refer to the full site (e.g. https://en.wikipedia.org/wiki/Coffee) or to a subdomain (i.e. /wiki/Coffee).
Both are the same in this case.
Wait until an element appears
Before moving on, ensure that one or more elements are visible.
Wait until an element disappears
Before moving on, ensure that one or more elements are not visible.
Wait until the user clicks on an element
The next step will be shown after the user clicks a particular element or elements.
Wait until the user hovers on an element
The next step will be shown after the user hovers a particular element or elements.

Logic Steps

Steps that split the flow into two paths based on whether an element is visible or not.

There can only be one logic per step. Neither OR nor AND are alternatives.

To enable hidden & logic steps, please contact support@simpo.io

Editing a Step

There are three icons located on the top right-hand side of an individual Step: Step Settings, add a button and close.

The WYSIWYG menu allows you to customize the text. You can align text, add headlines, change font size and color, and add pictures and videos.


Step Settings

Step Settings override all other settings and apply to only the step you have selected to edit.

There are two components General and Design.

General Step Settings

In the step settings, you can set how each step interacts and any customized design. This will override all other settings and apply only to the step you have selected for editing.

Step settings affect only the specific step you have selected and override Walkthrough Settings and Global Walkthrough Settings.
  1. Start Walkthrough from this step

Identify which step will be the first one in the Walkthrough. The flow will start at this point.

Only one step can have this option enabled and it will make it the 1st step of the Walkthrough.
  1. Selected Element

This is where you can see if the element has been found or if you need to re-select it.

You can re-select an element within the same step by clicking the "re-select" button. All previous step settings will be applied to the newly selected element.

Show advanced options toggle:

  • Custom Selector: Here is where you can set a custom jQuery selector if needed.
  • Limit to page: Only find the element if its present on the defined URL.
  • Disable element events: Stop any event associated with the selected element. (e.g. disable the option to click on the element)
If "Element found" is displayed, it means the selected element can be found on your current page.
The "element not found" message appears when the selected element is from another page or not found.
  1. Element Interaction settings

Here is where we decide how to proceed to the next step.

Actions

Determine if the interaction will lead the user to the next step or to another specific step based on a condition (advanced)

When

What interaction will the user have with the step?

  • Click: Clicking on the element itself will display the next step.
  • User changes the input: With this option, we can move forward when the user enters text in an input field.
  • Hover: Navigate to the next step when the user hovers over the element

Continue to step

Choose which step follows the interaction.

With the advance option, you can select the step for each definition of the condition.

Design step settings

Using the Design Step Settings, you can adjust step position, width and height, exposure and make adjustments using a custom CSS board.

  1. In the positioning feature, the walkthrough step will align in the way you've selected, but if there isn't enough room, it will move to another place.
  2. Upon selecting 'Exposure enabled', the element will be highlighted and a backdrop will appear over the rest of the page.
  3. You can alter the width and height of the tooltip.
  4. Design the step using custom CSS.
Check out the CSS for walkthroughs article for more information on defining a default design.

Once you have completed adjusting, customizing, and designing your first walkthrough step, press "done" to save changes.

Any changes made through Step Settings apply only to the step you have edited. Unless Step Settings are reset to Walkthrough Settings, they will remain edited this way even if Walkthrough Settings or Global Settings are altered.

Buttons

It creates a button that allows you to proceed in a step rather than interacting with the element itself.

Once we have created the new button, we can hover it to see its settings or delete it

When accessing the button settings we have 2 different tabs, General and Design

General

Here is where the button details can be filled and its action defined.

  1. Button text

It alters the text on the walkthrough buttons (such as next, go, continue, or done) used to advance to the next step. The default text is 'Next'.

  1. Button action

Determine what action will take the user to the next step.

Continue to the next step: will take the user to the following step.

Continue to the next step (Advanced): Defines a IF condition that can be used to take the user to different steps.

Open URL: Opens the added site in the same tab or a new tab

  1. Extra actions

Enabling this option will result in clicking on the selected element when clicking on the button.

Button Design

The text and background color of the button can be defined here

Check out the CSS for walkthroughs article for more information on defining a default design.

Walkthrough Settings

Walkthrough Settings can be found on the top right-hand side of the builder using the gear icon.

In order of authority: Step Settings, Walkthrough Settings, Global Settings. Unless Walkthrough Settings are reset to Global Settings, any changes made to Global Settings will not affect Walkthrough Settings.

General Walkthrough Settings
  1. Position defines the default place on the page where the balloons are going to be positioned in relation to the element.
If there is no space in the page for the default position, the balloon will move automatic to a direction where it can fit.
  1. Redirect a user to the page where the first element of the walkthrough was selected. As a default, walkthroughs always redirect to the starting page, since it's helpful for a user to experience the full journey, from A to Z.
    To remove this feature, simply uncheck it.
  2. Reset to global settings This feature resets Walkthrough Settings to the global configuration.

Design Walkthrough Settings
  1. Upon selecting 'Exposure enabled', the element will be highlighted and a backdrop will appear over the rest of the page.
  2. You can alter the width and height of the tooltips.
  3. Design the step using custom CSS.
Check out the CSS for walkthroughs article for more information on defining a default design.

Creating a Second Step

To create a second step after editing your first, press the green plus button on the builder.

When creating new steps, they will be linked to previous ones if they have a button. If the previous step has an action, it is recommended that you define it before adding the new step so the connection is automatic.

Developer Mode

Developer mode shows a "finder score," information about the step element including classes, ID tags, parents, and children, and is accessed by calling the developer mode function.

Use the function simpo.builder.setDeveloperMode() to enable Developer Mode.
You will need to refresh the page in order for it to take effect.

Calling the function above, a "Dev Mode" tab will appear in Step Settings.

The finder score shows how easy it is to locate your selected element. Anything below 85, the finder may not be comfortable locating.

Playing Walkthrough

Press "play" on the builder to preview your walkthrough. You can choose whether to play the entire Walkthrough or from the selected step.

If you have any questions, please contact us at support@simpo.io


How Did We Do?