Das Website-Chat-Widget ermöglicht es Website-Besuchern, Sie per Live-Chat oder über andere von Ihnen verbundene Messaging-Kanäle zu kontaktieren.

Verbinden eines Website-Chat-Widgets

Sehen Sie sich das Video unten an, um eine Schritt-für-Schritt-Anleitung zum Verbinden des Website-Chats mit respond.io zu erhalten.

How to Connect Website Chat to respond.io

Schritt 1: Gehe zu Einstellungen > Kanäle

Schritt 2: Klicken Sie auf Kanal hinzufügen > Website-Chat > Verbinden

Schritt 3: Geben Sie die Website(s) ein, zu der/denen das Widget hinzugefügt werden soll.

Im Folgenden erfahren Sie, wie Sie Websites auf die Whitelist setzen können.

Wenn der Benutzerhttps://app.respond.iohinzufügt, wird nurhttps://app.respond.ioauf die Whitelist gesetzt. Andere Subdomänen oder Roots sollten nicht funktionieren.
Wenn der Benutzerhttps://*.respond.iohinzufügt, werden alle Subdomänen einschließlich der Stammdomäne auf die Whitelist gesetzt.
Wenn der Benutzerhttps://respond.iohinzufügt, wird nur die Stammdomäne auf die Whitelist gesetzt.

Schritt 4:Wählen Sie mit der interaktiven Farbauswahl eine Designfarbe für das Widget aus.

Wählen Sie eine Farbe, die zu Ihrer Marke , Farbe und Website passt.

Schritt 5:Wählen Sie ein Symbol für das Widget aus, das auf der Website angezeigt werden soll. Wenn Sie lieber ein benutzerdefiniertes Symbol hochladen möchten, können Sie ein quadratisches Symbol mit einer empfohlenen Größe von 256 x 256 Pixel hochladen.

Nach der Verbindung können Widgets weiter angepasst werden.

Schritt 6: Klicken Sie aufWeiter> Fügen Sie Ihrer bevorzugten Website das Skript hinzu. Alternativ können Sie die Installationsanleitung auch per E-Mail an eine andere Person senden.

Installieren des Chat-Widgets

Möglicherweise benötigen Sie einen Webmaster oder technischen Administrator, der Sie bei der Installation des Chat-Widgets auf der Website unterstützt. Bitte holen Sie sich bei Bedarf Hilfe.

Je nachdem, welches System Sie zum Erstellen und Verwalten Ihrer Website verwenden, haben wir eine Schritt-für-Schritt-Anleitung erstellt, die Sie durch die Installation eines Chat-Widgets auf Ihrer Website führt.

Navigieren Sie bei anderen Plattformen oder Diensten zur HTML-Quelle der Seite. Fügen Sie das Skript vor dem Tag </body> ein.

<body>
...
...
...
<Paste Script Here>
</body>

Wenn Sie Hilfe benötigen, können Sie das Skript zusammen mit den Installationsanweisungen an Ihren Website-Administrator weiterleiten. Aktivieren Sie das entsprechende Kontrollkästchen und geben Sie die E-Mail-Adresse einer Person ein, die Ihnen bei der Installation des Chat-Plugins helfen kann.

Das respond.io-Website-Chat-Widget wird auf Ihrer Site angezeigt, sobald das Skript erfolgreich installiert wurde.

Anpassen des Chat-Widgets

Schritt 1:Gehen Sie in Ihrem Arbeitsbereich zuEinstellungen>Kanal

Schritt 2: Suchen Sie den Website-Chat-Kanal > Klicken Sie auf Anpassen

Passen Sie das Website-Widget an, damit es zum Erscheinungsbild der Website'passt und nahtlos aussieht. Auf der rechten Seite der Seite befindet sich eine Vorschau des Website-Chat-Widgets. Jede am Widget vorgenommene Anpassung wird im Widget widergespiegelt, damit Sie eine bessere Vorstellung davon bekommen, was Sie anpassen.

Anzeige & Aussehen

