Dynamic loading

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.

Configuration

The configuration-item lies in rsConf.params and should contain the link to the webReader.js-script along with any desired parameters. Here is an example:

window.rsConf = {params: '//cdn-[REGION].readspeaker.com/script/[CUSTOMER_ID]/webReader/webReader.js?pids=wr'};

Loading the script

The ReadSpeaker.js-script can now be added to the page. It should point to the same webReader.js-file as is set in the params-variable above, but any parameters previously included are not required.

If the Listen-button is also added dynamically, it should (preferably) be added before loading the script and running the initializer.

Initialization

After loading the ReadSpeaker.js-script it needs to be initialized. This can only be done when the ReadSpeaker.js-script has been fully loaded to the page. To initialize the script, run the function:

ReadSpeaker.init();

Dynamically adding a Listen button

Depending on when the Listen button is added, you will have to do one of the below actions to ensure the button retains full functionality:

- If the Listen button is added after ReadSpeaker.init() has been run, the function ReadSpeaker.init() has to be run again in order to add all controls to the player(s). Otherwise the toolbar may not appear correctly in the player.
- If the Listen button is added after ReadSpeaker.init() has been run and the core has been loaded, the function rspkr.ui.addClickEvents() needs to be run to make sure click events are added.

For more information contact our support.