The following guide will support you with installing the Recite Me toolbar onto your website within an I-Frame.
1) Please add the below code before the closing <body> tag on your website
var serviceUrl = "//api.reciteme.com/asset/js?key=";
var serviceKey = "";
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);loadScri pt(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();(autoLoad&&"false"!=_rc("Recite.Persist")||frag )&&loadService();
2) Now, add an appropriate event listener to your Recite button
You could do this through the use of a library such as jQuery, or natively
jQuery:
jQuery("#myButton").click(function(i,e){
loadService();
return false;
});
Native Javascript:
if(document.addEventListener){
document.addEventListener("DOMContentLoaded", function(event) { document.getElementById('myButton').addEventListener("click", function(){ loadService();
return false;
});
});
}else{
document.getElementById('myButton').attachEvent("onclick", function(){ loadService();
return false;
});
}
Options and extras
Recite options object
Recite has an extensive API behind it and many of it’s features can be configured through our options object which can be passed in during your implementation. Here’s an example of how that can be achieved:
var options = {
Tracker: {
Ga: {
enabled: true
}
}
};
The above would tell Recite to hook into your existing Google Analytics account and fire its usage event statistics straight through to that.
Listening for Recite load
Once Recite is loaded into the DOM and the Recite object becomes available, there are a whole host of additional options you can pass to Recite as well as a variety of events you can listen out for. You can listen for Recite becoming available by simply adding the below function into your implementation. Recite will check that this exists when it’s enabled and if so it will call it:
function _reciteLoaded(){}
You can then listen out for events such as preferences changing etc:
function _reciteLoaded(){
Recite.Event.subscribe('Preferences:load', function () {
Recite.Preferences.set("player.autoplay", false);
});
Recite.Event.subscribe('Preferences:reset', function () {
Recite.Preferences.set("player.autoplay", false);
});
}
Working with iFrames
If your website uses iFrames please follow the instructions below to enable Recite to work seamlessly with all frames. The main page (i.e. parent frame) will control all other iFrames.
Prerequisites
- You must have access to all frames as you will need to add Recite code to each frame
Implementation
1) Add Recite’s implementation code to each of your iFrames (see above)
2) Enable Recite’s frame updater and disable controls by passing the following option into your setup (on all frames)
Var options = {
-- Your existing options --,
FrameUpdater: {enabled: true},
Gui: {Notification: {suppress: true}}
}
3) Add Recite’s frame communicator code right below your recite implementation (on all frames):
-- Recite implementation code --
document.addEventListener("DOMContentLoaded",function(e){var
b=!1;if(window.top==window.self){var c={data:"recite_frame_enabler"};b=!0}else c={data:"recite_frame_parent_communicator"};window.top.postMessage(JSON.stringify(c),"*");wind ow.addEventListener("message",function(a){var d=JSON.parse(a.data);"undefined"!=typeof a.source&&(b&&"recite_frame_parent_communicator"==d.data?"undefined"!=typeof Recite&&null!=a.source&&a.source.postMessage(JSON.stringify(c),"*"):b||"recite_frame_enabler"! =d.data|| loadService())})});
Example of full implementation (Without iFrame support)
var serviceUrl = "//api.reciteme.com/asset/js?key=";
var serviceKey = "[MY_KEY]";
// Let's enable Google Analytics tracking
var options = {
Tracker: {
Ga: {
enabled: true
}
}
};
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);loadScri pt(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();(autoLoad&&"false"!=_rc("Recite.Persist")||frag )&&loadService();
jQuery("#myButton").click(function(i,e){
loadService();
return false;
});
Example of full implementation (With iFrame support)
var serviceUrl = "//api.reciteme.com/asset/js?key=";
var serviceKey = "[MY_KEY]";
// Let's enable Google Analytics tracking
var options = {
FrameUpdater: {
enabled: true
},
Tracker: {
Ga: {
enabled: true
}
},
Gui: {Notification: {suppress: true}}
};
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);loadScri pt(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();(autoLoad&&"false"!=_rc("Recite.Persist")||frag )&&loadService();
document.addEventListener("DOMContentLoaded",function(e){var
b=!1;if(window.top==window.self){var c={data:"recite_frame_enabler"};b=!0}else c={data:"recite_frame_parent_communicator"};window.top.postMessage(JSON.stringify(c),"*");wind ow.addEventListener("message",function(a){var d=JSON.parse(a.data);"undefined"!=typeof a.source&&(b&&"recite_frame_parent_communicator"==d.data?"undefined"!=typeof Recite&&null!=a.source&&a.source.postMessage(JSON.stringify(c),"*"):b||"recite_frame_enabler"! =d.data|| loadService())})});
jQuery("#myButton").click(function(i,e){
loadService();
return false;
});