Sie können Folgendes anpassen, um das Erscheinungsbild des Widgets auf der Website zu ändern.

Feld	Beschreibung
Designfarbe	Die gewählte Farbe wird als Primärfarbe Ihres Widgets verwendet.
Textfarbe	Die gewählte Farbe wird als primäre Textfarbe Ihres Widgets verwendet.
Website-Chat-Symbol	Das ausgewählte Symbol wird zusammen mit der Designfarbe innerhalb der Widget-Blase verwendet. Bei Bedarf können Sie ein benutzerdefiniertes Symbol hochladen.
Popup-Nachricht	Die Popup-Nachricht wird Website-Besuchern einmal täglich 5 Sekunden nach dem Laden der Seite angezeigt. Wenn nicht definiert, wird den Website-Besuchern keine Popup-Nachricht angezeigt.

Validierung für das Website-Chat-Symbol:

Maximale Dateigröße: 1 MB
Maximale Dateigröße: 256 x 256 Pixel
Form: Quadrat

Position

Feld	Beschreibung
Ausrichten an	Benutzer können eine Position angeben, ob das Widget links oder rechts auf der Plattform angezeigt werden soll.
Vertikaler Abstand	Benutzer können den vertikalen Abstand zwischen dem Website-Chat-Widget und dem unteren Bildschirmrand festlegen.
Horizontaler Abstand	Benutzer können den horizontalen Abstand zwischen dem Website-Chat-Widget und der Bildschirmseite festlegen.
Widget-Größe	Benutzer können die Größe des Widgets zwischen Klein, Standard oder Groß auswählen.
Anzeigeoptionen	Benutzer können wählen, ob dieses Widget auf dem Desktop, auf Mobilgeräten oder auf beiden angezeigt werden soll.

Header-Elemente

Feld	Beschreibung
Titel	Der Titel wird oben in Ihrem Chat-Widget angezeigt.
Slogan	Der Slogan wird unter dem Titel angezeigt.
Website-Chat-Logo	Legen Sie Ihr Logobild hier ab, damit es oben im Website-Chat angezeigt wird. Das Format kann entweder PNG, SVG oder JPG sein und die Dateigröße beträgt nicht mehr als 4,0 MB.
Kanalsymbole	Mit dieser Option können Kontakte Sie über ihren bevorzugten Kanal kontaktieren, sofern die Optionen angegeben sind. Sie können bis zu sechs Kanäle hinzufügen und diese werden oben im Website-Chat-Widget angezeigt.
Farbe der Kanalsymbole	Die Kanalsymbole können in Ihrem Chat-Widget in weißer oder farbiger Form angezeigt werden. Wählen Sie Weiß oder Farbig passend zur Designfarbe Ihres Chat-Widgets.

Validierung für das Website-Chat-Logo:

Maximale Dateigröße: 4 MB
Maximale Dateigröße: 1024 x 1024 Pixel
Form: Quadrat

Kanalsymbole

Wenn das Website-Chat-Widget noch nie zuvor konfiguriert wurde, werden verbundene Kanäle mit entsprechenden Informationen standardmäßig als Widget-Kanal-Links aufgelistet.

Sie können dem Widget Kanal-Links hinzufügen und die erforderlichen Informationen für den ausgewählten Kanal angeben.

Hier ist die Liste der erforderlichen Eingabefelder für jeden der unterstützten Kanallinks.

Kanal-Links	Eingabefeld erforderlich
WhatsApp	WhatsApp-Telefonnummer
Facebook Messenger	Facebook-Seiten-ID
Telegramm	Name des Telegramm-Bots
Twitter	Twitter-ID
LINIE	Leitungs-ID
Viber	Öffentlicher Viber-Kontoname
SMS	SMS-Telefonnummer
E-Mail	E-Mail-Adresse
Telefonanruf	Telefonnummer
Benutzerdefinierter Link	URL-Adresse und Symbol
Benutzerdefinierter QR	QR-Bild und Symbol

Validierung für Kanalsymbol:

