Kostenloser ScanGratis-Scan

Installationsanleitung · Paket

Besucher-Toolbar in React, Vue, Svelte oder Angular

Vom Veröffentlicht

So binden Sie die Besucher-Toolbar in eine React-, Vue-, Svelte- oder Angular-App ein. Mit der Toolbar passen Besucher an, wie Ihre Seiten für sie selbst aussehen und sich lesen lassen. Sie behebt nichts an Ihrer Website, ändert nichts daran, ob sie WCAG oder BFSG erfüllt, und unsere Scans sehen sie nie.

Bevor Sie anfangen

  • Ihr Website-Schlüssel. Sie finden ihn im Reviseberg-Dashboard unter Settings › Visitor toolbar, im Tab Install. In den Schritten unten steht dafür YOUR-SITE-KEY.
  • Schalten Sie die Toolbar auf derselben Seite für Ihre Website ein. Solange sie aus ist, lädt das Tag, zeigt aber nichts an.

Download

Das Paket heißt reviseberg-toolbar-npm-1.0.0.zip. Es ist noch in keinem Store einer Plattform gelistet: Sie installieren es aus diesem Download.

Download für React, Vue, Svelte, Angular, Next.js und Nuxt (Version 1.0.0)

Schritte

  1. Laden Sie das Paket oben herunter und entpacken Sie es in einen Ordner Ihres Repositorys, zum Beispiel vendor/toolbar-embed.
  2. Installieren Sie diesen Ordner: npm install ./vendor/toolbar-embed.
  3. Binden Sie die Toolbar dort ein, wo Ihre Anwendung startet: RevisebergToolbar aus @reviseberg/toolbar-embed/react (React und Next.js, in einer Client-Komponente), das Plugin aus @reviseberg/toolbar-embed/vue (Vue und Nuxt, als reines Client-Plugin), die Action aus @reviseberg/toolbar-embed/svelte oder provideRevisebergToolbar aus @reviseberg/toolbar-embed/angular. Jede nimmt Ihren Website-Schlüssel als siteKey.
  4. Bauen und veröffentlichen Sie die Anwendung.

Gut zu wissen

Das Paket fügt dasselbe Tag ein, genau einmal, egal wie oft eine Komponente rendert, und nie auf dem Server.

Ein falscher Schlüssel ist kein Fehler, der Ihre Anwendung anhält: Das Paket schreibt eine Warnung, die mit „Reviseberg toolbar:“ beginnt, und fügt nichts ein.

Die README des Pakets zeigt den Code für jedes Framework. Ohne Bundler brauchen Sie das Paket nicht: Fügen Sie das Tag von der Installationsseite ein.

Auf npm ist das Paket noch nicht veröffentlicht.

Prüfen, ob es funktioniert

  • Öffnen Sie eine Seite Ihrer Website in einem privaten Fenster – nicht im Editor oder in der Vorschau der Plattform, wo die meisten Plugins das Tag absichtlich weglassen.
  • Suchen Sie im Seitenquelltext oder im Elemente-Bereich der Entwicklertools nach widget/v1.js. Es sollte genau ein Tag geben, mit Ihrem Schlüssel.
  • Die Schaltfläche der Toolbar erscheint, sobald die Toolbar im Dashboard eingeschaltet ist. Auf derselben Seite steht unter „Last seen on your site“, wann das Tag zuletzt auf einer Ihrer Seiten geladen wurde.
  • Keine Schaltfläche? In der Browserkonsole steht eine Zeile, die mit „Reviseberg toolbar:“ beginnt und den Grund nennt – etwa einen Schlüssel in der falschen Form oder das Tag doppelt auf der Seite.
  • Die Toolbar antwortet nur auf den Adressen, die unter Settings › Visitor toolbar erlaubt sind; die Adresse Ihrer Website ist es immer. Tragen Sie eine Staging-Adresse dort ein, bevor Sie darauf testen.

Weiter