Recite Me Toolbar

Getting Started & Implementation Guide

This guide is designed to help you quickly and easily implement the Recite Me Toolbar on your website.
Our simple, step-by-step guide will walk you through choosing and designing your toolbar button, previewing how it will look on your website, and accessing the code you need to complete the implementation.

Step 1 of 5

What's your website built with?

This helps us point you at the easiest way to add your Recite Me button.

Step 2 of 5

What's your Client Key?

This is the unique key that connects your button to your Recite Me account.

This must match the region your Recite Me subscription was set up for — it isn't about where your visitors are. Not sure? Leave it as UK and ask your Recite Me contact.
Your Recite Me Customer Success team will have given you this — check your implementation pack if you can't find it, or contact Recite Me. You can add this later, but you'll need it before the button will work on your site.

Step 3 of 5

How do you want your button(s) added?

Most sites let us add a ready-made button for you — but if you already have links or buttons you'd like to trigger the toolbar instead, we can attach to those.

    Step 4 of 5

    Will mobile be the same as desktop?

    Some clients want fewer buttons on mobile to save screen space — for example 3 buttons on desktop but just 1 on mobile. If that's you, choose "Different" and you'll set each up separately.

    Step 4 of 5

    Which buttons do you want?

    Switch a button to In use to add it — you'll set its colour, position and text next.

    Step 5 of 5

    Get your code

    Here's your button, live on this page. Copy the code below onto your site whenever you're ready.

    Keyboard navigation

    Keyboard navigation is essential for people who cannot use a mouse or other pointing device. We recommend making your launch button the first tabbable element on your page. Would you like this added to your launch code?

    This places floating launch buttons at the start of your page's content. Buttons placed inside your own page content keep their chosen position. Check the tab order on your site after installation.

    📋 Copy This Code

    Add this code to your website, just before the closing </body> tag:

    <script src="https://cdn.reciteme.com/reciteme_toolbar_launcher.min.js" data-clientid="YOUR-CLIENT-ID"></script>

    The standard install — a single script tag with your options set as attributes on it.

    🌐 View on your site Expand Collapse

    Want to see your button in action before you add the code? Drag the Recite Launcher Test button below onto your browser's bookmarks bar to preview it on any page:

    1. Drag the Recite Launcher Test button below up onto your browser's bookmarks bar — it'll be saved as a bookmark of the same name.
    2. Go to your website (or any page you'd like to preview your button on).
    3. Click the Recite Launcher Test bookmark you just added.
    4. Your launch button appears on the page, exactly as your visitors will see it. *
    🔖 Recite Launcher Test

    * Some sites may show errors that stop the bookmark (and the launcher) from running.

    To allow the Recite Me toolbar and launcher to load, the website's domain owner needs to add *.reciteme.com to the site's Content Security Policy (CSP).

    🔒 Content Security Policy (CSP)

    To allow the Recite Me toolbar and launcher to load, the website's domain owner needs to add *.reciteme.com to the site's Content Security Policy (CSP).
    Live Preview

    Your launch button(s) will appear here.

    Also switches any button you're customising into its mobile styling, if it has any.

    Want something more?

    Looking for a full, custom multi-language experience, or a hand getting set up perfectly for your visitors? Your Customer Success Manager can tailor it with you.

    Talk to your Customer Success Manager

    🔒 Content Security Policy (CSP)

    To allow the Recite Me toolbar and launcher to load, the website's domain owner needs to add *.reciteme.com to the site's Content Security Policy (CSP).