Maximale Dateigröße: 1 MB
Maximale Dateigröße: 256 x 256 Pixel
Form: Quadrat

Pre-Chat-Formular

Durch Aktivieren dieser Option wird Ihrem Website-Chat ein Pre-Chat-Formular hinzugefügt. Wenn diese Option aktiviert ist, wird Ihren Website-Besuchern vor dem Start des Chats ein Formular zum Ausfüllen angezeigt.

Wenn diese Option aktiviert ist, können Sie bei Bedarf zusätzliche benutzerdefinierte Felder einfügen. Darüber hinaus können Sie auch die Beschriftung der Standardfelder anpassen, damit sie Ihren Kontakten angezeigt werden.

Die Feldbeschriftungen können an eine andere Sprache angepasst werden, um der Sprache der Website zu entsprechen.

Zusätzliche Einstellungen

Feld	Beschreibung
Text der Eingabeleiste	Dieser Text fungiert als Platzhalter im Eingabebereich.
Die Schriftart, die in dem Chat-Widget der Website angezeigt wird.	Die Schriftart, die zur Anzeige der Schriftart im Website-Chat-Widget verwendet wird.

Eingehende Anhänge einschränken

Wenn diese Option aktiviert ist, hat der Website-Besucher keine Möglichkeit, im Website-Chat-Widget einen Anhang anzuhängen.

Halten Sie den Website-Chat verborgen.

Bei Verwendung dieser Option wird das Widget vollständig ausgeblendet. Bis auf den Klick auf die Ankerreferenz oder bis zum Öffnen des Chats über die programmatische API.

#webchat_widget

Mit dem obigen Anker können Sie auf Ihrer Seite eine Schaltfläche erstellen, die das Widget nach dem Anklicken öffnet.

Respond.io-Branding ausblenden

Mit dieser Option können Sie das respond.io-Branding aus Ihrem Widget entfernen.

Kanalkonfiguration

Schritt 1: Klicken Sie auf Einstellungen > Kanäle

Schritt 2: Suchen Sie den Website-Chat > klicken Sie auf Verwalten

Schritt 3: Auf der Website-Chat-Konfigurationsseite sehen Sie die folgenden Konfigurationen:

Chat-Link – Der URL-Link, über den Ihr Kontakt Ihren Kanal erreicht.
Kanalname – Der Kanalname kann geändert werden und wird intern zur Identifizierung des Kanals verwendet.
Website-Domains – Website(s), die mit Ihrem Widget verbunden sind.
Website-Chat-Code – Der Code, den Sie in die HTML-Quelle Ihrer Website einfügen können, wenn Sie den generierten Codeausschnitt abrufen müssen.

Wenn Sie Ihre Website nicht in diese Liste aufnehmen, wird Ihr Widget nicht geladen. Du kannst mehrere URLs hinzufügen, wenn du das Plugin auf mehreren Websites verwendest.

Schritt 4: Klicken Sie auf Änderungen speichern , um die Seite „Website-Chat-Konfiguration“ zu aktualisieren

Identifizieren angemeldeter Benutzer

Die angemeldeten Benutzer Ihrer Website können identifiziert werden, indem Sie Ihrem Website-Code einen einfachen JavaScript-Code hinzufügen. Sobald die übergebene Kennung einem vorhandenen Kontakt zugeordnet wird, wird die aktuelle Konversation fortgesetzt.

Der Begriff „Benutzer“ wird im Kontext Ihrer Website verwendet. Auf der respond.io-Plattform bezeichnen wir sie weiterhin als „Kontakte“.

window.__respond_settings = {
  Kennung: "customer@example.com",
  Vorname: "Jane",
  Nachname: "Doe",
  Telefon: "60123456789",
  E-Mail: "customer@example.com",
  Profilbild: "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/07/08/14/pic.jpg",
  Ländercode: "MY",
  Sprache: "en",
  // Benutzerdefinierte Felder
  benutzerdefinierte Felder: {
    // Slug-Elemente der benutzerdefinierten Felder
    Nummer: 123,
    Beschreibung: "etwas Text",
  },
};

