Website-Live-Chat

Wie installiert man einen Live-Chat auf einer Docusaurus-Website?

Chatwoot integriert sich nahtlos mit Docusaurus über das @chatwoot/docusaurus-plugin. Dieses Plugin hilft Ihnen, das Chatwoot Live-Chat-Widget ganz einfach auf einer Docusaurus-basierten Website zu installieren. Um das Plugin zu installieren, folgen Sie den unten erklärten schnellen Schritten. Schritt 1. Fügen Sie das Plugin zu Ihrem Projekt hinzu. yarn add @chatwoot/docusaurus-plugin oder npm install @chatwoot/docusaurus-plugin --save Schritt 2. Konfigurieren Sie das Plugin in docusaurus.config.js // docusaurus.config.js module.exports = { plugins: ["@chatwoot/docusaurus-plugin"], themeConfig: { chatwoot: { websiteToken: "Ihr Website-Inbox-Token", baseURL: "https://app.chatwoot.com", // optional enableInDevelopment: false, // optional chatwootSettings: { hideMessageBubble: false, position: "left", // Dies kann left oder right sein locale: "de", // Einzustellende Sprache useBrowserLanguage: false, // Widget-Sprache anhand des Browser des Nutzers setzen darkMode: "auto", // [light, auto] type: "expanded_bubble", launcherTitle: "Chatten Sie mit uns", } } } };

Wie installiert man einen Live-Chat auf einer Gatsby-Website?

Wenn Sie eine Website mit Gatsby erstellt haben, können Sie ein Chatwoot Live-Chat-Widget hinzufügen und in Echtzeit mit Ihren Besuchern sprechen. Dies lässt sich in 3 einfachen Schritten mithilfe des Chatwoot Gatsby-Plugins erledigen. Schritt 1. Fügen Sie das Gatsby-Plugin zu Ihrem Projekt hinzu​ Fügen Sie gatsby-plugin-chatwoot zu Ihrem Gatsby-Projekt hinzu. npm install --save gatsby-plugin-chatwoot Wenn Sie yarn verwenden, nutzen Sie Folgendes: yarn add gatsby-plugin-chatwoot Schritt 2. Fügen Sie das Plugin zu Ihrer Gatsby-Konfigurationsdatei hinzu​ // In Ihrer gatsby-config.js plugins: [ { resolve: `gatsby-plugin-chatwoot`, options: { baseUrl: "BASE_URL", // Erforderlich websiteToken: "WEBSITE_TOKEN", // Erforderlich includeInDevelopment: false, // Optional chatwootSettings: {}, // Optional }, }, ]; Ihren Website-Token und die Base URL finden Sie in den Inbox-Einstellungen Ihres Chatwoot-Kontos. Falls Sie einen neuen Website-Kanal erstellen müssen, folgen Sie dem hier beschriebenen Ablauf here. Schritt 3. Starten Sie Ihren Server​ Nun sollten Sie das Chatwoot-Widget auf der Seite sehen können.

Wie installiert man Live-Chat in einer Next.js-App?

