The following guide will support you with installing the Recite Me toolbar onto your Wix website.
1. Settings
From your main Wix website dashboard please go to "Settings". Using the main navigation on the right-hand side of the screen.
2. Custom Code
Please scroll down and under the Advanced section select "Custom Code".
3. Where to add code
In the “Body - End” section please click “Add Code”
4. Adding Recite Me custom code
Paste the code snippet here: Please paste in the Wix Recite Me loading code.
Please make sure you have entered your service key in line 2 and your button name in line 3 of the code.
<script type="text/javascript">
var serviceUrl = "//api.reciteme.com/asset/js?key=";
var serviceKey = "CLIENT KEY GOES HERE";
var toolbarButtonText = "Accessibility Tools";
var options = {}; // Options can be added as needed
var autoLoad = false;
var enableFragment = "#reciteEnable";
var loaded=[],frag=!1;window.location.hash===enableFragment&&(frag=!0);function loadScript(c,b){var a=document.createElement("script");a.type="text/javascript";a.readyState?a.onreadystatechange=function(){if("loaded"==a.readyState||"complete"==a.readyState)a.onreadystatechange=null,void 0!=b&&b()}:void 0!=b&&(a.onload=function(){b()});a.src=c;document.getElementsByTagName("head")[0].appendChild(a)}function _rc(c){c+="=";for(var b=document.cookie.split(";"),a=0;a<b.length;a++){for(var d=b[a];" "==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(c))return d.substring(c.length,d.length)}return null}function loadService(c){for(var b=serviceUrl+serviceKey,a=0;a<loaded.length;a++)if(loaded[a]==b)return;loaded.push(b);loadScript(serviceUrl+serviceKey,function(){"function"===typeof _reciteLoaded&&_reciteLoaded();"function"==typeof c&&c();Recite.load(options);Recite.Event.subscribe("Recite:load",function(){Recite.enable()})})}"true"==_rc("Recite.Persist")&&loadService();if(autoLoad&&"false"!=_rc("Recite.Persist")||frag)document.addEventListener?document.addEventListener("DOMContentLoaded",function(c){loadService()}):loadService();
var reciteMeButtonXpath = "//span[contains(., '" + toolbarButtonText + "')]";
var reciteMeButton = document.evaluate(reciteMeButtonXpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
if(reciteMeButton) {
reciteMeButton = reciteMeButton.parentElement;
}
if(reciteMeButton) {
reciteMeButton.addEventListener("click", function() {
loadService();
});
}
</script>
Name: Reciteme
Add Code to Pages: All pages - Load code once
Place Code in: Body - end.
5. Creating a launch button
Now it is time to add a button to launch Recite Me using your site editor. Firstly add your button to your desired location. We suggest the header section of your website.
Now select your button and press "Change Text".
What does this button say? - Please name your button “Accessibility Tools” or something similar to suit your audience and brand.
Where does it link to? - Select "None"
Please note the name of your button must match exactly with the name you have given it in line 3 of the Recite Me Wix Code.
“var toolbarButtonText = “Accessibility Tools”;”
Doing this will automatically link your button to the Recite Me code to launch the toolbar once clicked.