Einen Chatknopf auf die eigene Website setzen

Was dieser Knopf tut

Ein einzelnes Skript, das du in deine Seite legst, zeichnet einen schwebenden Knopf in eine Ecke des Bildschirms (unten rechts oder unten links, nach Wahl). Tippt jemand darauf, öffnet sich ein neuer Tab zu https://koratland.com/m/<Kürzel deines Betriebs>, und die Adresse der aktuellen Seite wird jedes Mal als Parameter src mitgegeben, damit dein Betrieb sieht, von welcher Seite aus geschrieben wurde.

Die Kundschaft muss sich immer zuerst bei Korat anmelden. Wer noch kein Konto hat oder in diesem Browser nicht angemeldet ist, landet auf einem Anmeldebildschirm — das ist so erwartet und gewollt. Bleibt jemand dort stehen und geht nicht weiter, ist das in Ordnung; nichts hier versucht, zum Weitermachen zu drängen oder zu tricksen.

Genau deshalb trägt der Knopf auch einen QR-Code (vom Korat-Server selbst gezeichnet, nicht von diesem Skript): Wer die Korat-App schon auf dem Handy hat und dort angemeldet ist, scannt ihn und landet direkt im Chat, ohne am Rechner etwas zu tippen — und unter Android mit installierter App öffnet derselbe Link die App direkt.

Loslegen — eine Zeile kopieren

Füg das vor dem schließenden </body>-Tag ein (oder irgendwo auf der Seite) und ersetz somtam-lardprao-42 durch das Kürzel deines Betriebs (Buchstaben und Zahlen, nicht der angezeigte Name) — wo du es findest, steht im nächsten Abschnitt:

<script src="https://koratland.com/embed/korat-message.js"
        data-korat="somtam-lardprao-42" defer></script>

Das war es — nichts weiter zu installieren, keine Abhängigkeit, kein Einfluss auf das Tempo deiner Seite (eine einzelne kleine Datei, mit defer geladen, sodass sie das Zeichnen der Seite nie blockiert).

Wo du das Kürzel deines Betriebs findest

• Öffne die Seite deines Betriebs auf Korat unter https://koratland.com/b/<Kürzel> — das Kürzel ist alles, was in dieser Adresse nach /b/ steht
• Dasselbe Kürzel dient dem Chatknopf und dem QR-Code

Einbau auf den einzelnen Plattformen

• Wix — Editor → Hinzufügen → Code einbetten → Eigene Einbettung → HTML-iframe → den Code oben einfügen
• Webflow — Bereich Add → Embed → Embed an HTML Code → Code einfügen → Publish
• Shopify — Onlineshop → Themes → Code bearbeiten → theme.liquid öffnen → den Code vor </body> einfügen
• WordPress — läuft deine Seite auf WordPress, nimm stattdessen das eigene Korat-Plugin (siehe die Dokumentation), das einen Einstellungsbildschirm hat und kein Bearbeiten von Code verlangt — dieses Skript funktioniert dort aber ebenso, wenn du es lieber selbst einfügst
• Von Hand oder von einer Agentur gebaute Seiten — das <script>-Tag direkt vor dem schließenden </body> ins HTML einfügen

Anpassungen (data-*)

Der Wert von src in der Chat-Adresse wie in der Adresse des QR-Bilds kommt immer aus location.href der Seite, auf der der Knopf eingebettet ist — es gibt keine Möglichkeit, ihn stattdessen fest einzutragen, denn dann sähe jeder Knopf so aus, als käme er von derselben Seite, und genau das würde den Sinn der Sache zunichtemachen.

Vollständiges Beispiel mit Anpassungen:

<script src="https://koratland.com/embed/korat-message.js"
        data-korat="somtam-lardprao-42"
        data-name="Mein Betrieb"
        data-position="bl"
        data-label="Schreib uns"
        data-lang="en"
        defer></script>

Barrierefreiheit

• Der Knopf ist ein echtes, mit der Tastatur ansteuerbares Element mit aria-label
• Esc schließt das QR-Feld
• Er beachtet die Geräteeinstellung „Bewegung reduzieren“ (prefers-reduced-motion)
• Der Kontrast hält auf hellem wie dunklem Hintergrund, und er hält Abstand zum sicheren Bereich und zur Gestenleiste moderner Handys

Warum er sich gefahrlos einbauen lässt

• Die Oberfläche wird in einem Shadow DOM gezeichnet — das CSS deiner Seite und das des Knopfs können nie kollidieren
• Eine Datei, keine externe Abhängigkeit, keine zusätzlichen Schriften oder Bibliotheken
• Mehrfaches Laden zeichnet nie einen doppelten Knopf
• Alles, was du in data-* schreibst, wird vor dem Zeichnen immer maskiert