¶ 🔧 BarriGo. Integration
💡 Hinweis: Diese Anleitung beschreibt die technische Integration und Konfiguration der BarriGo.-Softwarelösungen.
Für die Nutzung ist eine gültige Buchung der jeweiligen Module sowie deren Aktivierung im Backend erforderlich.
¶ ✅ Voraussetzungen
Damit das BarriGo.Tool und der BarriGo.Live Inspect funktionieren, müssen folgende Voraussetzungen erfüllt sein:
Produkt muss gebucht oder im Testmodus sein:
Ohne aktive Buchung /aktiven Testmodus ist das Tool nicht nutzbar.
Aktivierung im Backend erforderlich:
Es kann pro Projekt individuell im Backend festgelegt werden, welche Module aktiv sind:
Das BarriGo.Tool funktioniert nur, wenn es dort aktiviert ist. Das Gleiche gilt für BarriGo.Live Inspect.
Die Aktivierung kann im Projekt im Bereich → Integration vorgenommen werden (siehe Screenshot):
¶ 🚀 Einbindung im Webauftritt
Fügen Sie den folgenden Code-Snippet entweder in den <head> oder direkt vor dem </body>-Tag Ihrer Website ein:
<script src="https://cdn.barrigo.de/widget.js?key=PRJ-XXXXXXXX-XXXX"></script>
<script>
BarrigoWidget.init({
language: "de",
serialNo: "PRJ-XXXXXXXX-XXXX"
});
</script>
🔁 Ersetzen Sie PRJ-XXXXXXXX-XXXX durch Ihren individuellen Lizenzschlüssel.
¶ ⚙️ Konfigurationsmöglichkeiten
¶
🔹 Standardkonfiguration (über das Backend)
Für die meisten Anwender reicht die Konfiguration über das BarriGo.-Backend. Hier können Sie bequem einstellen:
Farben: Haupt- und Sekundärfarbe des Tools
Position des Buttons: z. B. links unten, rechts mittig, etc.
Position des Menüs: links oder rechts
Aktive Module: Tool, Live Inspect
Diese Einstellungen gelten automatisch, solange sie nicht im Script überschrieben werden.
¶ 🔸 Erweiterte Konfiguration (per init()-Block im Script)
Für technisch versiertere Nutzer besteht die Möglichkeit, Konfigurationen direkt im init()-Block zu definieren.
Wichtig: Diese Werte überschreiben die jeweiligen Einstellungen aus dem Backend!
¶ Beispiel: Vollständige Konfiguration
BarrigoWidget.init({
// 🔹 Grundlegende Einstellungen
serialNo: 'PRJ-XXXXXXXX-XXXX', // Ihre Seriennummer (muss zu oben im Script passen)
language: 'de', // 'de' für Deutsch, 'en' für Englisch
fontSize: 16, // Basis-Schriftgröße in Pixeln
// 📐 Positionierung
positionMenu: 'menu-left', // Position des Tool-Menüs: 'menu-left' oder 'menu-right'
positionButton: 'right-bottom', // Buttonposition: 'left-bottom', 'left-middle', 'right-bottom', 'right-middle'
positionButtonBottom: 30, // Abstand von unten in Pixeln
positionButtonRight: 30, // Abstand von rechts in Pixeln
// 🎨 Erscheinungsbild
primaryColor: '#007bff', // Hauptfarbe (z. B. Blau)
secondaryColor: '#f8f9fa', // Sekundärfarbe (z. B. hellgrau)
highlightColor: '#4A90E2', // Fokusfarbe für Hover/Interaktionen
// ⌨️ Tastaturkürzel
keyboardShortcut: 'F3', // Globales Tastenkürzel zum Öffnen des Tools
moduleShortcuts: {
'barrigo-contrast-module': 'Alt+K', // Modul: Kontrast
'barrigo-text-to-speech-module': 'Alt+V', // Modul: Vorlesen
'barrigo-image-hide-module': 'Alt+B', // Modul: Bilder ausblenden
'barrigo-reading-guide-module': 'Alt+L', // Modul: Leselineal
'barrigo-keyboard-nav-module': 'Alt+T', // Modul: Tastaturnavigation
'barrigo-text-adjustments-module': 'Alt+A', // Modul: Schriftanpassungen
'barrigo-animation-pause-module': 'Alt+P' // Modul: Animationen pausieren
},
// ⚙️ Weitere Optionen
previewMode: false, // true = Nur Vorschau, keine Bedienung möglich
hideMenuButton: false // true = Button wird versteckt (nur per Link steuerbar)
});¶ Übersicht der möglichen Parameter:
Grundsätzlich:
serialNo, customerId, language, fontSize
Positionierung:
positionMenu, positionButton, positionButtonLeft, positionButtonTop, positionButtonRight, positionButtonBottom
Farben:
primaryColor, secondaryColor, highlightColor
Tastatursteuerung:
keyboardShortcut, moduleShortcuts (z. B. Alt+K für Kontrastmodul)
Sonstiges:
previewMode, hideMenuButton
¶ 🔐 Hinweis zur Content Security Policy (CSP)
Je nach Sicherheitskonfiguration Ihrer Website (z. B. bei Nutzung einer Content Security Policy) müssen bestimmte Ressourcen explizit freigegeben werden, damit das BarriGo.-Tool und der Live Inspect korrekt geladen werden können.
👉 Eine vollständige Liste der relevanten Domains und Ressourcen finden Sie hier:
➡️ Content Security Policy für BarriGo.
¶ 🔗 BarriGo.-Tool per Link steuern
Das BarriGo.-Tool kann auch über spezielle Links gesteuert werden – z. B. durch einen Menüpunkt oder Button auf Ihrer Website.
¶ 🔄 Kombination aus Button & Link
Standardmäßig wird ein aktivierbarer Button auf der Website angezeigt.
Zusätzlich können Sie jederzeit Steuerungslinks einbinden – beides funktioniert parallel.
Es ist nicht erforderlich, den Button auszublenden, um die Linksteuerung zu nutzen.
¶ 🚫 Nur Linksteuerung (ohne Button)
Wenn Sie den Standard-Button nicht anzeigen möchten (z. B. weil Sie das Tool ausschließlich über einen Menüeintrag oder individuellen Button öffnen wollen), können Sie diesen mit folgender Einstellung ausblenden:
hideMenuButton: true 💡 In diesem Fall wird das Tool nur über die Steuerungslinks (oder eigene JavaScript-Trigger) geöffnet.
¶ 📌 Steuerungslinks im Überblick
Widget öffnen:<a href="#barrigo-widget-open">Widget öffnen</a>
Widget schließen:<a href="#barrigo-widget-close">Widget schließen</a>
Widget umschalten (Toggle):<a href="#barrigo-widget-toggle">Widget umschalten</a>
Diese Links können z. B. in die Hauptnavigation, in die Fußzeile oder in individuelle CTA-Bereiche integriert werden.
¶ 🧪 Beispiel 1: Beides aktiv – Button + Link
BarrigoWidget.init({
serialNo: "PRJ-XXXXXXXX-XXXX",
customerId: "IHRE-KUNDEN-ID",
language: "de"
});<a href="#barrigo-widget-open">Barrierefreiheit aktivieren</a>
Ergebnis: Der Standard-Button ist sichtbar, und zusätzlich kann das Tool über den Link geöffnet werden.
¶ 🧪 Beispiel 2: Nur über Link (ohne Button)
BarrigoWidget.init({
serialNo: "PRJ-XXXXXXXX-XXXX",
customerId: "IHRE-KUNDEN-ID",
language: "de",
hideMenuButton: true
});<a href="#barrigo-widget-open">Barrierefreiheit aktivieren</a>
Ergebnis: Der Button wird nicht angezeigt, aber der Link öffnet das Tool wie gewünscht.
¶ 🧩 Noch Fragen zur Integration?
Falls Sie bei der Einbindung oder Konfiguration nicht weiterkommen und in der Dokumentation keine Lösung finden, helfen wir Ihnen gerne weiter.
Sie können direkt in der Anwendung ein Support-Ticket eröffnen oder uns alternativ eine E-Mail an helpdesk@barrigo.de senden.