Implementation

Introduction

ReadSpeaker Enterprise Highlighting 2.5 is easy to implement. We have ready made plugins for a the most common open source CMS.
On this page we have displayed an overview of the steps you will should follow in order to get the most out of your ReadSpeaker implementation.

Demo

Here is a demo page of a standard ReadSpeaker Enterprise Highlighting 2.5 implementation.
Demo page of a standard implementation

How to implement

Manual Implementation

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.
Our recommendation are that the button is 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 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.

Plugin for Drupal 6.x

This plugin will add ReadSpeaker Enterprise Highlighting 2.5 to the pages of your Drupal blog or website.

Currently supported languages:

  • American English
  • British English
  • Dutch
  • French
  • German
  • Italian
  • Norwegian
  • Portuguese
  • Spanish
  • Swedish

To add the plugin, please follow these instructions closely:

  1. Download, install and enable the ReadSpeaker module on your Drupal website (preferably under sites/all/modules).
  2. Configure the ReadSpeaker module on your website at content management -> ReadSpeaker.
  3. Now ReadSpeaker Enterprise Highlighting 2.5 is ready to read your selected nodetypes on your Drupal website.

Drupal 7

This plugin will add ReadSpeaker Enterprise Highlighting 2.5 to the pages of your Drupal blog or website. Please note that this module only supports one language/one voice.

Currently Supported Languages

  • American English
  • British English
  • Basque
  • Catalan
  • Danish
  • Dutch
  • Faroese
  • French
  • Frisian
  • Galician
  • German
  • Greek
  • Hindi
  • Italian
  • Japanese
  • Korean
  • Mandarin Chinese
  • Norwegian
  • Portuguese
  • Russian
  • Spanish
  • Swedish
  • Turkish

To add the plugin, please follow these instructions closely:

  1. Download, install and enable the ReadSpeaker module on your Drupal website (preferably under sites/all/modules).
  2. Configure the ReadSpeaker module on your website at Configuration -> ReadSpeaker Enterprise Highlighting 2.5
  3. Set the necessary permissions under People -> Permissions
  4. Now ReadSpeaker Enterprise Highlighting 2.5 is ready to read your selected nodetypes on your Drupal website

EPiServer 5.x and 6.x

This solution will help you add ReadSpeaker Enterprise Highlighting 2.5 to the pages of your EPiServer website.

To use the solution, please follow these instructions closely:

  1. Download the zip file containging all important files by clicking on the button below.
  2. Unzip the file, you will find the following files inside it:
    • MainBody.ascx – An example on how you add the button into this file.
    • ReadSpeaker.episerverdata – Contains some requiered dynamic properties.
  3. MainBody.ascx – An example on how you add the button into this file.
  4. ReadSpeaker.episerverdata – Contains some requiered dynamic properties.
  5. Import the EPiServer datafile found in the zip file (contains the dynamic properties).
  6. Add the code for the button and the div that should be read (in this case rs_read_text) into MainBody.ascx (or similar file) like this: 
    <%@ Control Language="C#" AutoEventWireup="False" CodeBehind="MainBody.ascx.cs" Inherits="EPiServer.Templates.Public.Units.Placeable.MainBody" %> 
<div id="readspeaker_button1"> <a accesskey="L" title="Listen to this page using ReadSpeaker" href="http://app-eu.readspeaker.com/cgi-bin/rsent?customerid=<%= CurrentPage["rs_cid"] %>&amp;lang=<%= CurrentPage["rs_lang"] %>&amp;voice=<%= CurrentPage["rs_voice"] %>&amp;url=<%=URL %>" > 
<span> <span> <span>Listen</span> </span> </span> <span></span> 
</a> 
</div> 
<div id='rs_read_text'> 
<h1><%= Heading %></h1> 
<EPiServer:Property ID="Property1" PropertyName="MainBody" DisplayMissingMessage="false" EnableViewState="false" runat="server" /> </div>
  7. lease modify “Listen” to the corresponding translation for the language used on the page. Listen is found inside the Listen 
    <span> <span>Listen</span> </span>
  8. Add the link to the ReadSpeaker javascript (which is found in the documentation in our customer portal) into Header.ascx (or similar file)
  9. In edit mode, fill in your information into the following dynamic properties:
    • RS Customer ID – Your customer id.
    • RS Language – Your language(example: en_us).
    • RS Voice – Your voice (example: Paul).
  10. You are now finished!

