Widget installieren

Das RolChat-Widget ist eine schwebende Schaltfläche, die sich an die eingeschalteten Module anpasst: Chat, ein Rückrufformular, Terminbuchung, ein Lead-Formular und die Suche in der Wissensdatenbank befinden sich alle darin. Sie installieren es einmal; was es anzeigt, wird im Dashboard festgelegt.

1. Snippet kopieren

Wählen Sie unter Einstellungen → Widget die Website aus und kopieren Sie das Installations-Snippet. Es sieht so aus:

<!-- RolChat widget -->
<script>
  window.rolchatConfig = {
    "site_id": "ste_…",
    "account_id": "…",
    "widget_key": "wk1.<site>.<signature>",
    "modules": ["chat"]
  };
</script>
<script async src="https://widget.rolchat.com/stub.js"></script>

Der Widget-Schlüssel ist öffentlich und darf bedenkenlos in einer Seite ausgeliefert werden. Er benennt Ihre Website und ist signiert, sodass niemand eine Kopie des Widgets auf Ihr Konto richten kann. Das Dashboard ergänzt das Objekt um weitere Schlüssel (Begrüßung, Kopfzeilentitel, Design, Arbeitszeiten, Layout pro Viewport), wenn Sie die Widget-Einstellungen ändern; kopieren Sie das Snippet danach erneut oder halten Sie das Objekt minimal und lassen Sie das Widget den Rest abrufen.

stub.js ist wenige Kilobyte groß und lädt den Rest erst, wenn der Besucher ihn braucht: die Chat-Oberfläche beim ersten Öffnen, das Tracking nach der Einwilligung, das Einwilligungsbanner dort, wo eines vorgeschrieben ist.

2. Vor </body> einfügen

Fügen Sie das Snippet auf jeder Seite ein, auf der das Widget erscheinen soll, am besten über Ihr Website-Template oder Ihren Tag-Manager, damit es überall gleichzeitig erscheint. Das Skript lädt asynchron und blockiert das Rendern nicht; das Paket für den ersten Aufruf ist bewusst klein gehalten, damit es Ihre Core Web Vitals nicht beeinträchtigt.

3. Funktion prüfen

Öffnen Sie Ihre Website in einem privaten Fenster. Die Schaltfläche erscheint in der von Ihnen gewählten Ecke. Im Dashboard zeigt Besucher die neue anonyme Sitzung in Echtzeit, und eine aus dem Widget gesendete Nachricht erscheint im Posteingang als neue Konversation.

Angemeldete Nutzer identifizieren

Wenn sich Ihre Besucher in Ihrem Produkt anmelden, teilen Sie RolChat mit, wer sie sind, damit Konversationen dem richtigen Kontakt zugeordnet werden:

window.rolchat.identify({
  email: "alice@example.com",
  first_name: "Alice",
  last_name: "Martin",
  phone: "+15551234567",
  external_id: "user_12345",
  custom_fields: { plan: "pro" },
});

Akzeptierte Merkmale sind email, phone, first_name, last_name, external_id und ein flaches Objekt custom_fields; alles andere wird ignoriert. RolChat sucht die E-Mail-Adresse im CRM. Gibt es einen Kontakt, wird die Sitzung mit ihm verknüpft und der Agent sieht das Profil; andernfalls werden die Angaben gespeichert, und ein Lead wird angelegt, sobald der Besucher zum ersten Mal schreibt.

Für mehr Vertrauen kann Ihr Backend die Identität signieren: Übergeben Sie die Signatur, die RolChat für den Nutzer ausstellt, zusammen mit den Merkmalen, und die Sitzung wird nur hochgestuft, wenn die Signatur gültig ist. Rufen Sie window.rolchat.reset() auf, wenn sich der Nutzer abmeldet, sonst sieht die nächste Person in diesem Browser die vorherige Konversation.

Die JavaScript-API

window.rolchat steht zur Verfügung, sobald der Stub läuft; Aufrufe, die vor dem Laden des Pakets erfolgen, werden in eine Warteschlange gestellt und der Reihe nach ausgeführt.

Methode	Funktion
show() / hide()	Den Launcher ein- oder ausblenden
open() / close()	Das Chatfenster öffnen oder schließen
identify(traits)	Die Sitzung mit einer Person verknüpfen (siehe oben)
reset()	Die Identität vergessen und eine neue anonyme Sitzung starten
pushEvent(name, props)	Ein benutzerdefiniertes Ereignis für Trigger-Nachrichten und Automatisierung melden
trackPageView(path?)	Einen Seitenaufruf in Single-Page-Apps melden
setLocale(code)	Die Sprache des Widgets wechseln
showConsentPreferences()	Das Einwilligungs-Präferenzcenter öffnen
on(event, handler) / off(event, handler)	chat:opened, chat:closed, message:sent, message:received, session:started abonnieren

window.rolchat.pushEvent("cart_abandoned", { value: 129.9, currency: "EUR" });
window.rolchat.on("message:received", () => audio.play());

Sprache und Schreibrichtung

Das Widget spricht die Sprache, die Sie mit lang in window.rolchatConfig festlegen (zum Beispiel "lang": "de"); ohne diese Angabe die Browsersprache des Besuchers, ausgewählt in der Reihenfolge der Browser-Präferenzen aus den 40 Sprachen, die RolChat unterstützt; passt keine, Englisch. Die eigene Spracheinstellung der Website wird nicht verwendet: Damit das Widget die Sprache Ihrer Website spricht, setzen Sie lang. Arabisch und Hebräisch werden von rechts nach links dargestellt. Nachrichten von Agenten übersetzt das Widget nicht; auf Agentenseite kann stattdessen die KI-Liveübersetzung genutzt werden.

Cookies und Einwilligung

Wo ein Einwilligungsbanner vorgeschrieben ist, verfolgt das Widget Besucher nicht vor der Einwilligung. Wenn Sie das Datenschutzmodul von RolChat nutzen, teilen sich Banner und Widget einen gemeinsamen Einwilligungsstatus. Wenn Sie ein anderes Einwilligungstool verwenden, warten die Analyseereignisse des Widgets auf das Signal, das Sie unter Einstellungen → Datenschutz → Einbettung konfigurieren.

Wo das Widget konfiguriert wird

Was	Wo
Farben, Position, Begrüßung, Einstiegspunkte, Installations-Snippet	Einstellungen → Widget
Welche Module im Widget erscheinen	Einstellungen → Module (pro Website)
Arbeitszeiten und Offline-Nachricht	Einstellungen → Websites → Arbeitszeiten
Trigger-Nachrichten auf bestimmten Seiten	Marketing → Trigger