Wenn Sie eine Next.js-App haben, können Sie das Chatwoot Live-Chat-Widget hinzufügen und in Echtzeit mit Ihren Besuchern sprechen. Um Chatwoot in Ihre Next.js-Anwendung zu integrieren, benötigen Sie eine Komponente, die das Chatwoot-Skript lädt. Sie können dies in zwei einfachen Schritten erledigen. Lassen Sie uns dies an einem Beispiel verdeutlichen. Dieses Beispiel zeigt eine React-Komponente, die das Chatwoot-Skript asynchron lädt. Schritt 1. Kopieren und Erstellen! Kopieren Sie den folgenden Code und erstellen Sie eine Datei im Ordner components mit dem Namen ChatwootWidget.js. import React from 'react'; class ChatwootWidget extends React.Component { componentDidMount () { // Add Chatwoot Settings window.chatwootSettings = { hideMessageBubble: false, position: 'right', // This can be left or right locale: 'en', // Language to be set type: 'standard', // [standard, expanded_bubble] }; // Paste the script from inbox settings except the <script> tag (function(d,t) { var BASE_URL="<your-installation-url>"; var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=BASE_URL+"/packs/js/sdk.js"; s.parentNode.insertBefore(g,s); g.async=!0; g.onload=function(){ window.chatwootSDK.run({ websiteToken: '<your-website-token>', baseUrl: BASE_URL }) } })(document,"script"); } render () { return null; } } export default ChatwootWidget Schritt 2. Importieren​ Importieren Sie die Komponente in Ihren Seiten oder Ihre Layout-Komponente, wie unten gezeigt. import React, { Fragment } from 'react' // ... import ChatwootWidget from '../components/ChatwootWidget' const Page = () => ( <Fragment> <ChatwootWidget /> <Component {...}> </Fragment> ) export default Page Jetzt sollten Sie das Chatwoot-Widget auf der Seite sehen können.

Wie aktiviere ich den Dunkelmodus im Live-Chat-Widget?

Moderne Websites ermöglichen es Nutzern, zwischen hellem und dunklem Modus zu wechseln. Daher ist ein Live-Chat, der mit beiden Designs funktioniert, wichtig. Diese Anleitung hilft Ihnen, den Dunkelmodus für das Chatwoot Live-Chat-Widget auf Ihrer Website einzurichten. Hier ist ein kurzer Einblick, wie der Dunkelmodus beim Live-Chat-Widget funktioniert: Um den Dunkelmodus im Chatwoot-Widget zu aktivieren, verwenden Sie den Parameter darkMode zusammen mit den chatwootSettings. Der Parameter darkMode unterstützt zwei Werte. 1. light – Nur den hellen Modus aktivieren. Dies ist der Standardwert. 2. auto – Den Dunkelmodus basierend auf der Betriebssystemeinstellung aktivieren. window.chatwootSettings = { //... andere Einstellungen darkMode: "auto", }; Hinweis: Nur dark wird derzeit nicht unterstützt. Wir werden die Unterstützung in zukünftigen Versionen hinzufügen.

Wie installiert man einen Live-Chat auf einer Webflow-Website?

Wenn Ihre Website mit Webflow erstellt wurde und Sie in Echtzeit mit Ihren Webflow-Besuchern sprechen möchten, können Sie das Chatwoot Live-Chat-Widget zu Ihrer Website hinzufügen. Folgen Sie den unten beschriebenen Schritten. Schritt 1. Erstellen Sie ein Website-Postfach in Chatwoot​ Bitte beachten Sie diese Anleitung für detaillierte Anweisungen zum Einrichten eines Website-Postfachs in Chatwoot. Schritt 2. Installieren Sie das generierte Skript in Webflow​ Melden Sie sich in Ihrem Webflow-Konto an und wählen Sie Ihre Website aus. Wählen Sie Einstellungen. ​Gehen Sie zu Custom Code -> Footer Code. Fügen Sie das Skript in das Feld "Footer Code" ein. Speichern Sie die Änderungen. Schritt 3. Veröffentlichen Sie die Änderungen​ Klicken Sie auf Veröffentlichen -> Wählen Sie die Website aus -> Veröffentlichen auf ausgewählten Domains. Schritt 4. Prüfen Besuchen Sie Ihre Website und prüfen Sie, ob das Widget auf der Website erscheint.

Wie installiert man Live-Chat in einer React Native App?

Wenn Sie eine React Native App haben, können Sie das Chatwoot Live-Chat-Widget hinzufügen und in Echtzeit mit Ihren Besuchern sprechen. Dies kann in 3 einfachen Schritten mit dem Chatwoot-Plugin erledigt werden. Schritt 1. Erstellen Sie ein Website-Postfach in Chatwoot​ Bitte lesen Sie diese Anleitung für detaillierte Anweisungen zum Einrichten eines Website-Postfachs in Chatwoot. Schritt 2. Fügen Sie das Plugin zu Ihrem Projekt hinzu​ Fügen Sie eines der folgenden Plugins zu Ihrem Projekt hinzu. yarn add @chatwoot/react-native-widget oder npm install --save @chatwoot/react-native-widget --save Diese Bibliothek ist abhängig von react-native-webview und async-storage. Bitte folgen Sie den Anweisungen in der Dokumentation. iOS Installation​ Wenn Sie React Native Versionen > 60.0 verwenden, ist die Installation relativ einfach. cd ios && pod install Schritt 3. So verwenden Sie es​ Ersetzen Sie websiteToken und baseUrl mit den entsprechenden Werten. import React, { useState } from 'react'; import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native'; import ChatWootWidget from '@chatwoot/react-native-widget'; const App = () => { const [showWidget, toggleWidget] = useState(false); const user = { identifier: 'john@gmail.com', name: 'John Samuel', avatar_url: '', email: 'john@gmail.com', identifier_hash: '', }; const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' }; const websiteToken = 'WEBSITE_TOKEN'; const baseUrl = 'CHATWOOT_INSTALLATION_URL'; const locale = 'en'; return ( <SafeAreaView style={styles.container}> <View> <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}> <Text style={styles.buttonText}>Widget öffnen</Text> </TouchableOpacity> </View> { showWidget&& <ChatWootWidget websiteToken={websiteToken} locale={locale} baseUrl={baseUrl} closeModal={() => toggleWidget(false)} isModalVisible={showWidget} user={user} customAttributes={customAttributes} /> } </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { height: 48, marginTop: 32, paddingTop: 8, paddingBottom: 8, backgroundColor: '#1F93FF', borderRadius: 8, borderWidth: 1, borderColor: '#fff', justifyContent: 'center', }, buttonText: { color: '#fff', textAlign: 'center', paddingLeft: 10, fontWeight: '600', fontSize: 16, paddingRight: 10, }, }); export default App; Und ... fertig. Schauen Sie sich das komplette Beispiel hier an.

Wie aktiviert man die Identitätsüberprüfung in Chatwoot?

Identitätsvalidierung hilft dabei, sicherzustellen, dass die Gespräche zwischen Ihren Kund:innen und Support-Mitarbeitenden privat bleiben. Sie trägt außerdem dazu bei, das Vortäuschen fremder Identitäten zu verhindern. Die Identitätsvalidierung kann aktiviert werden, indem ein HMAC generiert wird. Der Schlüssel, der zur Generierung des HMAC für jedes Web-Widget verwendet wird, ist unterschiedlich und kann unter Postfächer -> Einstellungen -> Konfiguration -> Identitätsvalidierung -> Token dort kopieren abgerufen werden. Sie können HMAC in verschiedenen Programmiersprachen generieren, wie unten gezeigt. HMAC generieren​ PHP​ <?php $key = '<webwidget-hmac-token>'; $message = '<identifier>'; $identifier_hash = hash_hmac('sha256', $message, $key); ?> Javascript (Node.js)​ const crypto = require('crypto'); const key = '<webwidget-hmac-token>'; const message = '<identifier>'; const hash = crypto.createHmac('sha256', key).update(message).digest('hex'); Ruby​ require 'openssl' require 'base64' key = '<webwidget-hmac-token>' message = '<identifier>' OpenSSL::HMAC.hexdigest('sha256', key, message) Elixir​ key = '<webwidget-hmac-token>' message = '<identifier>' signature = :crypto.hmac(:sha256, key, message) Base.encode16(signature, case: :lower) Golang​ package main import ( "crypto/hmac" "crypto/sha256" "encoding/base64" "encoding/hex" ) func main() { secret := []byte("<webwidget-hmac-token>") message := []byte("<identifier>") hash := hmac.New(sha256.New, secret) hash.Write(message) hex.EncodeToString(hash.Sum(nil)) } Python​ import hashlib import hmac import base64 secret = bytes('<webwidget-hmac-token>', 'utf-8') message = bytes('<identifier>', 'utf-8') hash = hmac.new(secret, message, hashlib.sha256) hash.hexdigest()

Wie installiert man einen Live-Chat mit dem Google Tag Manager?

