Installing the script in HTML

Adding the script directly

Adding the script directly

1. Paste the Bytes Route script in the section of your index.html
   • Add it as the last script if you want it not to block any other more important scripts.
   • Add it as the last element if you don’t want it to block any other page elements loading.

Adding the script programmatically

This script-adding method is useful if you wish to restrict tour loading for certain users or to inject the script when certain events occur in your app.

This method requires some javascript to create a new HTML script tag. We will add an src attribute in which we link the custom script. We will also add an id of value ‘brt-script’.

Usage example

Example of injecting the Bytes Route script programmatically:

const s = document.createElement( 'script' );
const link = 'https://www.bytesroute.com/script.js?id=team_id';
s.setAttribute( 'src', link );
s.setAttribute( 'id', 'brt-script' );
s.onload = () => {
 // here you can add Tour Options
}
document.head.appendChild(s);

The Bytes Route script may be injected after a fulfilled condition or could be the response of a triggered event, like a mouse click or page load event.

We can create a promise returning function wrapper for the code above:

const initializeBytesRouteScript = () => {
  return new Promise ((resolve, reject) => {
    const s = document.createElement( 'script' );
    const link = 'https://www.bytesroute.com/script.js?id=team_id';
    s.setAttribute( 'src', link );
    s.setAttribute( 'id', 'brt-script' );
    s.onload = () => {
      resolve();
    }
    document.head.appendChild(s);
  });
}

We can then use this promise to execute the Tour Options or other application logic.

el.addEventListener('click', () => {
  initializeBytesRouteScript().then(() => {
    // here you can add Tour Options
  });
});