Guidethrough on-screen guidance (or simply a Guidethrough) is a sequence of steps that make up a process through your web application or website.

A single Guidethrough can have any number of steps and each Guidethrough guides your users through the sequence of steps for processes in your live web applications or websites.


To create Guidethroughs you will use the Guidethrough Developer Chrome Extension.


Open your Chrome browser and, if this is your first time using Guidethrough, then you will see the Guidethrough Developer Chrome Extension login screen.

Login with the credentials that you used at signup and the Developer extension sidebar will open. 


  • If you have used your Guidethrough Developer Extension before - and it is not already open or minimised - then click the G icon which is located in the top right of your Chrome toolbar.

This will turn the extension on and the Guidethrough Developer Chrome Extension will become visible as a sidebar on your Chrome browser’s left hand side.

If the extension does not open, then this means that you had previously logged out and so will need to login again.

The login screen will show in this case so just login with the credentials that you used at signup.

  • If you had minimised the Guidethrough Developer Chrome Extension when you last used it, then simply click on the G icon on the top left edge of your screen to open the sidebar again.


When the Guidethrough Developer sidebar is open, it opens at your Homepage.

The Homepage lists all of the Guidethroughs that you have already created and also indicates which have been published by changing the Guidethrough icon for published Guidethroughs to blue (grey icon indicates unpublished status). If this is the first time use of your Guidethrough Developer Chrome Extension then the Homepage list will of course be empty.

If your role in Guidethrough is that of Administrator or Content Manager, then you will also be able to view Guidethroughs and Resources created by other Guidethrough Developers within your organisation's Guidethrough account (see Guidethrough Roles and Permissions for more information).


From the Homepage you can create your Guidethroughs.

1. Navigate to the web application (or website) for which you wish to create a Guidethrough

2. When at the page where the first step of the Guidethrough will begin from, to start creating your Guidethrough click on the "+ Create" icon in the Homepage or the + icon on the bottom right edge of the Guidethrough Developer Chrome Extension sidebar;



3. At the next screen, select Guidethroughs to create a new Guidethrough



4. At the screen that now shows, you can choose to give your Guidethrough a name.

Simply click into the Guidethrough name field and start typing.



Usually you would name the Guidethrough after the specific process name that the Guidethrough steps will follow (although you can simply accept the default name and move straight to step capture if you prefer - the Guidethrough name can be changed afterwards).


5. Now click on the step+ icon at the bottom right edge of the Guidethrough Developer Chrome Extension sidebar to start adding steps to your new Guidethrough;


6. Once you've clicked the add step button (the step+ icon), Guidethrough is now in capture mode.

When in capture mode, as you move your mouse over the web application (or website) page where you wish to create your new Guidethrough's first step, you will see that Guidethrough will be placing a red box around the screen elements on that page as you move.

This visual indicator enables you to then determine which screen element you want the step to be anchored to.



7. Guidethrough can create process steps (where there is an action that the end user needs to do at that step, such as "Click on the..") or a modal (pop-up) informational step (where the end user doesn't need to do anything on that screen but where there is additional information that would be helpful to them at that step).

To create a process step, select the screen element and click the process step tab when the red box has it highlighted. Tip: you can also use the F8 button to capture a process step.


To create a modal step, select the screen element and click the modal step tab when the red box has it highlighted.

Tip: you can also use the F9 button to capture a modal step.


Guidethrough then captures the details of that element - including it's name and other text if that's available - and then opens the Edit Step screen. At the Edit Step screen, the fastest way to continue on and add more steps is to simply accept the default information that Guidethrough has captured, add some explanation or instructional text in the Description box (although that's completely optional) and then just click on the step + icon again to save this step and add the next step (and so on until you have captured all of the steps for this Guidethrough).

You can always come back after the Guidethrough has been created and edit the steps, text, formatting or behaviour as preferred.


If however you wish to make changes or add more information to each current step as they are being created, such as;

a) Recapture the screen element to which the step is anchored

b) Edit the step's name

c) Format the step Description/Instruction text

d) Add an external link to text in the step Description/Instruction

e) Add or change the step Description or Instructions that end users will see when the Guidethrough is published;

and Change the Behaviour of how this step will play by changing;

f) Position of where the step will display relative to the element to which it is anchored;

g) Trigger by which this step will display

h) Navigate to the previous or next Step in the Guidethrough


Then you can make these changes at the Edit Step screen:



After you've edited the step and made the changes you want, click Save to save your changes and return to the parent Guidethrough for this step.

If you decide that you don't wish to edit the step, click Cancel to return to the parent Guidethrough for this step.


8. To continue adding steps to the Guidethrough, click on the step+ icon and the current step will be saved and Guidethrough will again be in capture mode ready to capture the next step.

Continue as above for all of the steps you wish to create for this Guidethrough.


9. When finished, click Save to save the last step which takes you back to the list of all steps in your new Guidethrough.


10. From here, you can now choose to Preview your just-created Guidethrough so that you can see how it will play and look for your end users when it's published.

Click on the Preview icon:


Which is located to the right of the Guidethrough's name:



Preview will then navigate to the page where step 1 was created, display step 1's bubble and then continue on through the subsequent steps of the process.

When Previewing the steps you manually navigate through the Previewed Guidethrough by clicking on Next or Previous buttons on the Previewed step bubble




11. Click Save again and now your new Guidethrough will be saved into your Homepage's list of Guidethroughs.



12. Now that you have created your Guidethrough you can Publish it so that it will be available for end users to play.


If this is the first time you have used Guidethrough, once you’ve created Guidethroughs, you will want your end users to be able to view and play them.

To do this, you first need to choose a deployment method for your end users.


The deployment method you choose will largely be governed by whether or not you have access to your web application or website's HTML code.

If you can access the HTML code then you would be best choosing the Guidethrough code snippet deployment method.

If not, then you would choose the Player Chrome Extension deployment method.


Whichever deployment option you choose, this is a first-time use task only.


Also, the downloadable docx end user training guides that Guidethrough creates are done at the same time as the Guidethroughs are produced.

To download training guides see - How to create end user training guides using Guidethrough