Upgrading to Enterprise Highlighting 2.5


In this section we will go through the four most common update procedures.

Please note that the updating procedure may differ depending on how the previous version has been implemented and the number of customizations that has been made to the previous player.

Full update (recommended)
New design

Minimal update
New design

Classic skin update
Classic design

Customized update
Custom design

Full update (recommended)

 

 

This update modifies the design of both the Listen button and player. To make a complete update of the service both the code for the listen button and the link to the Javascript has to be updated.
This will make the player look like this:
Full update

Requirements

  • Change listen button code
  • Change link to Javascript

Change listen button code

Example of the current listen button code

<div id="readspeaker_button1">
	<a accesskey="L" href="http://app-[REGION].readspeaker.com/cgibin/rsent?customerid=[CUSTOMER_ID]&amp;lang=[LANGUAGE]&amp;readid=[READID]&amp;url=[ENCODED_URL]" onclick="readpage(this.href, 'xp1'); return false;">
		<img style="border-style: none" src="http://f1-[REGION].readspeaker.com/graphic/default/buttons/[LANGUAGE]/listen_[LANGUAGE].gif" alt="Listen to this page using ReadSpeaker" title="Listen to this page using ReadSpeaker"> 
	</a>
</div>
<div id='xp1'></div>

Example of the new listen button code

<div id="readspeaker_button1">
	<a rel="nofollow" class="rsbtn_play" accesskey="L" title="Listen to this page using ReadSpeaker" href="http://app-[REGION].readspeaker.com/cgibin/rsent?customerid=[CUSTOMER_ID]&amp;lang=[LANGUAGE]&amp;readid=[READID]&amp;url=[ENCODED_URL]">
		<span class="rsbtn_left rsimg rspart"><span class="rsbtn_text"><span>Listen</span></span></span>
		<span class="rsbtn_right rsimg rsplay rspart"></span>
	</a>
</div>

Change Javascript

Please note that the link to the Javascript may differ depending on where the Javascript is
hosted. If the script in the implementation is not hosted on the ReadSpeaker servers, please
contact support@readspeaker.com for specific instructions on how to update.
Example of link to the previous Javascript

<script src="http://f1-[REGION].readspeaker.com/script/[CUSTOMER_ID]/rs_embhl_v2_[LANGUAGE].js" type="text/javascript"></script>

Example of link to the new Javascript

<script src="http://f1-[REGION].readspeaker.com/script/[CUSTOMER_ID]/ReadSpeaker.js?pids=embhl" type="text/javascript"></script>

Minimal update

This update keeps the same Listen button design and modifies the player design. To make a minimal update of the service only the link to the Javascript has to be updated.
This will make the player look like this:
Minimal update

Requirements

  • Change link to Javascript

Change Javascript

Please note that the link to the Javascript may differ depending on where the Javascript is hosted. If the script in the implementation is not hosted on the ReadSpeaker servers, please contact support@readspeaker.com for specific instructions on how to update.
Example of link to the previous Javascript

<script src="http://f1-[REGION].readspeaker.com/script/[CUSTOMER_ID]/rs_embhl_v2_[LANGUAGE].js" type="text/javascript"></script>

Example of link to the new Javascript

<script src="http://f1-[REGION].readspeaker.com/script/[CUSTOMER_ID]/ReadSpeaker.js?pids=embhl" type="text/javascript"></script>

Classic skin update

When updating to the classic skin the link to the Javascript has to be updated. A customized Javascript and CSS have to be downloaded from the ReadSpeaker customer Portal and added as well.
This will make the player look like this:
Classic update

Requirements

  • Change link to Javascript
  • Download and add Javascript
  • Download and add CSS

Change Javascript

Please note that the link to the Javascript may differ depending on where the Javascript is hosted.
Please contact support@readspeaker.com for specific instructions on how to update.

Example of link to the previous Javascript

<script src="http://f1-[REGION].readspeaker.com/script/[CUSTOMER_ID]/rs_embhl_v2_[LANGUAGE].js" type="text/javascript"></script>

Example of link to the new Javascripts

<script src="http://f1-[REGION].readspeaker.com/script/[CUSTOMER_ID]/ReadSpeaker.js?pids=embhl&skin=ReadSpeakerClassicSkin" type="text/javascript"></script>
<script src="[YOUR_DOMIAN]/ReadSpeakerClassic.js" type="text/javascript"></script>

Add CSS

Example of link to the new CSS

<link src="[YOUR_DOMIAN]/ReadSpeakerClassic.css" type="text/css" rel="stylesheet" />

Customized update

This method requires basic knowledge in both Javascript and CSS in order to succeed with the customization. The customized update allows the skin to be customized in various ways. The player in the image below is a simple sample of how the player appearance can be changed.
Custom update

The listen button code and the Javascript link has to be changed as described in the full update procedure. It is then recommended to download our sample skin before following our skinning guide that is available here.

Requirements

  • Change listen button code
  • Change link to Javascript
  • Download and customize Javascript
  • Download and customize CSS

Example of customized Javascript used in example player

window.rsConf.ui.player = [
'<span>',
' <a href="javascript:void(0);" title="Pause">',
'  <span>Pause</span>',
' </a>',
' <a href="javascript:void(0);" title="Stop">',
'  <span>Stop</span>',
' </a>',
' <span>',
'  <span></span>',
' </span>',
' <a href="javascript:void(0);" title="Volume">',
'  <span>Volume</span>',
' </a>',
' <span>',
'  <span></span>',
' </span>',
' <a href="javascript:void(0);" title="Settings">',
'  <span>Settings</span>',
' </a>',
' <a href="javascript:void(0);" title="Close player">',
'  <span>Close</span>',
' </a>',
' <span></span>',
'</span>'
];

Example of a customized CSS used in example player

/* LISTEN BUTTON + ICON */
.rsbtn_sampleskin .rsbtn_play {
	float: left;
	margin: 1px 0;
}
.rsbtn_sampleskin .rsbtn_left .rsbtn_text {
	background: transparent url(ReadSpeakerSampleSkin.png) no-repeat scroll 0 0;
	padding-left: 20px;
}

/* PLAY/PAUSE BUTTON */
.rsbtn_sampleskin .rsbtn_pause {
	background-position: 0 -34px;
}
.rsbtn_sampleskin.rspaused .rsbtn_pause,
.rsbtn_sampleskin.rsstopped .rsbtn_pause {
	background-position: 0 -16px;
}

/* STOP BUTTON */
.rsbtn_sampleskin .rsbtn_stop {
	background-position: 0 -52px;
}