Free scanFree scan

Install guide · Package

Add the visitor toolbar to React, Vue, Svelte or Angular

By Published

How to add the visitor toolbar to a React, Vue, Svelte or Angular app. The toolbar lets a visitor change how your pages look and read for themselves; it fixes nothing in your site, does not change whether it meets WCAG or the BFSG, and our scans never see it.

Before you start

  • Your site key. It is in the Reviseberg dashboard, under Settings › Visitor toolbar, on the Install tab. In the steps below it is written YOUR-SITE-KEY.
  • Switch the toolbar on for your site on the same screen. Until it is on, the tag loads and shows nothing.

Download

The package is reviseberg-toolbar-npm-1.0.0.zip. It is not listed in any platform’s store yet: you install it from this download.

Download for React, Vue, Svelte, Angular, Next.js and Nuxt (version 1.0.0)

Steps

  1. Download the package above and unpack it into a folder in your repository, for example vendor/toolbar-embed.
  2. Install that folder: npm install ./vendor/toolbar-embed.
  3. Add the toolbar where your app starts: RevisebergToolbar from @reviseberg/toolbar-embed/react (React and Next.js, in a client component), the plugin from @reviseberg/toolbar-embed/vue (Vue and Nuxt, as a client-only plugin), the action from @reviseberg/toolbar-embed/svelte, or provideRevisebergToolbar from @reviseberg/toolbar-embed/angular. Each takes your site key as siteKey.
  4. Build and deploy.

Good to know

The package adds the same tag, once, however many times a component renders, and never on the server.

A wrong key is not an error that stops your app: the package logs one warning beginning “Reviseberg toolbar:” and adds nothing.

Its README shows the code for each framework. Without a bundler you do not need the package: paste the tag from the install page.

The package is not published to npm yet.

Check that it works

  • Open a page of your site in a private window — not in the platform’s editor or preview, where most plugins leave the tag out on purpose.
  • View the page source, or search the developer tools’ Elements panel, for widget/v1.js. There should be exactly one tag, with your key.
  • The toolbar’s button appears once the toolbar is switched on in the dashboard. On the same screen, “Last seen on your site” says when the tag last loaded on one of your pages.
  • No button? The browser console has a line beginning “Reviseberg toolbar:” that says why — a key with the wrong shape, for example, or the tag on the page twice.
  • The toolbar answers only on the addresses allowed under Settings › Visitor toolbar; your site’s own address always is. Add a staging address there before you test on it.

More