• Bytes Route logo

👩‍🏫 Setup Guide

🛠️ Building your first application tour

ℹ️Creating a tour requires you to use a Chromium-based browser. Currently we support the following browsers: Chrome, Edge Chromium, Opera.

To start creating, follow the steps below:

1. Install ourfree extension

2. Navigate to the page you want your application tour to start on.

3. Open the extension by clicking the Bytes Route logoBytes Route logoin the top-right corner of the browser.

4. Start recording a new tour by clicking theStart Recordingbutton.

5. Select elements, buttons, links, texts, etc by hovering over them and right-clicking.

6. Add a description to each step.

7. Edit and tweak until you are pleased with the result.

8. When done, feel free to save it to your profile, by pressing theFinishbutton in the selection window or in the extension pop-up.

You will need to register and/or login in order to finalize this step.

🖥️ Integrating the tour in your page

In order for your users to run your newly created tour, the Bytes Route script needs to be added to your page. You can also select only certain tours to appear & customize their trigger behavior via other script methods.

📄Adding the script

Insert the following script element in your html:

<script src="https://bytesroute.com/script/latest.js"></script>

This is the bare minimum change that you need to do in order to have the bubble show in your page.

🌎Domain selection (optional)

Customize the bubble to display only the tours that match a specific domain with:

bytesroute.execute('setDomain', domainName)

Example of setting the bubble to only load tours from the domain 'dev.mywebsite.com' :

<script> bytesroute.execute('setDomain', 'dev.mywebsite.com') </script>

This can be useful when trying to test tours on the development version of your website.

This setting is optional. If you do not set this, it will run in default mode: loading the tours from the url it runs at.

👷🏽‍♀️Owner selection (optional)

Customize the bubble to display only the tours that match a specific owner with:

bytesroute.execute('setOwner', userID)

Example of setting the bubble to only load tours made by the user with the id of 0123456789:

<script> bytesroute.execute('setOwner', '0123456789') </script>

You can find your user ID on theprofile page:

Screenshot of the dashboard with the user ID

🕹️Automatic tour triggering (optional)

You can set a tour to launch automatically, either with or without a time delay. The tour can also be started once an event listener, that is hooked to it, is triggered.

Tour automation is done using:

bytesroute.execute('run', tourID, options)

Example 1: a tour with the ID=5e3a9116c7fdbc029005e326, that will ‘run’ once after a 5 seconds delay:

<script> bytesroute.execute('run', '5e3a9116c7fdbc029005e326', {once: true, delay: 5}) </script>

Example 2: a tour that will ‘run’ every time a button is clicked:

<script>
  document.querySelector(myButton).addEventListener("click", () => {
    bytesroute.execute('run', '5e3a9116c7fdbc029005e326', {once: false})
  }));
</script>

ℹ️You can get the Tour ID from multiple locations:

From the tour creation end-screen

Tour creation complete pop-up

From the tour's detailed page

Tour detailed view page

From the list of tours, on yourprofile page, by clicking the tour options menu (3-dots), and clicking Copy Tour ID

A Tour in list with the options menu expanded

🚀Launch & Test

Redeploy your website, and you should find the newly created tour in theTour Bubble.

ℹ️ The Tour Bubble is a small widget that will appear on the bottom-right corner of your page. Left-clicking will display a list of tours available for the current page.

Bytes Route script bubbleBytes Route bubble pop-up window