Joomla 1.5

This plugin will add ReadSpeaker Enterprise Highlighting 2.5 to the pages of your Joomla website. It’s only possible to use one language and one voice with this plugin.

Currently supported languages:

  • Basque
  • Danish
  • Dutch
  • American English
  • British English
  • Finnish
  • French
  • German
  • Italian
  • Norwegian
  • Portuguese
  • Spanish
  • Swedish

To add the plugin, please follow these instructions closely:

  1. Download the plugin by clicking on the button below.
  2. Login to your Joomla administrator page.
  3. Select the Extensions -> Install/Uninstall menu and upload the zip file you just downloaded.
  4. Select the Extensions -> Plugin manger and select the “ReadSpeaker” plugin.
  5. Enable the plugin and enter your customer ID in the parameters to the right.
  6. Select your language and change any of the advanced settings if you want to.
  7. Save your changes. You are now finished!

Joomla 1.6/1.7/2.5

This plugin will add ReadSpeaker Enterprise Highlighting 2.5 to the pages of your Joomla website. It’s only possible to use one language and one voice with this plugin.

Currently supported languages:

  • Basque
  • Danish
  • Dutch
  • American English
  • British English
  • Finnish
  • French
  • German
  • Italian
  • Norwegian
  • Portuguese
  • Spanish
  • Swedish

To add the plugin, please follow these instructions closely:

  1. Download the plugin by clicking on the button below.
  2. Login to your Joomla administrator page.
  3. Select the Extensions -> Extension Manager and upload the zip file you just downloaded under the “Install” tab.
  4. Select the Extensions -> Plug-In Manager and select the “Content – ReadSpeaker” plugin.
  5. Enable the plugin and enter your customer ID in the parameters to the right.
  6. Select your language and change any of the advanced settings if you want to.
  7. Save your changes. You are now finished!

WordPress 2.x/3.x

This plugin will add ReadSpeaker Enterprise Highlighting 2.5 to the pages of your WordPress blog or website. It’s only possible to use one language and one voice with this plugin.

Currently supported languages:

  • Basque
  • Danish
  • Dutch
  • American English
  • British English
  • Finnish
  • French
  • German
  • Italian
  • Norwegian
  • Portuguese
  • Spanish
  • Swedish

To add the plugin, please follow these instructions closely:

For WordPress 2.7 or later

  1. Download the plugin by clicking on the button below.
  2. Login to your WordPress administrator page.
  3. Select the “Plugins” menu and select “Add New” and upload the zip file you just downloaded
  4. Select the “Plugins” menu and activate “ReadSpeaker Enterprise Highlighting 2.5”
  5. Select the “Settings” menu and select “ReadSpeaker Options” and enter your user code.
  6. Select your language
  7. Save your changes. You are now finished!

For WordPress 2.5 and 2.6

  1. Download the plugin by clicking on the button below.
  2. Unzip the download file
  3. Copy the file “Enterprise_expanding_hl_wordpress-2.x.php” and the “scripts” folder to your wordpress plugin directory [PATH_TO_YOUR_WP_INSTALLATION]/wp-content/plugins/
  4. Login to your WordPress admin
  5. Select the “Plugins” menu and activate “ReadSpeaker Enterprise Highlighting 2.5”
  6. Select the “Options” menu and select “ReadSpeaker Options” and enter your user code.
  7. You are now finished!