How to install the accessibility widget in Framer

Plugin installation

Step 1: Register your site and obtain a token

If you are installing the plugin for the first time, register (opens in a new tab) using Google, Facebook, GitHub or your own e-mail address and password.

After creating an account, go to the “My sites” tab and click the “Add site” (opens in a new tab) button.

In the form for adding a new site, enter the addresses of the websites where you want to use the token. If your site runs on a domain such as example.com and also www.example.com, add both addresses. Read more about this in the documentation (opens in a new tab).

Finally, click “Save” and copy the generated token from the “Your token” field.

Step 2: Add the DockWCAG widget in Framer

To add a widget in Framer, go to the list of pages, then from the context menu next to the page, click “Open Settings.” Then scroll to the very bottom to the “Custom Code” section and paste the following code in the “End of <body> tag” field:

<script>
    (function (d, s, t) {
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s);
        j.async = true;
        j.src = '//dockaccess.org/accessibility/' + t + '/start.js';
        f.parentNode.insertBefore(j, f);
    })(document, 'script', '_TOKEN_');
</script>
Copy text

Paste code and replace _TOKEN_ with your unique token that was generated in the previous step. For more on how to configure the widget, see the documentation (opens in a new tab).

Step 3: Preview the site

After adding the script, test your site to make sure the widget is properly installed and works as expected. Check all the widget's functions to verify that the installation was successful.