Sonstiges
Mocha für Agenturen und Entwickler: Einbindung auf Kundenwebsites
Diese Seite richtet sich an Agenturen und Entwickler, die Mocha auf Websites ihrer Kunden einbinden. Praxen, Kanzleien und Beratungen können den Link direkt an ihre Agentur weitergeben.
Kurzfassung in 5 Schritten
- Lassen Sie das Mocha-Konto vom Kunden anlegen, mit einem Space je Kunde oder Standort.
- Kopieren Sie im Space unter „Widget“ den Einbettungscode mit „Code kopieren“.
- Setzen Sie das Script-Tag an die Stelle im Inhalt, an der das Widget erscheinen soll.
- Fügen Sie das Script in Single-Page-Apps nach dem Mounten per JavaScript in einen Container ein.
- Erlauben Sie die Mocha-Domain in der CSP und nehmen Sie das Script von JS-Optimierungen aus.
Konto und Spaces
Mocha hat keine Team- oder Mehrbenutzerkonten. Ein Konto hat eine Anmeldung (E-Mail und Passwort oder Google), jeder Space gehört zu genau einem Konto. Eine Funktion, einen Space in ein anderes Konto zu übertragen, gibt es derzeit nicht.
Wir empfehlen deshalb, dass Ihr Kunde das Konto selbst anlegt und den Tarif selbst bucht. Die Einwilligungen der Bewertenden, das Einwilligungsprotokoll und die Rechnungen liegen dann beim Kunden und bleiben dort, auch wenn die Betreuung wechselt. Für die Einbindung brauchen Sie keinen Zugang: Das Script-Tag ist öffentlich, Ihr Kunde kann Ihnen den kopierten Code schicken.
Führen Sie stattdessen ein eigenes Konto mit einem Space je Kunde, liegen Bewertungen und Einwilligungen in Ihrem Konto. Welche Vereinbarungen Sie dafür mit Ihren Kunden brauchen, klären Sie mit Ihrer Datenschutzberatung.
Legen Sie je Kunde oder Standort einen eigenen Space an (Space anlegen). Jeder Space hat sein eigenes Formular, eigene Widgets und einen eigenen Google-Link auf der Danke-Seite. Der kostenlose Tarif umfasst einen Space und zeigt bis zu 50 freigegebene Bewertungen mit dem Hinweis „Powered by Mocha“. Pro kostet 19 € pro Monat (14 Tage kostenlos testen) und bietet unbegrenzte Spaces und Bewertungen, eigenes Logo und eigene Farben sowie keinen Mocha-Hinweis (Preise).
Der Einbettungscode
Den Code erzeugt das Dashboard: Space öffnen, in der Space-Navigation unter „Einbinden“ den Punkt „Widget“ wählen, unter „Widget wählen“ das Widget aussuchen, unter „Erscheinungsbild“ anpassen und auf „Code kopieren“ klicken.
<script
src="https://mocha.de/api/embed/ihr-space/widget.js"
data-mode="wall"
async></script>So verhält sich das Script:
- Platzierung: Das Script findet über
document.currentScriptsein eigenes Tag und fügt direkt dahinter ein<div data-mocha-widget="ihr-space">ein. Das Widget erscheint also genau dort, wo das Script-Tag steht. - Shadow DOM: Das Widget rendert in einem offenen Shadow Root. CSS Ihrer Seite wirkt nicht hinein, das CSS des Widgets nicht heraus. Vererbte Eigenschaften wie die Schriftart übernimmt es von Ihrer Seite. Breite und Außenabstände steuern Sie über den Selektor
[data-mocha-widget]. - Asynchron: Mit
asyncblockiert das Script das Rendern der Seite nicht. Bis die Daten geladen sind, hat das Widget keine Höhe; eine Mindesthöhe am umgebenden Container verringert Layout-Verschiebungen. - Live-Daten: Das Widget lädt die freigegebenen Bewertungen bei jedem Seitenaufruf von Mocha. Diese Antwort darf 60 Sekunden zwischengespeichert werden, das Script selbst eine Stunde. Neue Freigaben erscheinen daher ohne Änderung am Code.
- Leer statt Fehlermeldung: Ist der Space deaktiviert oder gibt es noch keine freigegebene Bewertung, bleibt das Widget leer.
- Mehrere Widgets: Jedes Script-Tag erzeugt sein eigenes Widget, auch mehrfach auf einer Seite.
data-Attribute
Das Dashboard schreibt nur Werte in den Code, die vom Standard abweichen. Fehlt ein Attribut, gilt der Standard aus der Tabelle.
| Attribut | Werte | Standard | Gilt für |
|---|---|---|---|
data-mode | slider, wall, single, badge und weitere aus „Widget wählen“ | slider | alle |
data-theme | light, dark | light | alle |
data-radius | Eckenradius in Pixel, im Dashboard 0, 12 oder 24 | 12 | alle mit Karten |
data-shadow | none, subtle, strong | subtle | alle mit Karten |
data-font-size | sm, md, lg | md | alle |
data-autoplay | true, false | slider: an, portrait: aus | slider, portrait |
data-speed | Millisekunden, im Dashboard 3000 bis 8000 | 4000 (portrait: 3000) | slider, portrait |
data-arrows | false blendet aus | an | slider, portrait |
data-dots | false blendet aus | an | slider |
data-columns | Spaltenzahl, im Dashboard 2 bis 4 | 3 | wall, masonry |
data-gap | Abstand in Pixel, im Dashboard 8, 16 oder 24 | 16 | wall, masonry |
data-align | left, center | left | single |
data-badge-style | pill, card, minimal | pill | badge |
data-stars | false blendet den Stern aus | an | badge |
Weitere Optionen einzelner Widgets, etwa Laufgeschwindigkeit oder Kartenbreite, setzt das Dashboard bei Bedarf selbst in den Code. Die Akzentfarbe für Sterne und Hervorhebungen kommt aus dem Space, nicht aus dem Code. Die Spaltenzahl gilt für jede Bildschirmbreite; für schmale Bereiche eignet sich der Slider besser.
Single-Page-Apps: React, Next.js, Vue
Ein Script-Tag im Template funktioniert in Single-Page-Apps meist nicht wie gewünscht:
- Per
innerHTMLoderdangerouslySetInnerHTMLeingefügte Scripts führt der Browser nicht aus. - React 19 verschiebt
<script async src="…">aus JSX in den<head>und entfernt doppelte Scripts mit gleicher Adresse (React-Dokumentation). Das Widget säße dann im<head>. next/scripthängt das Script an das Ende von<body>an, nicht an die Stelle der Komponente.- Vue ignoriert
<script>-Tags in den Templates von Client-Komponenten.
Fügen Sie das Script-Element deshalb nach dem Mounten per JavaScript in einen Container ein und leeren Sie den Container beim Unmount:
"use client";
import { useEffect, useRef } from "react";
export function MochaWidget({ slug, mode = "wall" }: { slug: string; mode?: string }) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const container = ref.current;
if (!container) return;
const script = document.createElement("script");
script.src = `https://mocha.de/api/embed/${slug}/widget.js`;
script.async = true;
script.dataset.mode = mode; // weitere, z. B. dataset.theme = "dark", dataset.fontSize = "lg"
container.appendChild(script);
return () => container.replaceChildren();
}, [slug, mode]);
return <div ref={ref} style={{ minHeight: 320 }} />;
}Auch so findet sich das Script über document.currentScript und setzt das Widget in den Container. In Vue gehen Sie genauso vor: Element in onMounted einfügen, Container in onBeforeUnmount leeren. Jedes Einfügen lädt die Daten neu und zählt als Aufruf in der Widget-Statistik. Alternativ binden Sie die Bewertungswand als iFrame ein (siehe unten).
Tag-Manager
Für Widgets im Seiteninhalt empfehlen wir keinen Tag-Manager. Das Widget erscheint dort, wo das Script-Tag im DOM landet, und Google Tag Manager setzt benutzerdefinierte HTML-Tags ans Ende von <body>. Das Widget stünde dann unter dem Footer.
Muss es ein Tag-Manager sein, legen Sie im Seitentemplate einen Container mit fester ID an und lassen das Tag das Script per JavaScript dort einfügen:
<!-- Im Seitentemplate, an der gewünschten Stelle -->
<div id="mocha-bewertungen"></div>
<!-- Benutzerdefiniertes HTML-Tag im Tag-Manager -->
<script>
(function () {
var target = document.getElementById("mocha-bewertungen");
if (!target) return;
var s = document.createElement("script");
s.src = "https://mocha.de/api/embed/ihr-space/widget.js";
s.setAttribute("data-mode", "wall");
s.async = true;
target.appendChild(s);
})();
</script>Content Security Policy
Hat die Website eine Content Security Policy, braucht das Widget diese Freigaben:
| Direktive | Freigabe | Wofür |
|---|---|---|
script-src | https://mocha.de | widget.js und der Video-Player |
connect-src | https://mocha.de | Bewertungen laden, Ereignisse für die Widget-Statistik senden |
img-src | Adressen der Bewertungsbilder | Fotos und Video-Vorschaubilder, bei importierten Google-Bewertungen Profilfotos von Google |
style-src | 'unsafe-inline' | <style>-Element im Shadow DOM und style-Attribute |
media-src | Adresse der Videos | nur Video-Player |
frame-src | https://mocha.de | nur iFrame-Einbindungen |
Ein Nonce hilft bei style-src nicht, weil das Widget sein <style>-Element selbst erzeugt. Ohne diese Freigabe erscheint das Widget ungestaltet. Die genauen Bild- und Videoadressen sehen Sie in den Entwicklertools im Tab „Netzwerk“. Mit require-trusted-types-for 'script' funktioniert das Widget nicht, weil es innerHTML verwendet.
Caching- und Optimierungs-Plugins
Nehmen Sie widget.js von allen Funktionen aus, die JavaScript zusammenfassen, verschieben oder bis zur ersten Interaktion verzögern. Das Script braucht sein eigenes Tag an Ort und Stelle: Daraus liest es Space und Optionen und bestimmt die Position des Widgets. In ein Bundle kopiert, findet es sein Tag nicht und bleibt leer. Hinweise zu gängigen Plugins stehen auf der Seite WordPress.
Weitere Einbindungen
Bewertungswand als iFrame: Unter dem Einbettungscode öffnet „iFrame einbetten“ einen <iframe>-Code für https://mocha.de/wall/ihr-space. Die Seite versteht die Parameter theme (light, dark), columns (2, 3, 4) und limit (6, 12, 24, Standard 12). Der iFrame passt seine Höhe nicht an den Inhalt an, setzen Sie height passend. Das eignet sich für Systeme, die keine Scripts im Inhalt erlauben.
Einzelnes Video: Für eine freigegebene Videobewertung finden Sie den Code unter „Testimonials“ in den Details der Bewertung („Details ansehen“) im Abschnitt „Video einbetten“. Der Player rendert ebenfalls im Shadow DOM direkt nach seinem Script-Tag, für SPAs gilt dasselbe wie oben.
<script
src="https://mocha.de/api/embed/video/VIDEO-ID/player.js"
data-id="VIDEO-ID"
async></script>Formular und QR-Code: Das Formular liegt unter https://mocha.de/s/ihr-space, den Link kopieren Sie mit „Link kopieren“ in der Space-Navigation. Den passenden QR-Code erstellen Sie unter „Einbinden“ im Punkt „QR-Code“.
Datenschutz auf der Website des Kunden
Diese Punkte beschreiben, was technisch passiert. Sie sind keine Rechtsberatung.
- Script und Bewertungsdaten lädt der Browser der Besucher von
mocha.de, Fotos und Videos von den Medienservern, die Mocha dafür nutzt. Diese Server erhalten dabei wie bei jedem Abruf die IP-Adresse. Profilfotos importierter Google-Bewertungen kommen von Google. - Beim Anzeigen sendet das Widget ein Ereignis „Anzeige“, beim Klick auf eine Bewertungskarte ein Ereignis „Klick“ an Mocha. Es enthält Space, Widget-Stil, gegebenenfalls die Bewertung und die vollständige Adresse der Seite einschließlich URL-Parametern. Mocha speichert dazu die Browserkennung, aber keine IP-Adresse, und löscht die einzelnen Ereignisse nach 13 Monaten. Daraus entsteht die Widget-Statistik des Space.
- Mit
data-track="false"am Script-Tag sendet das Widget keine Ereignisse. Die Statistik bleibt dann für diese Einbindung leer. - Das Widget setzt keine Cookies und nutzt keinen lokalen Speicher im Browser.
Wie Mocha diese Daten verarbeitet, beschreibt die Datenschutzerklärung. Ob und wie die Datenschutzerklärung Ihres Kunden das Widget erwähnen sollte, klärt Ihr Kunde am besten mit seiner Datenschutzberatung.