Split button implementation
Introduction
The split button is an alternative version of the standard webReader installation. With the split button, a player will open up separately from the listen button.
Demo
This is a demo of a split button implementation.
The player expands in a separate div instead of to the right of the button.
Implementation
The player consists of a link that looks like this:
<a href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=XXXX&lang=xx_xx&voice=XX&readid=[READID]&url=[ENCODED_URL]"
onclick="readpage(this.href, 'xp1'); return false;" data-target="xp1">Listen text or icon</a>Note: Remember to define your customer ID, language, voice, and readid/readclass.
The following div is required for the solution to work, as this is where the player will expand once the link above is clicked:
<div id="xp1" class="rs_addtools rs_splitbutton rs_preserve rs_skip rs_exp"></div>Description of the Implementation Steps
Requirements
- Add JavaScript
- Add Button code
- Define the reading area
- Add the page on how to use the listen function (recommended)
Add JavaScript
Place the script inside the head section, right before the closing, on the pages or webpage template where the application is to be implemented.
Please note that if you are using jQuery we recommend that our script is added after jQuery in the HTML code.
Add Button code
To implement the button, the button code is to be inserted inside the element of the pages where the application is to be implemented.
Add Player code
To implement the player, the player code is to be inserted inside the element of the pages where the player is to appear after the listen button has been clicked.
Our recommendation is that the button and the player are placed near the text that is to be read.
Define the reading area
You choose what section of your site you would like to have read and highlighted by giving that element the same ID as the value of the parameter &readid and/or &readclass in the query string of the ReadSpeaker call.
Add the page on how to use the listen function
Our recommendation is that you add a page to your website called, something like, “How to use the Listen function”. The purpose of this page is to let your visitors get the most out of the ReadSpeaker service by providing them with clear instructions on how to use of ReadSpeaker. We have ready-made templates in multiple languages which can be found in the Customer Portal that you can use for your website.