Wenn Sie den Google Tag Manager auf Ihrer Website verwenden, können Sie Chatwoot über das Google Tag Manager-Dashboard installieren, indem Sie einen neuen Tag für Chatwoot erstellen. Um das Chatwoot Live-Chat-Widget zu installieren, folgen Sie bitte den untenstehenden Schritten. Schritt 1. Zugriff auf die Tag Manager-Konsole​ Melden Sie sich mit Ihrem Google-Konto beim Tag Manager-Arbeitsbereich an. Sie sehen einen Arbeitsbereich ähnlich wie unten gezeigt. Klicken Sie auf die Schaltfläche „Neuen Tag hinzufügen“ im Dashboard. Schritt 2. Einen neuen Tag mit Tag-Konfiguration erstellen​ Es erscheint ein Popup zum Erstellen eines Tags. Ändern Sie den Namen von „Unbenannter Tag“ zu „Chatwoot“ oder einem anderen gewünschten Namen. Klicken Sie auf Tag-Konfiguration und wählen Sie den Tag-Typ „Custom HTML“ aus der Liste aus. Kopieren Sie das Skript aus der Posteingangskonfiguration in Chatwoot in den HTML-Skripttextbereich, wie unten dargestellt. Aktivieren Sie das Kontrollkästchen „Support document.write“. Schritt 3. Das Triggering einrichten​ Klicken Sie auf „Triggering“ und wählen Sie „Alle Seiten“ aus der Liste aus. Klicken Sie auf „Speichern“, um den Tag zu speichern. Sie sehen den Tag unter „Workspace-Änderungen“ aufgelistet. Klicken Sie auf „Senden“, um den Tag zu veröffentlichen. Geben Sie einen Versionsnamen an und veröffentlichen Sie die Änderungen, indem Sie auf „Veröffentlichen“ klicken. Schritt 4. Von Ihrer Aufgabenliste abhaken​ Sie haben das Chatwoot Live-Chat-Widget erfolgreich auf Ihrer Website bereitgestellt. Aktualisieren Sie Ihre Website, um das Live-Chat-Widget auf allen Seiten erscheinen zu sehen.

Wie führt man Gespräche per E-Mail weiter?

Ihre Kunden können ihre Chat-Unterhaltungen mit Ihren Agenten über E-Mail-Threads fortsetzen. Dies kann in den folgenden Situationen erforderlich sein. - Es sind keine Agenten verfügbar und der Kunde hinterlässt eine Nachricht im Chat. - Der Kunde verlässt den Chat, bevor der Agent antwortet. Damit dies funktioniert, sollte der Kontakt eine E-Mail-Adresse im Chatwoot CRM hinterlegt haben. Erfassung von E-Mail-Adressen der Kontakte​ Sie können Kunden-E-Mails auf folgende Weise in Chatwoot erfassen/aktualisieren. 1. Über das Chatwoot SDK​ Wenn die E-Mail-Adresse des Kunden bekannt ist, können Sie diese über die setUser-Methode in unserem SDK an Chatwoot übergeben. 2. Über das Pre-Chat-Formular​ Wenn Sie ein obligatorisches Pre-Chat-Formular aktivieren, beginnt die Konversation mit einem Bildschirm wie unten gezeigt: 3. Über die E-Mail-Abfrage​ Wenn das Pre-Chat-Formular deaktiviert ist und die E-Mail-Adresse des Kunden unbekannt ist, startet Chatwoot die Konversation mit einer Aufforderung zur Eingabe der E-Mail-Adresse. Hinweis: Wenn Captain in einem Posteingang aktiviert ist, wird die E-Mail-Abfrage automatisch unterdrückt. Captain übernimmt die Konversation direkt, auch außerhalb der Geschäftszeiten. Die E-Mail-Abfrage wird nur gesendet, wenn Captain das Gespräch an einen menschlichen Agenten übergibt oder wenn Captain für den Posteingang nicht konfiguriert ist. Gesprächskontinuität​ Hinweis: Aktivieren Sie die Gesprächskontinuität bei selbstgehosteten Installationen mit Hilfe dieses Leitfadens. Wenn die E-Mail-Adresse des Kunden über eine der oben genannten Optionen aktualisiert wird und der Kunde den Chat verlässt, während der Agent bereits geantwortet hat, passiert Folgendes. - Der Kunde erhält einen E-Mail-Thread mit einer Zusammenfassung des Gesprächs. Er kann auf diese E-Mail antworten und so die Konversation fortsetzen. - Der Agent erhält die E-Mail-Antworten des Kunden in seinem Chatwoot-Dashboard, wobei der bestehende Gesprächsverlauf fortgeführt wird. Das E-Mail-Symbol in der Chat-Blase zeigt an, dass der Kunde per E-Mail geantwortet hat.

Wie installiert man Live-Chat in einer Vue.js-App?

Um Chatwoot in Ihre Vue.js-Anwendung zu integrieren, müssen Sie das Chatwoot-Widget-Script in die Datei index.html Ihrer Vue.js-Anwendung einfügen. So gehen Sie vor: Schritt 1. Holen Sie sich Ihr Widget-Script​ Ihr Widget-Script finden Sie in den Einstellungen Ihres Website-Posteingangs. Gehen Sie zu Einstellungen -> Posteingänge -> Wählen Sie Ihren Website-Kanal aus > Konfigurations-Tab. Falls Sie noch keinen Website-Posteingang erstellt haben, finden Sie eine Schritt-für-Schritt-Anleitung hier. Schritt 2. Kopieren Sie das Script​ Kopieren Sie das Script, das im code-Feld des Kanals erstellt wurde. Schritt 3. Fügen Sie das Script hier ein​ Öffnen Sie Ihr Vue-Projekt und fügen Sie das Script in die Datei index.html ein, direkt vor dem schließenden </body>-Tag. <body> <noscript> <strong >Es tut uns leid, aber <%= htmlWebpackPlugin.options.title %> funktioniert ohne aktiviertes JavaScript nicht richtig. Bitte aktivieren Sie JavaScript, um fortzufahren.</strong > </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- Chatwoot script goes here --> <script> (function (d, t) { var BASE_URL = "https://example.com"; var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = BASE_URL + "/packs/js/sdk.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g, s); g.onload = function () { window.chatwootSDK.run({ websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1", baseUrl: BASE_URL, }); }; })(document, "script"); </script> <!-- Chatwoot script goes here --> </body> Schritt 4. Überprüfen​ Sie sollten jetzt das Chatwoot-Widget auf der Seite sehen. Das sieht ungefähr so aus: Vue.js, Nuxt.js Modul​ Ein Community-gepflegtes Modul (erstellt von den großartigen Leuten von @huntersofbook) zur Integration von Chatwoot in Ihre Vue 3- und Nuxt 3-Projekte ist verfügbar. Sie finden eine Demo hier. - Siehe Vue 3 Modul. - Siehe Nuxt 3 Modul.

