Introduction

If you are planning on adding the webReader service dynamically into your website, make sure to go through the steps below to ensure that the implementation contains all necessary configurations for a properly working player.

Loading the script + Configurations

Add the webReader.js-script to the page, usually done through adding a script tag:

<script src="https://cdn-[region].readspeaker.com/script/[customerID]/webReader/webReader.js?pids=wr" type="text/javascript" id="rs_req_Init"></script>

Note: The ID on the script link is required to ensure correct loading.
All parameters you wish to add should be added like so:

<script src="../webReader.js?pids=wr&disable=translation,dictionary">

If the Listen button is also added dynamically, it should (preferably) be added before loading the script

Dynamically adding a Listen button

Depending on when the Listen button is added, you will have to make sure to do the below action to ensure the button retains full functionality:

Run the function rspkr.tools.toggler.add() to add the tool menu toggler button to the player(s).
Note that this function needs to run if you add a button after the script has finished loading and executed.

Example

function addRs() {
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src = "//cdn-[region].readspeaker.com/script/[CUSTOMER_ID]/webReader/webReader.js";
   script.id = "rs_req_Init";
   document.head.appendChild(script);
}

Here is a Demo page showing this example.

Stop the player when swapping pages

If you find that the player keeps reading when a user swap pages, make sure that you run the following code:

rspkr.ui && rspkr.ui.destroyActivePlayer();

Next.js and React

It's possible to implement webReader using React or Next.js, we recommend the dynamic approach mentioned above. Here's one example of how to include the script in _app.js:

<Script
    id="rs_req_Init"
    strategy="lazyOnload"
    src="https://cdn-[region].readspeaker.com/script/[CUSTOMER_ID]/webReader/webReader.js?pids=wr"
      onError={(e) => {
        console.error('Script failed to load', e)
    }}
    />

For more information contact our Support.