Anleitung zur Verwendung des Codes

Bearbeiten Sie den Code (siehe unten), um respond.io die Kennung des aktuell angemeldeten Benutzers zu senden. Dies kann die E-Mail-Adresse oder Kontakt-ID sein oder auf einem anderen Kontaktfeld basieren. Bitte beachten Sie, dass das Feld identifikator erforderlich ist.
Fügen Sie den Code direkt in das Head-Tag jeder Seite ein, auf der der Website-Chat erscheinen soll.
- Das Skript zur Identifizierung angemeldeter Benutzer muss über dem Website-Chat-Code platziert werden, der im Konfigurationsdialogfeld des Website-Chats zu finden ist.
Sie können respond.io auch Kontaktfelder senden, die mit Ihren Kontakten verknüpft sind, sodass wir das Kontaktfeld während des Kontakterstellungsprozesses speichern. Den Feldnamen (oder Slug) finden Sie im Modul „Kontaktfelder“.
Bitte beachten Sie, dass bei Verwendung dieser Funktion das Pre-Chat-Formular ignoriert wird. Dies bedeutet, dass Kontakte ihre Informationen nicht eingeben müssen, bevor sie ein Gespräch beginnen.

Im obigen Beispiel wird eine E-Mail-Adresse als Kennung übergeben und während des Kontakterstellungsprozesses werden alle übergebenen Kontaktfelder gespeichert.

Programmatische Steuerung (API für Benutzer)

Das Website-Chat-Widget kann über den JavaScript-Code Ihrer Website geöffnet und geschlossen werden. Diese Funktion ermöglicht es dir, einen benutzerdefinierten "Chat mit uns"-Button auf deiner Website zu erstellen und das Website-Chat-Widget auszulösen, wenn ein Besucher auf den Button klickt.

Aktionen

Chat öffnen
1. Beschreibung: Öffnet das Chat-Widget.
2. Syntax: $respond.do("chat:open")
Chat schließen
1. Beschreibung: Schließt das Chat-Widget.
2. Syntax: $respond.do("chat:close")

Ereignis-Listener

Chatbox wurde geöffnet
1. Beschreibung: Behandelt das Ereignis „Chat-Widget geöffnet“ (löst Ihre -Callback-Funktion aus).
2. Syntax:$respond.on("Chat: geöffnet", Rückruf)
Chatbox wurde geschlossen
1. Beschreibung: Behandelt das geschlossene Ereignis des Chat-Widgets (löst Ihre -Callback-Funktion aus).
2. Syntax:$respond.on("Chat: geschlossen", Rückruf)

Methoden zur Statusüberprüfung

Ist der Chat geöffnet?
1. Beschreibung: Gibt true zurück, wenn das Chat-Widget geöffnet ist, andernfalls false.
2. Syntax: $respond.is("chat:open")
Ist der Chat geschlossen?
1. Beschreibung: Gibt true zurück, wenn das Chat-Widget geschlossen ist, andernfalls false.
2. Syntax: $respond.is("chat:geschlossen")

FAQ und Fehlerbehebung

Warum werden meine Nachrichten nicht an Kontakte zugestellt?

Es kann mehrere Gründe geben, warum die Nachrichten nicht zugestellt werden:

Der Kontakt hat die Website verlassen.
Die Inaktivität des Kontakts könnte die Zeitüberschreitung überschreiten.
Der Kunde des Kontakts könnte Probleme mit der Internetverbindung haben.

Warum wird mein Widget nicht auf meiner Website angezeigt?

Stellen Sie sicher, dass der Code richtig installiert ist. Informationen zur Installation des Website-Chat-Widgets finden Sie hierin den Anweisungen.
Stellen Sie sicher, dass Sie die Website, auf der das Widget installiert werden soll, auf die Whitelist setzen. Siehe Schritt 3 von „Website-Chat-Widget verbinden“ um zu erfahren, wie Sie Ihre Domain auf die Whitelist setzen.

Schnellstart für das Website-Chat-Widget