Wie installiert man einen Live-Chat auf einer WordPress-Website?

WordPress ist ein beliebtes Content-Management-System. Wenn Sie Ihre Website mit WordPress betreiben, können Sie ein Chatwoot-Live-Chat-Widget hinzufügen und in Echtzeit mit Ihren Besuchern chatten. Dies kann in 4 einfachen Schritten mit dem WordPress-Plugin von Chatwoot erledigt werden. Schritt 1. Laden Sie das Chatwoot-Plugin herunter Laden Sie die Zip-Datei des neuesten Chatwoot WordPress-Plugins von GitHub herunter, wie unten gezeigt. Schritt 2. Laden Sie das Plugin auf Ihre WordPress-Website hoch Melden Sie sich bei Ihrem WordPress-Konto an. Navigieren Sie zum Admin-Panel und klicken Sie im Seitenmenü auf „Plugins“. Sie sehen dann die Schaltfläche „Neu hinzufügen“. Sie sehen nun eine Option, um das Plugin hochzuladen, wie im Screenshot unten zu sehen ist. Klicken Sie auf „Hochladen“ und wählen Sie die in Schritt 1 heruntergeladene Zip-Datei aus. Schritt 3. Aktivieren Sie das Plugin Nachdem das Plugin hochgeladen wurde, sehen Sie eine Erfolgsmeldung mit der Option „Plugin aktivieren“, wie unten gezeigt. Klicken Sie auf die Schaltfläche „Plugin aktivieren“. Glückwunsch! Das Plugin ist nun installiert. Um die Konfiguration abzuschließen, müssen Sie wie in den nächsten Schritten gezeigt die Chatwoot-App-Zugangsdaten hinterlegen. Schritt 4. Konfigurieren Sie das Plugin Nun sehen Sie „Chatwoot Einstellungen“ im Menü „Einstellungen“. Klicken Sie darauf, um die Live-Chat-Konfiguration zu bearbeiten. Es erscheint der Einstellungsbildschirm wie unten abgebildet. Konfigurieren Sie hier Ihr Chatwoot-Plugin, damit es funktioniert. Sie müssen ein Website-Postfach in Ihrer Chatwoot-Installation erstellen. Hinweise dazu finden Sie in diesem Leitfaden. Die Formularfelder werden im Folgenden erläutert. 1. Chatwoot Website-Token / Chatwoot Installations-URL Nachdem Sie ein Website-Postfach in Ihrer Chatwoot-Installation erstellt haben, erhalten Sie ein Skript. Sie können den Token und die URL wie unten angezeigt kopieren. 2. Widget-Design Chatwoot unterstützt zwei Live-Chat-Widget-Designs – Standard-Design und ein erweitertes Bubble-Design. Wählen Sie Ihre bevorzugte Variante. 3. Widget-Position Sie können auswählen, wo das Live-Chat-Widget auf der Website angezeigt werden soll. Die verfügbaren Optionen sind Links & Rechts. 4. Sprache Chatwoot unterstützt über 30 Sprachen. Die Standardsprache ist Englisch. 5. Launcher-Text Dies ist ein optionales Feld. Wenn Sie das erweiterte Bubble-Design verwenden, können Sie den Launcher-Text zur Anpassung der im Bubble angezeigten Textes verwenden. Nachdem Sie das Formular ausgefüllt haben, klicken Sie auf „Änderungen speichern“. Stellen Sie außerdem sicher, dass Sie das Website-Postfach in Chatwoot eingerichtet haben. Schritt 5. Überprüfen Sie, ob das Plugin korrekt funktioniert Besuchen Sie Ihre Website und prüfen Sie, ob das Widget auf der Website erscheint!

Verstehen von Kontaktidentität und Identitätsüberprüfung in Chatwoot

