• Bytes Route logo

Documentation

Script Injection

The Bytes Route script can be added into your application directly or through a programmatic injection:

Direct method

This injection method is fitting, if you want your created tours to be available for your entire userbase. Copy the script generated for you, in the Dashboard, into your HTML, as a script element.

brt-script.png

Example of a script generated for a user

Programmatic injection

To restrict tour loading for certain users, or to inject the script when certain events occurred in your app, use programmatic injection.

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

Example of programmatic injection:

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

Check Tour Options for more info.

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://bytesroute.com/script.js?id=your_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
  });
});