Web-Chat-Widget

Das Chat-Widget ist ein kleiner Knopf auf Ihrer Website, der das Gesprächsfenster öffnet. Jedes Projekt hat sein eigenes Widget.

Einbinden

Kopieren Sie den Code-Schnipsel unter Projekteinstellungen → Widget und fügen Sie ihn vor dem schliessenden </body>-Tag Ihrer Website ein:

<script>window.Commelia=window.Commelia||function(){(Commelia.q=Commelia.q||[]).push(arguments)};</script>
<script src="https://api.commelia.com/widget/loader.js" data-project="pk_..." async></script>

Mit Testseite öffnen probieren Sie das Widget aus, bevor es live geht. Unter Erlaubte Websites tragen Sie ein, welche Websites den Chat einbinden dürfen (eine pro Zeile, z. B. https://www.example.org). Leer bedeutet: überall erlaubt.

Sie können das Widget von Ihrer Seite aus steuern:

Commelia("setLocale", "de"); // Widget auf Deutsch anzeigen
Commelia("open");            // Chat öffnen, z. B. über einen eigenen Knopf

Branding und Texte

• Branding (Reiter Allgemein): Hauptfarbe, Schrift (von Google Fonts), Logo und Position (unten links oder rechts).
• Texte (Reiter Lokalisierung): Begrüssung, Untertitel, Startknopf, Platzhalter und Online-/Offline-Status ersetzen, ebenso die Texte, wenn Besuchende eine Unterhaltung beenden. Die E-Mail mit dem Verlauf passen Sie im selben Reiter unter Nachrichten an Besucher an.
• Sprachen (Reiter Allgemein): in welchen Sprachen das Widget angeboten wird. Für Englisch und Deutsch gibt es eingebaute Texte; für andere Sprachen erfassen Sie die Texte unter Lokalisierung oder lassen sie automatisch aus der ersten Sprache übersetzen.

Einstiegsfragen

Einstiegsfragen werden vor der ersten Nachricht gestellt, zum Beispiel nach Altersgruppe, Postleitzahl oder Thema. Fragen können Freitext, eine Auswahl oder eine E-Mail-Adresse sein und Pflichtfelder sein. Die Antworten hängen an der Unterhaltung, lassen sich im Posteingang filtern und für die Weiterleitung an die richtige Gruppe nutzen.

Öffnungszeiten und Abwesenheitsnachricht

Unter Öffnungszeiten (Reiter Widget) legen Sie Wochenzeiten, Feiertage und abweichende Öffnungszeiten in Ihrer Zeitzone fest. Ausserhalb dieser Zeiten zeigt das Widget Ihre Abwesenheitsnachricht, und Besucher:innen können ihre E-Mail-Adresse hinterlassen, damit das Team später antworten kann. Läuft der KI-Assistent im Auto-Modus, wählen Sie, ob er immer antwortet, nur ausserhalb der Öffnungszeiten oder immer dann, wenn niemand online ist.

Angemeldete Personen erkennen

Wenn sich Personen auf Ihrer Website anmelden, können Sie ihre Identität übergeben, damit Unterhaltungen geräteübergreifend weiterlaufen. Berechnen Sie auf Ihrem Server einen HMAC mit dem Identitäts-Secret des Projekts und übergeben Sie ihn dem Widget:

Commelia("identify", {
  userId: "42",
  email: "jane@example.org",
  name: "Jane",
  hash: "<HMAC-SHA256(identitySecret, userId) als Hex, auf Ihrem Server berechnet>",
});

Das Identitäts-Secret bleibt auf Ihrem Server. Sie können den Chat auch auf identifizierte Personen beschränken. Ohne Identität bleiben Besucher:innen anonym, ausser sie geben ihre E-Mail-Adresse an.