Wenn ein Kunde Ihr Team kontaktiert, erstellt oder aktualisiert Chatwoot ein Kontaktprofil für ihn. Dieses Profil hilft den Agenten dabei zu verstehen, wer der Kunde ist, welche Unterhaltungen er zuvor geführt hat und über welchen Kanal er Kontakt aufgenommen hat. Zum Beispiel kann derselbe Kunde Sie kontaktieren über: - Live-Chat auf der Website - WhatsApp - E-Mail - Ein In-App-Support-Widget Chatwoot kann Identifikatoren wie eine E-Mail-Adresse, Telefonnummer oder eine eindeutige Kunden-ID verwenden, um diese Interaktionen dem gleichen Kundenprofil zuzuordnen. Kontaktabgleich vs. Identitätsvalidierung Es gibt zwei verwandte, aber unterschiedliche Konzepte: Kontaktabgleich hilft Chatwoot dabei zu erkennen, dass zwei Unterhaltungen zum selben Kunden gehören könnten. Identitätsvalidierung hilft Chatwoot zu bestätigen, dass der Kunde tatsächlich berechtigt ist, diese Identität zu verwenden. Dies ist wichtig, weil jemand die E-Mail-Adresse eines anderen Kunden in ein öffentliches Chat-Formular eingeben könnte. Der Kontaktabgleich speichert dann zwar die E-Mail, aber es wird dadurch nicht bewiesen, dass der Besucher tatsächlich der Besitzer dieser E-Mail oder dieses Kontos ist. Was Agenten sehen, wenn die Identität nicht verifiziert ist Wenn die Kundenidentität nicht verifiziert ist, zeigt Chatwoot einen Warnhinweis neben dem Kontaktnamen an. Dies hilft den Agenten zu verstehen, dass der Besucher nicht zuverlässig durch Ihre Anwendung verifiziert wurde. Das bedeutet nicht zwangsläufig, dass der Kunde verdächtig ist. Es bedeutet lediglich, dass Chatwoot für diesen Besucher kein vertrauenswürdiges Identitätsvalidierungs-Token erhalten hat. Bei sensiblen Anfragen sollten Agenten daher vorsichtig sein, bevor sie private Informationen wie Rechnungsstellungen, Kontodetails, Transaktionen oder den Verifizierungsstatus besprechen. Warum Identitätsvalidierung wichtig ist Die Identitätsvalidierung hilft, private Kundenunterhaltungen zu schützen. Sie reduziert das Risiko von Identitätsdiebstahl, besonders wenn der Support innerhalb eines eingeloggten Kundenportals, einer Banking-App, einer Trading-Plattform, eines SaaS-Dashboards oder einem anderen konto­basierten Produkt stattfindet. Wenn beispielsweise ein eingeloggter Kunde aus Ihrem Portal heraus einen Chat startet, kann Ihr System Chatwoot sicher mitteilen: „Dieser Besucher ist Kunde 12345 und wir haben das auf unserer Seite verifiziert.“ Chatwoot kann der Identität dann vertrauen, weil sie durch Ihr Backend-System bestätigt wurde und nicht nur über ein Chat-Formular eingetippt wurde. Empfohlene Einrichtung Für Besucher öffentlicher Websites können Sie normale Kontaktfelder wie Name, E-Mail und Telefonnummer nutzen. Für eingeloggte Nutzer empfehlen wir, die Identitätsvalidierung zu aktivieren. Dies ist besonders sinnvoll, wenn Agenten sensible Informationen besprechen, wie zum Beispiel: - Kontodetails - Abrechnungsinformationen - Bestellungen oder Transaktionen - KYC- oder Verifizierungsstatus - interne Mitarbeiteranfragen - regulierte Support-Anfragen Wo man die Identitätsvalidierung aktiviert Die Identitätsvalidierung kann in den Einstellungen Ihres Website-Posteingangs konfiguriert werden. Navigieren Sie zu: Einstellungen -> Posteingänge -> Website-Posteingang auswählen -> Konfiguration -> Identitätsvalidierung In diesem Abschnitt zeigt Chatwoot den geheimen Schlüssel an, der zum Erzeugen sicherer Identitäts-Token verwendet wird. Sie können auch einstellen, ob die Identitätsvalidierung für alle Unterhaltungen erforderlich sein soll. Wenn Identitätsvalidierung für alle Unterhaltungen erforderlich aktiviert ist, müssen Besucher ein gültiges Identitäts-Token angeben, bevor sie Unterhaltungen starten können. Anfragen ohne gültiges Token werden abgelehnt. So funktioniert es einfach erklärt Ihre Anwendung erstellt für den eingeloggten Nutzer eine sichere Signatur. Chatwoot prüft diese Signatur, bevor die Nutzeridentität akzeptiert wird. Der Schlüssel zur Erstellung dieser Signatur bleibt auf Ihrem Server und darf nicht im Browser offengelegt werden. Ist die Signatur gültig, behandelt Chatwoot die Kundenidentität als verifiziert. Wenn die Identitätsvalidierung verpflichtend ist und die Signatur fehlt oder ungültig ist, lehnt Chatwoot die Anfrage ab. Was Agenten wissen sollten Agenten müssen das technische Setup nicht verstehen. Wichtig ist: Wenn die Identitätsvalidierung aktiviert ist, stammt die im Chatwoot angezeigte Kundenidentität aus der eingeloggten Session des Kunden – und nicht aus einem Wert, den der Kunde manuell ins Chatfenster eingegeben hat. Dadurch bekommt das Supportteam mehr Sicherheit beim Umgang mit sensiblen Anliegen. Wann sollte man Identitätsvalidierung nutzen Verwenden Sie die Identitätsvalidierung immer dann, wenn das Chat-Widget innerhalb eines eingeloggten Produkts oder Kundenportals angezeigt wird. Beispiele: - Fintech-Kundenportal - Banking-Dashboard - E-Commerce-Kontobereich - SaaS-Anwendung - Mitarbeiter-Helpdesk-Portal - Gesundheits- oder Versicherungsportal Für eine öffentliche Marketing-Website ist die Identitätsvalidierung optional. Für eingeloggten Kundensupport wird sie jedoch dringend empfohlen. Für Entwickler Dieser Artikel erklärt das Konzept auf hoher Ebene. Wenn Sie bereit sind, die Identitätsvalidierung zu konfigurieren, nutzen Sie diese technische Anleitung.

Wie kann man zusätzliche Benutzerinformationen mit dem SDK an Chatwoot senden?

