• Bytes Route logo

👩‍🏫 Getting Started

🛠️ 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 our free 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 publish it to your account, 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 other users to be able to run your newly created tour, you will need to add the Bytes Route script to your page.

To integrate tours in your page, follow the steps below:

1. Add our script CDN to your DOM:

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

2. (Optional) If you want to load tours only from a specific domain, use thebytesroute.executemethod with thesetDomainas the first argument and thedomainNameas the second argument:

bytesroute.execute ('setDomain', domainName)

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

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

  bytesroute.execute('setDomain', 'dev.mywebsite.com')

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.

3. Redeploy your website, and your users will be able to 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

🕹️ Making a tour trigger automatically

You can set an existing & integrated tour to launch automatically based on an a condition, time elapsed or the action of a user:

1. Use the bytesroute.execute method with run as the first argument, tourID as the second argument, and the options object as the third argument(optional):

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

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

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

2. You can find the Tour ID in multiple locations:

Creating end-screen - just after saving a newly created tour

creation end screen

In the list of tours, from your profile

list of created tours

On the tour's page

page of created tour

3. Done 🎉 Redeploy your website and the tour should start when the set events are triggered.