The following guide will support you with installing the Recite Me toolbar onto your standard-built HTML website.
1. Add Recite Me code to your website
You will need to add the Recite Me code to every page of your website where you would like the Recite Me toolbar to be active.
Most websites have a common header or footer file which is a perfect place to add this.
The code is non-blocking and as such it can go either in your <head> or after your <body> - the choice is yours.
Simply download this code and insert it in the desired location:
2. Adding a Recite Me launch button
Recite Me needs to be launched by a user. Usually, this is done by clicking on a button on your web page. The location and style of this button are entirely up to you - it can be an image, a button, a link, or any other element you deem as fit for your website.
Next, you will need to give your button a class or an id that we can use to launch Recite. Let’s assume that you’re using an image, here’s an example:
<img src="myimage.png" alt="Launch Recite Me assistive technology" id="enableRecite" />
Lastly, we need to add an event listener to listen for a click on that image and load Recite. That’s simple too:
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('enableRecite').addEventListener("click", function() {
loadService();
});
});
Floating corner launch button
If you are unable to add a button to launch Recite Me, don’t worry!
We have some additional code that contains a button that is pre-placed on your web page which you can use. Simply ignore steps 1 and 2 and insert the code from this file instead:
Within this code, you are able to change the location of your floating Recite Me.
You will need to add the <style> tags into the <head> of your code but everything else can live in either your <head> or after <body> as described in step 1.
You can also use our standard button located at the link below, or use your own:
3: Additional functionality (Optional)
Occasionally you may be asked by the Recite Me team to add some additional code to your implementation to handle any custom functionality for your website.
If so, please include the below function after all of the code above and then insert your additional code here.
function _reciteLoaded() {
}