How to install the Evolving Accessibility Widget

WordPress

1. With a plugin: install a plugin that adds code to the site header (search the plugin directory for “header and footer code”), paste the code into its header field and save.
2. Or with a child theme: add the code to the wp_head action in your child theme's functions.php, as in the example below. Never edit the parent theme: its updates overwrite your changes.
3. If you use a caching or optimization plugin, exclude widget/v1/evolving.js from its “delay JavaScript” and “combine JavaScript” options, then clear its cache.

<?php
// In your child theme's functions.php (never in the parent theme)
add_action( 'wp_head', function () {
	?>
	<script src="https://ada-expert-web.vercel.app/widget/v1/evolving.js"
	        data-site-key="YOUR-SITE-KEY"
	        data-statement-url="<?php echo esc_url( home_url( '/accessibility-statement/' ) ); ?>"
	        async></script>
	<?php
} );

WordPress.com websites need a plan that allows plugins or theme code.

• WordPress: Child Themes
• WordPress: the wp_head action

Shopify

1. In your Shopify admin, go to Online Store, then Themes. Next to your current theme, open the actions menu and choose Edit code.
2. Open layout/theme.liquid, paste the code just before </head> and save.
3. Repeat these steps whenever you publish a different theme.

Shopify's checkout pages do not load theme code, so the widget does not appear there.

• Shopify Help Center: Editing theme code

Wix

1. In your site's dashboard, go to Settings and choose Custom Code (under Development & integrations).
2. Choose Add Custom Code, paste the code, choose All pages and Load code once, place it in Head, and apply.

Custom code needs a Premium plan with a connected domain.

• Wix Help Center: Embedding Custom Code on Your Site

Squarespace

1. Open Code Injection in your site's settings (its place in the menu differs between dashboard versions: search the dashboard for “code injection”).
2. Paste the code into the Header field and save.

Code injection is available on the Core, Plus and Advanced plans and some older plans.

• Squarespace Help Center: code injection

Plain HTML and frameworks

1. Paste the code into the <head> your pages share: a common header include, or the base layout of your framework (for example the root layout in Next.js, baseof.html in Hugo or the base layout in Eleventy).
2. Keep the data- attributes as they are; frameworks pass them through.

Google Tag Manager (optional)

1. Create a Custom HTML tag with the code and the trigger All Pages, then publish the container.
2. Tags load later than code in your theme, so saved settings apply a little later: prefer your theme or platform when you can.

• Tag Manager Help: Custom tags