Das Website-Chat-Widget ermöglicht es Website-Besuchern, Sie per Live-Chat oder über andere von Ihnen verbundene Messaging-Kanäle zu kontaktieren.
Sehen Sie sich das Video unten an, um einen schrittweisen Leitfaden zum Wie man Website-Chat verbindet zu respond.io zu finden.
Schritt 1: Gehe zu Einstellungen > Kanäle
Schritt 2: Klicken Sie Kanal > Website Chat > Verbinden
Schritt 3: Füllen Sie die Website(s) ein, auf der das Widget hinzugefügt wird.
Lesen Sie im Folgenden nach, wie Websites Whitelist werden können.
Wenn der Benutzerhttps://app.respond.iohinzufügt, wird nurhttps://app.respond.iowhitelisted. Jede andere Subdomain oder root sollte nicht funktionieren.
Wenn der Benutzerhttps://*.respond.iohinzufügt, werden alle Subdomains einschließlich der root-Domain auf die Whitelist gesetzt.
Wenn der Benutzerhttps://respond.iohinzufügt, wird nur die root-Domain whitelistet.
Schritt 4:Wählen Sie eine Theme-Farbe für das Widget mit dem interaktiven Farbwähler.
Wählen Sie eine Farbe aus, die zu Ihrer Marke Farbe und Website passt.
Schritt 5:Wählen Sie ein Symbol für das Widget aus, das auf der Webseite angezeigt werden soll. Wenn Sie es vorziehen, ein angepasstes Icon hochzuladen, können Sie ein quadratisches Symbol mit einer empfohlenen Größe von 256px x 256px hochladen.
Widgets können nach der Verbindung weiter angepasst werden.
Schritt 6: Klicken SieWeiter> Skript zu Ihrer bevorzugten Website hinzufügen. Alternativ können Sie die Installationsanweisungen an andere Personen per E-Mail senden.
Möglicherweise benötigen Sie einen Webmaster oder technischen Administrator, um bei der Installation des Chat-Widgets auf der Website zu helfen. Bitte fragen Sie bei Bedarf um Hilfe.
Abhängig davon, welches System Sie zur Erstellung und Verwaltung Ihrer Website verwenden Wir haben eine Schritt-für-Schritt-Anleitung erstellt, die Sie durch die Installation eines Chat-Widgets auf Ihrer Website führt.
Für andere Plattformen oder Dienste navigieren Sie zur HTML-Quelle der Seite. Fügen Sie das Skript vor dem </body> Tag ein.
<body>
...
...
...
<Paste Script Here>
</body>Wenn Sie Hilfe benötigen, können Sie das Skript zusammen mit Installationsanweisungen an Ihren Website-Administrator weiterleiten. Wählen Sie das entsprechende Kontrollkästchen aus und geben Sie die E-Mail-Adresse von jemandem ein, der Ihnen bei der Installation des Chat-Plugins helfen kann.
Das respond.io Website Chat Widget wird auf Ihrer Website angezeigt, sobald das Skript erfolgreich installiert wurde.
Schritt 1:In Ihrem Arbeitsbereich gehen Sie zuEinstellungen>Kanal
Schritt 2: Suchen Sie den Website-Chat-Kanal > klicken Sie Anpassen
Passen Sie das Website-Widget so an, dass es mit dem Erscheinungsbild der Website's übereinstimmt, so dass das Widget nahtlos aussieht. Auf der rechten Seite der Seite befindet sich eine Vorschau des Chat-Widgets. Jede Anpassung an das Widget reflektiert das Widget, um Ihnen zu helfen, eine bessere Vorstellung von dem, was Sie anpassen.
Sie können das folgende anpassen, um das Erscheinungsbild des Widgets auf der Website zu ändern.
Feld | Beschreibung |
|---|---|
Theme-Farbe | Die gewählte Farbe wird als primäre Farbe Ihres Widgets verwendet. |
Textfarbe | Die gewählte Farbe wird als primäre Textfarbe Ihres Widgets verwendet. |
Webseiten-Chat-Symbol | Das ausgewählte Symbol wird in der Widget-Blase zusammen mit der Theme-Farbe verwendet. Sie können bei Bedarf ein eigenes Icon hochladen. |
Popup-Nachricht | Die Popup-Nachricht wird den Besuchern der Webseite einmal pro Tag 5 Sekunden nach dem Laden der Seite angezeigt. Wenn nicht definiert, wird den Besuchern der Webseite keine Popup-Meldung angezeigt. |
Validierung für Webseiten-Chat-Symbol:
Maximale Dateigröße: 1MB
Maximale Dateigröße: 256 x 256 px
Form: Quadrat
Feld | Beschreibung |
|---|---|
Ausrichten an | Benutzer können festlegen, ob das Widget links oder rechts der Plattform angezeigt werden soll. |
Vertikaler Abstand | Benutzer können den vertikalen Abstand zwischen dem Chat-Widget und dem unteren Bildschirmrand festlegen. |
Horizontaler Abstand | Benutzer können den Umfang des horizontalen Abstands zwischen dem Chat-Widget der Webseite und der Seite des Bildschirms festlegen. |
Widget-Größe | Benutzer können die Größe des Widgets aus kleinen, Standard oder groß auswählen. |
Anzeigeoptionen | Benutzer können dieses Widget auf dem Desktop, mobilen Geräten oder beidem anzeigen. |
Feld | Beschreibung |
|---|---|
Titel | Der Titel wird oben im Chat-Widget angezeigt. |
Tagline | Die Schlagzeile wird unter dem Titel angezeigt. |
Website-Chat-Logo | Ziehen Sie Ihr Logo-Bild hierher, damit es oben im Webseiten-Chat angezeigt wird. Das Format kann entweder in PNG, SVG oder JPG sein und die Dateigröße beträgt nicht mehr als 4,0 MB. |
Kanalsymbole | Diese Option wird es Kontakten ermöglichen, Sie über ihren bevorzugten Kanal zu kontaktieren, sofern die Optionen gegeben sind. Sie können bis zu sechs Kanäle hinzufügen und es wird oben im Website-Chat-Widget angezeigt. |
Farbe der Kanalsymbole | Die Kanalsymbole können in weißer oder farbiger Form auf Ihrem Chat-Widget angezeigt werden. Wählen Sie Weiß oder Farbe aus, um die Theme-Farbe Ihres Chat-Widgets zu verwenden. |
Validierung des Website-Chat-Logo:
Maximale Dateigröße: 4MB
Maximale Dateigröße: 1024 x 1024 px
Form: Quadrat
Falls das Website-Chat-Widget noch nie konfiguriert wurde, werden angeschlossene Kanäle mit entsprechenden Informationen standardmäßig als Widget-Kanal-Links aufgelistet.
Sie können die Widget-Kanal-Links hinzufügen und die notwendigen Informationen für den ausgewählten Kanal angeben.
Hier ist die Liste der Eingabefelder, die für jeden der unterstützten Channel Links benötigt werden.
Kanal-Links | Eingabefeld erforderlich |
|---|---|
WhatsApp Telefonnummer | |
Facebook-Messenger | Facebook Seiten-ID |
Telegram | Telegramm Bot Name |
Twitter ID | |
LINE | Liniennummer |
Viber | Viber Öffentlicher Account Name |
SMS | SMS-Telefonnummer |
E-Mail-Adresse | |
Telefonanruf | Telefonnummer. |
Eigener Link | URL Adresse und Symbol |
Custom QR | QR-Bild und Icon |
Validierung für Kanalsymbol:
Maximale Dateigröße: 1MB
Maximale Dateigröße: 256 x 256 px
Form: Quadrat
Wenn Sie diese Option aktivieren, wird ein Vor-Chat-Formular zu Ihrem Webseiten-Chat hinzugefügt. Wenn diese Option aktiviert ist, wird den Besuchern Ihrer Webseite ein Formular angezeigt, das sie vor dem Start des Chats ausfüllen können.
Wenn diese Option aktiviert ist, können Sie bei Bedarf zusätzliche benutzerdefinierte Felder einfügen. Zusätzlich können Sie die Bezeichnung auch für die Standardfelder anpassen, wie sie Ihren Kontakten angezeigt werden.
Die Feldbezeichnungen können auf eine andere Sprache angepasst werden, um die Sprache der Website's zu erfüllen.
Feld | Beschreibung |
|---|---|
Input Bar Text | Dieser Text funktioniert als Platzhalter im Eingabefeld. |
Text Font | Die Schriftart, mit der die Schriftart im Chat-Widget der Webseite angezeigt wird. |
Wenn diese Option aktiviert ist, hat der Website-Besucher keine Option, einen Anhang im Website-Chat-Widget anzuhängen.
Bei Verwendung dieser Option wird das Widget komplett ausgeblendet. Bis die Anker-Referenz angeklickt wurde oder wenn der Chat über die Programm-API geöffnet wird.
#webchat_Widget
Mit dem obigen Anker können Sie eine Schaltfläche auf Ihrer Seite erstellen, um das Widget zu öffnen, sobald geklickt.
Mit dieser Option können Sie das respond.io Branding aus Ihrem Widget entfernen.
Schritt 1: Klicken Sie auf Einstellungen > Kanäle
Schritt 2: Suchen Sie den Webseiten-Chat > klicken Sie Verwalten
Schritt 3: In der Webseite Chat-Konfiguration sehen Sie die folgenden Konfigurationen:
Chat Link - Der URL-Link für Ihren Kontakt, um Ihren Kanal zu erreichen.
Kanalname - Der Kanalname kann geändert werden und wird intern verwendet, um den Kanal zu identifizieren.
Website-Domains - Website(s) die mit Ihrem Widget verbunden sind.
Website-Chat-Code - Der Code, den Sie in den HTML-Quelltext Ihrer Website einfügen können, wenn Sie das generierte Code-Snippet abrufen möchten.
Wenn Sie Ihre Webseite mit't in diese Liste einbinden, hat Ihr Widget't geladen. Du kannst mehrere URLs hinzufügen, wenn du das Plugin auf mehreren Websites verwendest.
Schritt 4: Klicken Sie Änderungen speichern um die Seite Website-Chat-Konfiguration zu aktualisieren
Die eingeloggten Benutzer Ihrer Website können durch Hinzufügen eines einfachen JavaScript-Codes zu Ihrem Website-Code identifiziert werden. Sobald der Identifikator mit einem existierenden Kontakt übereinstimmt, wird die aktuelle Unterhaltung fortgesetzt.
Der Begriff „Benutzer“ wird im Kontext Ihrer Website verwendet. In der respond.io Plattform werden sie weiterhin als „Kontakte“ bezeichnet.
window.__respond_settings = {
Identifikator: "customer@example. om",
Vorname: "Jane",
Nachname: "Doe",
Telefon: "60123456789",
E-Mail: "customer@example. om",
profilePic: "https://static.independent.co. k/s3fs-public/thumbnails/image/2015/07/08/14/pic. pg",
Landscode: "MY",
Sprache: "en",
// Benutzerdefinierte Felder
custom_fields: {
// Slugs aus benutzerdefinierten Feldern
Nummer: 123,
Beschreibung: "some text",
},
};Anleitung zur Verwendung des Codes
Bearbeiten Sie den Code (unten angegeben), um respond.io den Identifikator des aktuell angemeldeten Benutzers zu senden. Dies kann die E-Mail-Adresse oder Kontaktnummer sein oder auf der Grundlage eines anderen Kontaktfeldes. Bitte beachten Sie, dass ein -Identifikator ein Pflichtfeld ist.
Fügen Sie den Code rechts in das Kopf Tag jeder Seite ein, auf der der Webseiten-Chat angezeigt werden soll.
Das Skript zur Identifizierung eingeloggter Benutzer muss über dem Webseiten-Chat-Code platziert werden, der im Chat-Konfigurationsdialog zu finden ist.
Sie können auch respond.io Kontaktfelder senden, die mit Ihren Kontakten verknüpft sind, so dass wir das Kontaktfeld während des Erstellungsprozesses speichern werden. Der Feldname (oder Slug) finden Sie im Modul Kontaktfelder.
Bitte beachten Sie, dass Sie diese Funktion verwenden Das Pre-Chat-Formular wird ignoriert, was bedeutet, dass Kontakte ihre Informationen nicht ausfüllen müssen, bevor sie eine Unterhaltung anfangen.
Das obige Beispiel übergibt eine E-Mail-Adresse als Identifikator und während des Prozesses der Kontaktaufnahme werden alle übergebenen Kontaktfelder gespeichert.
Das Website-Chat-Widget kann über Ihren Website-JavaScript-Code geöffnet und geschlossen werden. Dies erlaubt Ihnen einen benutzerdefinierten "Chat mit uns" Button auf Ihrer Website zu erstellen und starten Sie das Webseiten-Chat-Widget zu öffnen, wenn ein Besucher auf die Schaltfläche klickt.
Chat öffnen
Beschreibung: Öffnet das Chat-Widget.
Syntax: $respond.do("chat:open")
Chat schließen
Beschreibung: Schließt das Chat-Widget.
Syntax: $respond.do("Chat:Schließe")
Chatbox wurde geöffnet
Beschreibung: Verwaltet das geöffnete Chat-Widget (löst Ihre Callback Funktion aus.
Syntax:$respond.on("Chat:geöffnet", Callback)
Chatbox wurde geschlossen
Beschreibung: Bearbeitet das geschlossene Chat-Widget (löst Ihre Callback Funktion aus).
Syntax:$respond.on("Chat:geschlossen", Callback)
Ist Chat geöffnet?
Beschreibung: Gibt true zurück, wenn das Chat-Widget geöffnet wird, ansonsten false.
Syntax: $respond.is("chat:open")
Ist der Chat geschlossen?
Beschreibung: Gibt true zurück, wenn das Chat-Widget geschlossen ist, ansonsten false.
Syntax: $respond.is("Chat:geschlossen")
Es könnte ein paar Gründe geben, warum die Nachrichten nicht geliefert werden:
Kontakt hat die Website verlassen.
Inaktivität des Kontakts's kann die Zeitüberschreitung überschreiten.
Kontakt's Client hat möglicherweise Probleme mit der Internetverbindung.
Stellen Sie sicher, dass der Code korrekt installiert ist. Lesen Sie die Anweisungenhierzur Installation des Website-Chat-Widgets.
Stellen Sie sicher, dass die Webseite, auf der das Widget installiert werden soll, auf die Whitelist gesetzt wird. Lesen Sie Schritt 3 vonWebsite-Chat-Widgetüber die Whitelist Ihrer Domain.
Verwandte Artikel 👩💻