Skip to content
Octo Assist

Install guide

How to add an accessibility widget to any website

To add Octo Assist to any website, paste your one-line install code just before the closing </body> tag in the layout or template that every page uses. Add it once in that shared file and it works on every page. The button shows once your plan is active and the domain in your dashboard matches your site.
Get your install codeJump to the steps
  • 4 steps
  • Copy and paste, no coding
  • Runs on every page

Any website + Octo Assist

Steps at a glance

  1. Step 1: Open your shared layout
  2. Step 2: Paste the code before </body>
  3. Step 3: Publish the change
  4. Step 4: Test locally if you like

What do you need before you start?

  • Access to your site's HTML templates or layout file, and a way to publish changes.
  • Your site added in your Octo Assist dashboard under the domain visitors use, for example example.com (www.example.com works too).
  • An active Octo Assist plan. You can paste the code first, but the button only appears once a plan is active. See pricing.

How do you add Octo Assist to Any website?

  1. Step 1: Open your shared layout

    With your code copied, open the file that wraps every page: a shared footer include, a base template, or index.html on a one-page site. On a React, Vue or similar app, use the root HTML template or root layout.

  2. Step 2: Paste the code before </body>

    Paste your code on its own line just before the closing </body> tag. Add it once in the shared file, not on each page. It has the defer attribute, so it loads after your page content.

  3. Step 3: Publish the change

    Save the file and deploy or upload it to your server the way you usually do.

  4. Step 4: Test locally if you like

    The widget also runs on localhost, so you can try it on your own computer before you go live. Loads on localhost aren't counted in your dashboard.

How do you know it worked?

Open your live site in a private (incognito) window, so you see it the way a new visitor does. Look for the round button in the bottom right corner, or bottom left if you chose that in your dashboard. Click it, or press Alt+Shift+A (Option+Shift+A on a Mac), to open the panel, then turn on a tool such as Text size to check that the page changes.

What if the button doesn't show up?

Why doesn't the button show on my site?

Most often the address doesn't match. The widget only runs on the domain you added in your dashboard and its www version. If you added example.com, it also runs on www.example.com, but not on shop.example.com or a staging address. If you added www.example.com, it won't run on example.com, so add the domain without www. Your browser's console also shows a short note that says why the widget is hidden.

My dashboard says Needs a plan. Will the button show?

No. You can install the code before you choose a plan, but the button only appears once your plan is active. Choose a plan on the Billing page of your dashboard, then reload your site.

My site uses a Content Security Policy. What do I need to allow?

Allow the address the widget loads from (the domain in your script's src) in both script-src and connect-src. The script comes from that address, and it loads your site's settings from the same address.

I changed the button color or tools. Why does my site still show the old ones?

Each visitor's browser keeps your widget settings for up to 5 minutes. Wait a few minutes, or open your site in a new private window to see the change right away.

Other platforms

Give every visitor the tools they need

Create an account, add your website and preview the widget in minutes.

Get startedTry the live demo