Adding Recite Me to your project pages and public portal

Recite Me is an assistive technology that enhances website accessibility for users with disabilities. This guide will help you integrate Recite Me into your PublicInput platform by embedding the necessary script directly into your site.

Embed Recite "Floating Button" and Toolbar on PublicInput public pages

To activate Recite Me on your PublicInput site, you need to embed the Recite Me script into the HTML footer of your site. This script should be added directly within a script block in the common header or footer section to ensure it loads on every page where the accessibility toolbar is needed.

Where to Place the Scripts

You'll install the Recite Me base script on your footer for project pages and the public portal in two places. Start by heading to the main account settings page.

Custom Styling tab -> Custom Footer Block: Use this location to ensure the script populates to the project pages.
Public Portal tab -> Edit Portal Page -> Custom Footer Block: Use this location to ensure the script is included across different pages of your public-facing portal.

On both footer blocks you'll add the following code block, which includes scripts and styles to implement the toolbar and floating button.

Floating Button Script, Toolbar Script and Style block

<script> 
</script> 

<style> 
#reciteme-button { /* Button Styling and Placement */ 
background: #00344c; 
width: 100px; 
height: 100px; 
bottom: 14px; 
right: 14px; 
position: fixed; 
border-radius: 50%; 
z-index: 100; 
cursor: pointer; 
} 
#reciteme-button:hover { /* Hover Color */ 
background: #e9322e; 
} 
#reciteme-button img { /** Button Image Size */ 
width: 70px; 
height: 70px; 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
} 
</style> 

<script> 
// Location of your button image: 
var buttonSrc = 'https://publicinput.com/img/fdsjjovnseasvmzvhjly';
var serviceUrl = "//api.reciteme.com/asset/js?key=";
var serviceKey = "CLIENT KEY GOES HERE";
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();
// Floating Button: 
function _reciteLoaded() {
    if (reciteMeButton && reciteMeButton.parentNode) {
        reciteMeButton.parentNode.removeChild(reciteMeButton);
    }
}
var reciteMeButton;

function _createReciteButton() {
    var buttonParentSelector = 'body';
    var buttonContainer = document.createElement("div");
    var buttonImage = document.createElement("img");
    var buttonAlt = "Recite Me accessibility and Language Support";
    var buttonTitle = "Launch Recite Me";
    buttonContainer.setAttribute('id', 'reciteme-button');
    buttonContainer.setAttribute('alt', buttonAlt);
    buttonContainer.setAttribute('title', buttonTitle);
    buttonImage.setAttribute('alt', buttonAlt);
    buttonImage.setAttribute('title', buttonTitle);
    buttonImage.setAttribute('src', buttonSrc);
    buttonContainer.appendChild(buttonImage);
    var buttonParent = document.querySelector(buttonParentSelector);
    buttonParent.appendChild(buttonContainer);
    buttonContainer.addEventListener("click", function() {
        loadService();
        return false;
    });
    reciteMeButton = buttonContainer;
}
_createReciteButton();
</script>

Note: Be sure to replace "CLIENT KEY GOES HERE" with your key.

Test the Integration

Ensure that the integration works as expected:

Refresh your public site and click the newly added Recite Me button.
Check that the toolbar appears and functions correctly on various pages.

Additional Tips

Floating Button Option: If adding a custom button is not possible, Recite Me offers scripts that include a pre-placed floating button, which could be an alternative.
Customizing the Button: Use CSS to ensure the button aligns with your site’s aesthetics.

For more detailed customization or assistance, refer to the Recite Me documentation or contact their support team.