How to Use Walkthroughs
- 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 pop-up used to create and edit walkthroughs.
There are different components the builder, details are can be found below.
Walkthrough TitleHere you can find the title used when the Walkthrough was created
Minimize the builderIn order to see the page or move around, the builder can be minimized.
Walkthrough settingsIn here we can set the general settings for the Walkthrough.
You can find a detailed explanation below.
Exit WalkthroughClose the builder
Created stepsEach 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.
Zoom in/out on the stepsYou have a big Walkthrough? Zoom out to see all the steps!
View all created steps in the builderAdapt the view to see all the steps automatically.
Lock/Unlock stepsThis option will allow you to toggle between moving the steps and order or being locked.
Toggle between round and square line viewChange how the connecting lines look to see the connections better.
RefreshMove the steps back to the default position after moving them around.
Add new step / RecordingMore information below.
Play built stepsPlay the Walkthrough until the created step.
Update and close the builderDone creating? Save and close!
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.
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.
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
- Here the name of the step can be defined.
- "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.
- This is where you can see if the element is being found or if you need to Re-select it.
- 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.
- Show advanced options:
- Custom Selector: Here is where you can set a custom jQuery selector if needed.
- 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
- Limit to page: Only find the element if its present on the defined URL
- This is where you can see if the element is being found or if you need to Re-select it.
Selecting a step based on an element from a different page shows a message stating "element not found."
- 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)
- 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.
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 new button creates a button to advance on in a step instead of clicking on the selected 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
Here is where the button details can be filled and its action defined.
- 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.
- 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)
- Redirect to defines what is the next step. It can either be another step or end the Walkthrough.
- Trigger element event means the walkthrough will physically move onto its next step once a user selects the element.
Where to define the particular design of the step.
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 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.
General Walkthrough Settings
- Position defines the default place on the page where the balloons are going to be positioned in relation to the element.
- 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. 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.
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.
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
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.