Creating a Walkthrough
- How to Create a Walkthrough
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
- To create a new walkthrough, go to the Walkthrough App, then click the "new" button located top right on the page.
- 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."
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 bar on the bottom of your screen used to create and edit walkthroughs.
The vertical ellipses located bottom-right of the builder includes three settings; minimizing builder, exiting builder, and returning to the dashboard.
The builder has two modes, recording mode and settings mode.
Recording mode is the process of creating a walkthrough. By pressing the blue 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.
There are three icons located on the top right-hand side of an individual Step: text changes, Step Settings, and a close button.
In text changes, you can customize and align text, add headlines, alter font size and colour, and add links.
There are two types of settings accessible through builder; Step Settings (per individual step) and Walkthrough Settings (per walkthrough).
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.
"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."
In Step Settings, you see the same message and can click the page on which the element is located.
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.
Even if the same element is accessible from a different page, the page you have selected it on to create a step is the only page the element will be found on if "limit to current page" is checked off.
Finder is responsible for locating step elements on a page so when "ignore text" is selected, the finder ignores any text included in an element and only focuses on the location.
The "Advanced" section provides different advancement features, a custom CSS board, custom step selection, and more.
Different ways a user can move forward on a walkthrough include, directly clicking on or selecting specific elements, typing in a search bar or login, enabling a custom CSS feature, or simply clicking the "next" button.
"Show next button" uses a button to advance on in a step instead of clicking on the selected element itself.
"Advancing on element event" means the walkthrough will physically move onto its next step once a user selects the element. "Advance when user types" is used for search bars or logins where the walkthrough progresses to its next step once a user finishes typing. "Advance on custom function" is used to input custom walkthrough functions and is a tech-savvy way of creating different advancements.
"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.
An error message can be added in case you think a step may fail. There may be a step requiring specific content that some users don't have resulting in a step fail which then displays your error message in the bottom-right corner.
"Event" chooses the type of action the computer will perform to advance on a step. A "legacy click" is an up-and-down button movement, a "click" can also be an up-and-down movement or tap to click, "focus" focuses on the element but does not require a user to click, and "right-click" is simply, a right-click.
"Optional step" enables a skip element on a selected step. If this feature is enabled, step elements that cannot be found will be skipped instead of having the whole walkthrough fail.
Finally, found at the bottom of the general page is a "reset settings" option that will reset the Step Settings back to Walkthrough Settings.
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.
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 colour 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.
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.
Calling the function above, a "Dev Mode" tab will appear in Step Settings.
Walkthrough Settings can be found on the 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.
General Walkthrough Settings
In "General," you can title your walkthrough, add additional titles, and customize, design and alter elements.
Add additional titles that are similar or relate to the walkthrough instruction so that a user who does not know exactly what they are looking for, can still find help.
To add a title, click the blue plus button and type in as many additional titles as you feel would suffice in assisting to locate your walkthrough. To remove a title, click the red trashcan icon.
"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.
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 or add a progress bar. These options are only available for change in Walkthrough Settings because it would make less sense if only one or a few steps had the expose or progress bar enabled, and not the rest.
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.
Let's make a design change in Walkthrough Settings to demonstrate the authority that Step Settings has.
Although we have changed the colour, width and height of all steps in Walkthrough Settings, our first step remains the way we designed it in Step Settings.
Audience Walkthrough Settings
The "Audience" setting targets specific areas of your site with a walkthrough.
"Audience" has several options regarding where a walkthrough will be shown, who will see it, what browser or platform it will be accessible from and more. Given all of these possibilities, this component requires more explanation and is accessible in a separate article here.
To indicate which walkthrough has an audience, you'll notice a red circle attached to the respective walkthrough title in Dashboard.
Creating a Second Step
To create a second step after editing your first, press either the "next" button on the first step to prompt the builder, or the blue plus button on the builder.
To differentiate between steps in the builder, the step number will be enlarged when selected.
Step 2 of your Walkthrough will have the design features we customized in Walkthrough Settings.
Adding a Step In Between Two Steps
You can add a step in between another by hovering over the right-facing arrow found between each step. Hovering over this arrow will enable a small plus sign to appear, and upon clicking this, you will be prompted to select a new element of the page.
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.
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.