Getting started with Bytes Route

Start your journey with Bytes Route by creating a free account and logging on to your account. No billing information is required.

In order to register, you need to provide your name, your email address, and a password.

After registering, log in to your new account. The Help Checklist will show you how to perform various tasks in order to get started and acquainted:

  1. Install the Bytes Route Chrome Extension. This will be your creation tool.
  2. Create your first product tour.
  3. Connect your domain with Bytes Route by adding the Bytes Route script code snippet to your web application.
Bytes Route help checklist

Password reset

In case you ever forget your Bytes Route account password, you can easily reset it by using this link

Installing the Chrome Extension

In order to build product tours on your web app, you first need to install our Chrome Extension. The Bytes Route Chrome Extension allows you to create and edit product tours directly on your website.

A Chromium-based browser is required to use the extension:

  • Chrome
  • Edge Chromium
  • Opera
  • Brave

On the Chrome Web Store page, press the Add to Chrome button to install the extension:

Bytes Route Chrome extension in Chrome Store

For advanced information on using the extension, you can read the Bytes Route extension docs.

Building product tours

After installing the Chrome extension, you can create your first product tour.

The Help Checklist from the Dashboard guides you through the steps you need to follow to build your tour:

  1. Open a new tab in your browser
  2. Navigate to your website
  3. Find and click the Bytes Route extension in the top-right corner of your browser
  4. Click on the Start Recording button in the extension
Creating a product tour step

Connecting to Bytes Route

You have to insert a code snippet (containing an HTML script) in your web domain to make the connection between your web app and Bytes Route. After this step, your product tours can be published on your web application.

To add the script to your web app follow these steps:

  1. Copy the code snippet for your current team, from the Dashboard
  2. Paste this script to your website
    1. in the head section
    2. in the body section if you want it to load after everything else
  3. Redeploy your website
  4. Check if the script is detected on your domain, in the Bytes Route Dashboard, by pressing Detect Script

Script example

While Team A is selected, in the dashboard you will find the script for this team. Notice that the ID of the team (12345) is embedded within the code snippet. The ID is unique for each team.

Installed script example

The Bytes Route script for Team A, in the dashboard, would look like this

<script id="brt-script" src="https://www.bytesroute.com/script.js?id=12345"></script>

Example of the Bytes Route script for a team with the id of ‘12345’.

Script Detector

The Script Detector contains the Bytes Route script for the current team. This can be copied and hooked to whatever domain you want the script to run on.

It also contains the list of domains that the script has been added to, so far.

The list of domains containing the script + the script snippet

Notice that if the script hasn’t been added to any domain, you will see a warning about this.

Notification that no domain has been detected to contain your script

Script adding methods

Learn how to install the Bytes Route script in one of the following environments:

  1. Installing the script directly in HTML
  2. Installing the script using WordPress
  3. Installing the script using Google Tag Manager

Programmatic Injection

For optimizing the page performance, you can delay the insertion of the Bytes Route script on your page until vital page components load. Find more information in the Running a tour on custom event docs.

Note: If you have tours set to launch automatically on page load, having the script injected programmatically may cause them to launch with a delay.