How to Use Walkthroughs

Updated 2 weeks 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. Helping navigate a website through touch-points and tooltips, a walkthrough highlights particular elements on a site and prompts a user to take an action.


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.
The exact number of walkthroughs visible on your site can be shown using the blue circle next to "Walkthroughs."
  1. Once clicking the "new" button, you will be directed to the Point & Click Walkthrough Recorder. Copy & paste the exact site address of where you'd wish to create an interactive walkthrough and press "start here."
For the purpose of this article, we will be using Wikipedia.com
By default, walkthroughs always start by redirecting to the starting page because it's important for a user to experience the whole walkthrough journey, from A to Z

Building a Walkthrough

Once you've opened a new walkthrough in the dashboard, you will be redirected to the site page and can begin creating your walkthrough through the builder.

The "builder" is the pop-up used to 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. Created steps
    Each step is going to have an icon showing the step and if there is any connection between them a line and how they are connected is gong to appear.
  6. Zoom in/out on the steps
    You have a big Walkthrough? Zoom out to see all the steps!
  7. View all created steps in the builder
    Adapt the view to see all the steps automatically.
  8. Lock/Unlock steps
    This option will allow you to toggle between moving the steps and order or being locked.
  9. Toggle between round and square line view
    Change how the connecting lines look to see the connections better.
  10. Refresh
    Move the steps back to the default position after moving them around.
  11. Add new step / Recording
    More information below.
  12. Play built steps
    Play the Walkthrough until the created step.
  13. Update and close the builder
    Done creating? Save and close!

Recording Mode

Recording mode is the process of creating a walkthrough. By pressing the green plus button, you are prompted to select an element of your site as the first step of your walkthrough.

By selecting an element, recording mode stops and switches to settings mode.

To quit recording mode, press the flashing, red stop button.

Once the plus button is selected, it will appear as a red close button and all other components of builder will be minimized until a new step is inserted.

Step editing

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

The text can be changed and customized from the top menu to align text, add headlines, alter font size and color, add links and pictures or videos.

Recording mode involves building the walkthrough and settings mode involves describing and editing each step.

Step Settings

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

There are two components of Step Settings; General and Design.

General Step Settings

In General Step Settings, you choose how your specific step will be accessed, closed, and displayed.

Step settings affect only the specific step you have selected and override Walkthrough Settings and Global Walkthrough Settings.
Step General
  1. Step Settings
    1. Here the name of the step can be defined.
    2. "Make this the entry step" option marks the first step of the Walkthrough.
      Only one step can have this option enabled and it will make it the 1st step of the Walkthrough.
  2. Element
    1. This is where you can see if the element is being found or if you need to Re-select it.
      1. To re-select an element in the same step, click the "re-select" button and all previous step settings will be saved to the newly selected element.
    2. Show advanced options:
      1. Custom Selector: Here is where you can set a custom jQuery selector if needed.
      2. Ignore text: If the element is changing the text (The user name for example), setting this option will ignore the text when looking for the element
      3. Limit to page: Only find the element if its present on the defined URL
"Element found" means the selected element is found and accessible on your current page. 
Selecting a step based on an element from a different page shows a message stating "element not found."
  1. Element event

Here is where we define how the step is going to be triggered. Meaning, how we are going to move to the next step.

  • Don't use element events: The only 2 ways to move forward are closing the step or creating buttons in the step (More information below)
When selecting the below options, Redirect and Redirect to fields will appear. From there we can choose if we want a particular segment to move and what is the next step or if we want to finish the Walkthrough
If the next step is triggered by any of the below actions, we first need to create the step and then go back to the previous one and set the Redirect to -> The new step
  • Click: The next step will appear when the user clicks on the element itself.
  • Highlight: Will make focus on the step. In order to move forward we need to add button on the step.
  • Right Click: Next step will trigger when right clicking on the element
  • User Type: If we selected an text input field, we can use this option to move forward when the user writes in it.
Design step settings

In Design Step Settings, you can change step position, alter width and height shape, and make adjustments using the custom CSS board for your selected step.

The positioning feature will align the walkthrough step in the way you've selected, but if there's not enough room, it will move the step to another area.

In the "Advanced" section of design you can alter the width and height and customize your step using the CSS board.

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.

Let's play with Design settings and make the most obvious changes to see exactly how Step, Walkthrough, and Global Settings work.

Here we have altered the width and height of our first step, as well as changed the color to light blue. Step 1 will remain light blue even though, in Walkthrough Settings, the default is white. Step Settings must be reset to Walkthrough Settings for Step 1 to have the same features.


Add button

Add new button creates a button to advance on in a step instead of clicking on the selected element itself.

Users have a better learning experience when clicking on elements themselves, as opposed to the "next" button.

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 changes the walkthrough text button used to progress onto another step (e.g. next, go, continue, or done). "Custom selector" overrides the builder's algorithm and uses whichever class, ID, or tag was inputted instead. "Dependency" uses CSS code to override the builder's algorithm and locates an element through the inputted data.
  2. Redirect defines if the button should appear only for a pre-created segment. This allows to add conditions to define the next steps. (Eg. Move to specific step if an element is visible in the page)
  3. Redirect to defines what is the next step. It can either be another step or end the Walkthrough.
First all the steps need to be created and later connected either by a button or element events.
  1. Trigger element event means the walkthrough will physically move onto its next step once a user selects the element.
Both Redirect to and Trigger element event can be used at the same time and have different outcomes.
Design

Where to define the particular design of the step.

The step design will override any general looks.

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.

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.

Walkthrough Settings

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

Settings authority goes in order of: Step Settings, Walkthrough Settings, Global Settings. Meaning, any changes made in Global Settings will not affect Walkthrough Settings until they are reset to Global Settings.

Settings authority goes in order of: Step Settings, Walkthrough Settings, Global 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. Start by redirect is a feature that will redirect a user to the starting page of a walkthrough, given that the user selected the walkthrough from Search Bar on a completely different page. By default, walkthroughs always start by redirecting to the starting page because it's important for a user to experience the whole walkthrough journey, from A to Z. That being said, this feature can be removed by simply unchecking it.
  2. Similar to Step Settings, "reset settings" is a feature that will reset Walkthrough Settings to Global Settings.

Design Walkthrough Settings

In the design tab of Walkthrough Settings, you have the option to enable expose. This option is only available for change in Walkthrough Settings because it would make less sense if only one or a few steps had the expose, and not the rest.

Expose option highlights the step and element, blocking the rest of the elements.

The rest of design is identical to that in Step Settings. You can change the position, alter width and height shape, and make adjustments to the custom CSS board.

The changes made in Walkthrough Settings apply to all steps in a walkthrough. Only exceptions are for the ones with altered Step Settings that haven't been reset to Walkthrough Settings.

Creating a Second Step

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

When creating steps, they are not automatically connected. This action needs to be done after creating the next step as Simpo Plus provides the option to create different types of connections

We recommend designing the Walkthrough before creating the steps so there is clear understanding of what elements needs to be selected and how the flow is going to work.

Deleting a Step

Deleting and adding steps can become confusing, especially when it comes to a multi-step walkthrough. In builder, each step is labelled in the order of when it's made, therefore, deleting or adding steps will change the number label before/after it.

Playing Walkthrough

To preview your walkthrough, press "play" on builder. Once satisfied, press "save" and name it, if you haven't done so already.

To continue reading about Walkthroughs in the dashboard, click on the link here for the next article.


How Did We Do?