Das Chatwoot Website-SDK ermöglicht es Ihnen, zusätzliche Benutzerinformationen an Chatwoot zu übermitteln. Wenn Sie unseren Code auf Ihrer Website installiert haben, stellt das SDK das Objekt window.$chatwoot bereit. Um sicherzustellen, dass das SDK vollständig geladen ist, achten Sie darauf, auf das Ereignis chatwoot:ready wie folgt zu hören: window.addEventListener("chatwoot:ready", function () { // Verwenden Sie window.$chatwoot hier // ... }); Wenn Sie Nachrichten im Widget mitverfolgen möchten, können Sie folgendes Ereignis nutzen. window.addEventListener('chatwoot:on-message', function(e) { console.log('chatwoot:on-message', e.detail) }) SDK-Einstellungen​ Um die Sprechblase auszublenden, können Sie die unten stehende Einstellung verwenden. Hinweis: Wenn Sie dies verwenden, müssen Sie das Widget ebenfalls auslösen. window.chatwootSettings = { hideMessageBubble: false, showUnreadMessagesDialog: false, // Dialog für ungelesene Nachrichten deaktivieren position: "left", // Dies kann 'left' oder 'right' sein locale: "en", // Sprache, die festgelegt werden soll useBrowserLanguage: false, // Sprache des Widgets aus dem Browser des Nutzers festlegen type: "standard", // [standard, expanded_bubble] darkMode: "auto", // [light, auto] // baseDomain: "yourdomain.com" // konfigurieren, falls Sie Nutzer über Subdomains verfolgen möchten }; Die Browser-Sprache im Live-Chat-Widget automatisch verwenden Um das Live-Chat-Widget in der Sprache des Browsers des Nutzers anzuzeigen, setzen Sie useBrowserLanguage in den oben erwähnten window.chatwootSettings auf true. Hinweis: Wenn useBrowserLanguage auf true gesetzt ist, wird die angegebene locale ignoriert. Wenn die vom Browser genutzte Sprache von Chatwoot nicht unterstützt wird, wird die unter locale angegebene Sprache genutzt. Fehlt auch diese, verwendet das Widget die Sprache des Agenten-Dashboards. Dark Mode​ Das Chatwoot Live-Chat-Widget unterstützt Dark Mode ab Version 2.4.0. Um den Dark Mode zu aktivieren, folgen Sie den Schritten hier. Widget-Designs​ Chatwoot unterstützt zwei Designs für das Widget. 1. Standard (Voreinstellung) 2. Erweiterte Sprechblase Wenn Sie die erweiterte Sprechblase verwenden, können Sie den Text innerhalb der Sprechblase anpassen, indem Sie den Parameter launcherTitle in chatwootSettings wie unten beschrieben setzen. window.chatwootSettings = { type: "expanded_bubble", launcherTitle: "Chatten Sie mit uns", }; Popout-Fenster aktivieren​ Um das Popout-Fenster zu aktivieren, fügen Sie folgende Konfiguration zu chatwootSettings hinzu. Diese Option ist standardmäßig deaktiviert. window.chatwootSettings = { // ...Weitere Einstellungen showPopoutButton: true, } Sie können das Chatfenster auch programmatisch mit der Methode `popoutChatWindow()` aufpoppen lassen. Eigene Nachrichten​ Passen Sie die Begrüßungs- und Verfügbarkeitsnachrichten im Widget-Kopfbereich und bei Teamstatus-Anzeige an. window.chatwootSettings = { // ...Weitere Einstellungen welcomeTitle: "Brauchen Sie Hilfe?", // Eigener Widget-Kopfbereich welcomeDescription: "Wir sind für Sie da.", // Untertitel im Kopfbereich availableMessage: "Wir sind online und bereit zum Chatten!", // Wenn das Team online ist unavailableMessage: "Wir sind momentan offline." // Wenn das Team nicht verfügbar ist }; Funktionsschalter Aktivieren oder deaktivieren Sie optionale UI-Funktionen im Widget: window.chatwootSettings = { // ...Weitere Einstellungen enableFileUpload: true, // Dateianhangs-Schaltfläche anzeigen enableEmojiPicker: true, // Emoji-Auswahl im Chat-Eingabefeld aktivieren enableEndConversation: true // Nutzern erlauben, das Gespräch zu beenden }; Popout-Fenster programmatisch öffnen​ Sie können das Popout-Fenster programmatisch mit der popoutChatWindow() Methode öffnen. Um dies zu starten, rufen Sie die Methode wie unten gezeigt auf. window.$chatwoot.popoutChatWindow(); Sichtbarkeit der Widget-Sprechblase umschalten​ Wenn Sie die Chatwoot Widget-Sprechblase ein- oder ausblenden möchten, können Sie toggleBubbleVisibility('show/hide') verwenden. Beispiel window.$chatwoot.toggleBubbleVisibility("show"); // um die Blase anzuzeigen window.$chatwoot.toggleBubbleVisibility("hide"); // um die Blase auszublenden Widget programmatisch auslösen Wenn Sie das Chatfenster durch Klicken auf einen Link auf Ihrer Website öffnen möchten, nutzen Sie die folgende Methode. Rufen Sie bei Ihrer Aktion das Chatwoot SDK wie beschrieben auf. window.$chatwoot.toggle(); // Widget umschalten durch Übergabe eines Zustands window.$chatwoot.toggle("open"); // Widget öffnen window.$chatwoot.toggle("close"); // Widget schließen Benutzer im Widget festlegen​ window.$chatwoot.setUser("<unique-identifier-key-of-the-user>", { email: "<email-address-of-the-user@your-domain.com>", name: "<name-of-the-user>", avatar_url: "<avatar-url-of-the-user>", phone_number: "<phone-number-of-the-user>", }); setUser akzeptiert eine Kennung, die eine user_id in Ihrer Datenbank oder ein beliebiger eindeutiger Parameter sein kann, der einen Benutzer darstellt. Sie können E-Mail, Name, avatar_url, phone_number als Parameter übergeben. Unterstützung für zusätzliche Parameter ist in Arbeit. Stellen Sie sicher, dass Sie die Sitzung zurücksetzen, wenn sich der Nutzer aus Ihrer App ausloggt. Identitätsvalidierung mit HMAC​ Um sich vor Identitätsdiebstahl zu schützen und die Unterhaltung mit Ihren Kunden privat zu halten, empfehlen wir, die Identitätsvalidierung in Chatwoot einzurichten. Die Identitätsvalidierung wird durch Erzeugen eines HMAC (hash-basierten Message Authentication Code) basierend auf dem identifier-Attribut mittels SHA256 realisiert. Zusammen mit dem identifier können Sie auch identifier_hash wie unten gezeigt übergeben, um sicherzugehen, dass der Nutzer der richtige ist. window.$chatwoot.setUser(`<unique-identifier-key-of-the-user>`, { name: "", // Name des Nutzers avatar_url: "", // Avatar-URL email: "", // E-Mail des Nutzers identifier_hash: "", // auf Grundlage des webwidget hmac_token generierter Identifizierungs-Hash phone_number: "", // Telefonnummer des Nutzers description: "", // Beschreibung zum Nutzer country_code: "", // Zweistelliger Ländercode city: "", // Stadt des Nutzers company_name: "", // Firmenname social_profiles: { twitter: "", // Twitter-Name linkedin: "", // LinkedIn-Nutzername facebook: "", // Facebook-Nutzername github: "", // Github-Nutzername }, }); Zur Generierung des HMAC lesen Sie Identitätsvalidierung. Die Implementierung von HMAC-Authentifizierung erlaubt, dass Chatverläufe über verschiedene Sitzungen hinweg bestehen bleiben. Benutzerdefinierte Attribute setzen​ Um zusätzliche Informationen über den Kunden zu speichern, können Sie das Feld für benutzerdefinierte Attribute verwenden. Mehr zu benutzerdefinierten Attributen erfahren Sie hier. Um ein benutzerdefiniertes Attribut zu setzen, rufen Sie setCustomAttributes wie folgt auf window.$chatwoot.setCustomAttributes({ accountId: 1, pricingPlan: "paid", // Hier der Schlüssel, der bereits als benutzerdefiniertes Attribut definiert ist // Wert muss entsprechend dem Typ sein (aktuell unterstützt: Number, Date, String und Number) }); Diese Informationen sind im Seitenpanel einer Konversation sichtbar. Um ein benutzerdefiniertes Attribut zu löschen, verwenden Sie deleteCustomAttribute wie folgt window.$chatwoot.deleteCustomAttribute("attribute-key"); Sprache manuell festlegen​ window.$chatwoot.setLocale("en"); Um die Sprache manuell zu setzen, nutzen Sie die setLocale-Funktion. Labels auf der Konversation setzen​ Bitte beachten Sie, dass Labels nur auf eine Konversation gesetzt werden, falls der Nutzer noch keine Konversation begonnen hat. In diesem Fall haben folgende Aktionen keinen Effekt: window.$chatwoot.setLabel("support-ticket"); window.$chatwoot.removeLabel("support-ticket"); Sitzung aktualisieren (verwenden Sie dies beim Abmelden des Nutzers aus Ihrer App)​ window.$chatwoot.reset(); Widget-Fehler​ Um Fehler im Widget zu sehen, achten Sie darauf, auf das Ereignis chatwoot:event wie folgt zu hören: window.addEventListener("chatwoot:error", function () { // ... }); Hinweis: Diese Funktion ist verfügbar ab v2.3.0. Begrüßungskopf und -beschreibung anpassen Sie können Folgendes ändern: - Den Begrüßungstitel und die Beschreibung - Nachrichten, wenn Ihr Team online oder offline ist - UI-Funktionen wie Dateiupload, Emoji-Auswahl und Button zur Gesprächsbeendigung gezielt aktivieren window.chatwootSettings = { welcomeTitle: 'Brauchen Sie Hilfe?', welcomeDescription: 'Wir sind für Sie da.', availableMessage: 'Wir sind online und bereit zum Chatten!', unavailableMessage: 'Wir sind momentan offline.', enableFileUpload: true, enableEmojiPicker: true, enableEndConversation: true };

Erläuterung der Einstellungen für den Website-Live-Chat

Dieses Dokument hilft Ihnen dabei, Ihren Website-Live-Chat vollständig einzurichten. Es erklärt, wie Sie zusätzliche Einstellungen für ein gewünschtes Website-Postfach erstellen und nutzen können. Kompatibilität und Anforderungen​ Das Web-Dashboard und das Live-Chat-Widget funktionieren mit den meisten modernen Webbrowsern. Hier sind die unterstützten Browserversionen: - Mozilla Firefox: ab Version 52 - Google Chrome: ab Version 57 - Chromium: ab Version 57 - Apple Safari: ab Version 14.1 - Microsoft Edge: ab Version 16 Hier sind die unterstützten mobilen Betriebssystemversionen für die Chatwoot Mobile App: - Android: ab Version 5.0 - iOS: ab Version 11.0 Wie erstellt man einen Website-Kanal in Chatwoot? Schritt 1. Gehen Sie auf die Postfächer-Seite. Gehen Sie zu Einstellungen → Postfächer → „Postfach hinzufügen“-Button. Schritt 2. Klicken Sie auf das "Website"-Symbol. Schritt 3. Geben Sie den Namen Ihrer Website, die URL und weitere Details wie unten beschrieben ein. Die verfügbaren Felder sind unten erklärt. 1. Website-Name Geben Sie den Namen Ihrer Website ein. Zum Beispiel: Beispiel GmbH. 2. Website-Domain Geben Sie die URL Ihrer Website ein. Zum Beispiel: www.example.com 3. Widget-Farbe Klicken Sie auf die Palette und wählen Sie eine Farbe für Ihr Live-Chat-Widget auf der Website. 4. Begrüßungsüberschrift Schreiben Sie eine Begrüßung für Ihre Kunden. Zum Beispiel: Hallo 👋 5. Willkommens-Tagline Zum Beispiel: Wir sind hier, um Ihnen bei Ihren Fragen zu helfen. Fragen Sie uns alles oder teilen Sie uns Ihr Feedback mit. 6. Begrüßung für den Kanal aktivieren/deaktivieren Aktivieren, um eine Begrüßungsnachricht zu senden, wenn der Kunde die Konversation startet 7. Kanal-Begrüßungsnachricht Geben Sie eine Begrüßung ein, um die Konversation zu beginnen. Zum Beispiel: Hallo. Wie können wir Ihnen helfen? Nachdem alle Details eingegeben wurden, klicken Sie auf den Button „Postfach erstellen“. Schritt 4. „Fügen Sie Agenten“ zu Ihrem Website-Postfach hinzu. Die Konversationen werden nur dann an Agenten weitergeleitet, wenn sie mit dem Postfach verknüpft sind. Auch wenn Sie Administrator sind, müssen Sie sich selbst als Agent zum Postfach hinzufügen, um dieses auf Ihrem Bildschirm zu sehen. Wählen Sie die Agenten aus dem Dropdown-Menü und klicken Sie auf „Agenten hinzufügen“. Wenn keine Agenten hinzugefügt wurden, folgen Sie den Schritten zum Agenten hinzufügen. Schritt 5. Hurra! Sie haben erfolgreich ein Website-Postfach erstellt. Fügen Sie jetzt das Widget zu Ihrer Website hinzu. Kopieren Sie den auf der Seite angezeigten Code und fügen Sie ihn in Ihre Website ein, um Ihre Kunden zu unterstützen. Sie können auf den Kopieren-Button klicken und dann in die Root-Datei Ihrer Website einfügen. Wenn Sie auf den "Mehr Einstellungen"-Button klicken, gelangen Sie zu den Zusätzlichen Einstellungen für das Postfach. Wenn Sie auf den "Bring mich dorthin"-Button klicken, gelangen Sie zum neu erstellten Postfach. Schritt 6. Wenn Sie die Agenten aktualisieren möchten, die Zugriff auf das Postfach haben, gehen Sie zu Einstellungen → Postfächer. Sie sehen dort Ihr Website-Postfach aufgelistet. Klicken Sie auf Einstellungen. Sie sehen den Code sowie die Liste der Agenten, die Zugriff auf das Postfach haben. Einrichtung des Website-Postfachs abschließen Sie haben bereits ein funktionierendes Website-Postfach. Lassen Sie uns einen Blick auf die zusätzlichen Postfach-Einstellungen werfen.​ Klicken Sie auf Ihrem Postfächer-Bildschirm auf das Zahnrad-Symbol, um zur Einstellungsseite zu gelangen. Sie sehen den folgenden Bildschirm: Tab Einstellungen Scrollen Sie nach unten, um weitere Einstellungen zu sehen, in denen Sie die verschiedenen Benachrichtigungen auswählen können, die Sie erhalten möchten, wenn Ihr Website-Postfach aktiv wird. Hier sind ein paar Beispiele zum Verständnis: E-Mail-Sammelbox aktivieren ist standardmäßig aktiviert. Dies bedeutet, dass eine automatische Nachricht zur Erfassung der E-Mail-Adresse angezeigt wird, sobald der Kunde eine Konversation startet. Der Kunde/Endbenutzer erhält eine Aufforderung, eine E-Mail-Adresse einzugeben. CSAT aktivieren. Sobald Sie dies aktivieren, wird Ihre Kundenzufriedenheitsumfrage jedes Mal gestartet, wenn ein Ticket gelöst wird. Die CSAT-Ergebnisse können später im Berichte-Bereich eingesehen werden. Klicken Sie auf den "Aktualisieren"-Button, um die vorgenommenen Änderungen zu speichern. Tab Mitarbeiter​ Klicken Sie auf die Registerkarte „Mitarbeiter“. Hier können Sie Agenten zum Postfach hinzufügen oder bereits hinzugefügte Agenten löschen. Sie können auch die automatische Zuweisung neuer Konversationen an die zu diesem Postfach hinzugefügten Agenten aktivieren oder deaktivieren. Klicken Sie auf Aktualisieren, um die Änderungen zu speichern. Tab Geschäftszeiten​ Klicken Sie auf die Registerkarte „Geschäftszeiten“. In diesem Abschnitt können Sie die Arbeitszeiten Ihres Teams einstellen. Aktivieren Sie das Kontrollkästchen für Geschäftszeiten für dieses Postfach aktivieren, wenn Sie klar definierte Geschäftszeiten haben. Nachdem das Kästchen aktiviert wurde, öffnet sich ein neuer Abschnitt wie unten gezeigt. Sie können Ihre Nachricht verfassen, die dem Kunden außerhalb der Geschäftszeiten angezeigt wird. Hinweis: Wenn Captain in einem Postfach aktiviert ist, wird die Abwesenheitsnachricht automatisch unterdrückt. Captain übernimmt die Konversationen direkt, auch außerhalb der Geschäftszeiten. Die Abwesenheitsnachricht wird nur gesendet, wenn Captain die Unterhaltung an einen menschlichen Agenten übergibt oder Captain für das Postfach nicht konfiguriert ist. Sie können außerdem für jeden Wochentag die verfügbaren Geschäftszeiten sowie die korrekte Zeitzone einstellen. Klicken Sie auf den Geschäftszeiten aktualisieren Button. Tab Pre-Chat-Formular​ Klicken Sie auf die Registerkarte „Pre-Chat-Formular“. Damit können Sie Informationen über Ihre Kunden erfassen, sobald diese Ihr Live-Chat-Fenster/Website-Widget betreten. Sie können damit Name, E-Mail-Adresse und mehr abfragen, bevor Sie mit dem Chat beginnen. Die angezeigten Felder werden unten erklärt: 1. Pre-Chat-Formular aktivieren Wählen Sie Ja oder Nein. Ja, wenn Sie das Pre-Chat-Formular nutzen möchten. Nein, wenn es deaktiviert bleiben soll. 2. Pre-Chat-Nachricht Schreiben Sie eine Nachricht, um eine Konversation mit dem Kunden zu beginnen. Zum Beispiel: Hallo, wir benötigen ein paar Informationen, um Ihnen besser helfen zu können. 3. Felder im Pre-Chat-Formular Kreuzen Sie die benötigten an. Wichtig: "Name", "E-Mail" und "Telefon" sind die einzigen Standardattribute für das Pre-Chat-Formular. Weitere Felder werden über benutzerdefinierte Attribute erstellt. Wenn Sie eigene Felder benötigen, legen Sie diese zuerst als benutzerdefinierte Attribute an. Klicken Sie auf „Aktualisieren“. Das Pre-Chat-Formular ist jetzt aktiviert. Tab Konfiguration​ Klicken Sie auf die Registerkarte „Konfiguration“. Hier finden Sie den Code, der auf der Website eingefügt werden muss. Sie können auf den Kopieren-Button klicken, um den Code zu kopieren, und fügen Sie ihn in die Root-Datei Ihrer Website ein. Tab Widget Builder​ Sie können Ihr Web-Widget mit den auf dieser Seite bereitgestellten einfachen Einstellungen anpassen. Sie sehen Ihre Änderungen live.