zum Hauptinhalt springen
Loading...
Skip to article
  • Qualtrics Platform
    Qualtrics Platform
  • Customer Journey Optimizer
    Customer Journey Optimizer
  • XM Discover
    XM Discover
  • Qualtrics Social Connect
    Qualtrics Social Connect

Live Chat (QSC) implementieren


Was this helpful?


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The feedback you submit here is used only to help improve this page.

That’s great! Thank you for your feedback!

Thank you for your feedback!


Informationen zur Implementierung von Live-Chats

Live-Chat ist eine Qualtrics-Social-Connect-Funktion, mit der Sie Ihrer Website einen Live-Chat-Service hinzufügen können. Wenn Kunden auf diesen Chatbot klicken, wird eine Erwähnung in Ihrem Social-Connect-Konto angelegt, damit ein Agent handeln kann. Wenn ein Agent auf diese Erwähnung antwortet, kommt die Antwort vom Chatbot, der dem Kunden ein nahtloses Konversationserlebnis bietet.
Das Live-Chat-Fenster auf einer Website

Achtung: Diese Funktion erfordert, dass Sie mit Ihrem IT-Team zusammenarbeiten, um Änderungen an Ihrer Website vorzunehmen. Benutzerdefinierte Quelltextfunktionen werden unverändert bereitgestellt und erfordern Programmierkenntnisse zur Implementierung. Der Qualtrics Support bietet keinerlei Hilfestellung oder Beratung im Zusammenhang mit eigenem Programmcode an. Stattdessen können Sie sich gerne in unserer Benutzer-Community erkundigen. Wenn Sie mehr über unsere Services für benutzerdefiniertes Coding erfahren möchten, wenden Sie sich an Ihren Qualtrics Account Executive.

Erste Schritte mit Live Chat

Live Chat ist ein Add-on zu Ihrer Qualtrics-Lizenz. Wenden Sie sich an Ihren Account Executive, um mit der Verwendung von Live Chat zu beginnen. Sobald Live Chat zu Ihrem Konto hinzugefügt wurde, erhalten Sie eine eindeutige Integrations-ID und eine Anwendungs-ID. Sichern Sie diese IDs für später.

Anpassen Ihres Live-Chats

Sobald der Live-Chat für Ihr Konto aktiviert ist, finden Sie ihn im Profilmanager. Hier können Sie Aspekte Ihres Live-Chats anpassen, z.B.:

  • Das Erscheinungsbild des Chat-Fensters (Farben und Logo).
  • Fügen Sie die Website-Domänen hinzu, in denen das Chat-Fenster angezeigt werden soll.
  • Wählen Sie einen Ablauf, der beginnt, wenn ein Kunde eine erste Nachricht sendet.
  • Fügen Sie jeder ausgehenden Nachricht eine Schnellantwort hinzu.

Weitere Informationen finden Sie auf der Seite Live-Chat-Profil.

Live-Chat zu Ihrer Website hinzufügen

Während Sie in der Profilmanager, klicken Sie auf Vorschau, um das Code-Snippet für Ihren Live-Chat anzuzeigen. die Vorschaudrucktaste in der unteren rechten Ecke

Kopieren Sie diesen Code, und geben Sie ihn an Ihr IT-Team weiter. Sie müssen den Code entweder dem Header oder dem Text der Website hinzufügen, auf der Live Chat erscheinen soll.
Der Code für den Live-Chat

Nach dem Hinzufügen wird Live Chat in der unteren rechten Ecke Ihrer Website angezeigt. Sie können dann Ihren Live-Chat weiter anpassen, indem Sie das CSS anpassen. Weitere Informationen zum Anpassen Ihres Live-Chats mit CSS finden Sie auf dieser externen Supportseite.

Tipp: Sie können eine Vorschau des Erscheinungsbilds Ihres Live-Chats anzeigen, wenn Sie sich auf der Vorschauseite befinden. Klicken Sie einfach auf die Schaltfläche Live-Chat in der unteren rechten Ecke.

Automatisches Anlegen von Fällen

Bei der Verwendung von Live Chat empfehlen wir Ihnen dringend, die automatische Fallerstellung zu aktivieren. Dadurch werden Nachrichten aus derselben Unterhaltung automatisch in einen Thread gruppiert, anstatt jede Nachricht als einzelne Erwähnung hinzuzufügen.

Webseiten-Tracking

Wenn Sie Ihren Live-Chat auf mehreren Webseiten haben, empfehlen wir Ihnen, Webseiten-Tracking hinzuzufügen. Auf diese Weise können Agents sehen, von welcher Webseite der Kunde chatten soll. Um Webseiten-Tracking hinzuzufügen, müssen Sie zusätzlichen Code zum Code-Snippet für Live-Chat hinzufügen.

  1. Suchen Sie in Ihrem vorhandenen Code-Snippet die folgende Quelltextzeile:
    ClarabridgeChat.init({ appId: 'integration-id' }).then(() => {
  2. Fügen Sie einen Zeilenumbruch ein.
  3. Fügen Sie in der neuen Zeile den folgenden Quelltextblock hinzu:
    ClarabridgeChat.setDelegate({
    
     beforeSend(message) {
    
     message.metadata = {
    
     ...message.metadata,
    
     originTitle: document.title,
    
     originUrl: window.location.href
    
     };
    
     return message;
    
     }
    
     });
  4. Erwähnungen zeigen Ihnen nun, von welcher Webseite der Kunde gechattet hat.

Eisbrecher

Ein Eisbrecher ist eine kurze Nachricht, die neben dem Live-Chat-Symbol auf Ihrer Website erscheint. Es dient häufig als Aufforderung, den Kunden auf den Live-Chat als Ressource aufmerksam zu machen, wenn er Fragen hat. Im folgenden Beispiel: „Können wir Ihnen helfen?“ Ist der Eisbrecher.

Um einen Eisbrecher hinzuzufügen, müssen Sie zusätzlichen Code zum Code-Snippet für Ihren Live-Chat hinzufügen:

  1. Suchen Sie die folgenden Quelltextzeilen in Ihrem vorhandenen Code-Snippet:
    ClarabridgeChat.init({
    
     // integrationId: 'your_integration_id', // Use this OR appId
    
     appId: '', // Use this OR integrationId
  2. Fügen Sie einen Zeilenumbruch ein.
  3. Fügen Sie in der neuen Zeile den folgenden Quelltextblock hinzu:
    icebreaker : {
    
     Delay: 1000,
    
     text: 'Können wir Ihnen helfen?',
    
     Stile: {
    
     backgroundColor: '#9FFF04',
    
     textColor: '#F420F5',
    
     borderWidth: '1px', //
    
     borderColor: '#EAFD10',
    
     width: '150px', //
    
     height: '40px' //
    
     }
    
     },
  4. Im obigen Code-Snippet können Sie die fett formatierten Werte anpassen, um Ihren Eisbrecher anzupassen. Möglicherweise müssen Sie Ihr IT-Team um Hilfe bitten. Im Folgenden finden Sie Tipps für jedes Feld:
    • Verzögerung: Die Zeit, die der Kunde auf der Seite verbringen muss, bevor der Eisbrecher erscheint. Geben Sie eine Verzögerungsperiode in Millisekunden ein.
    • text: Geben Sie die Eisbrecher Nachricht ein.
    • Stile: Dies sind zusätzliche CSS-Eigenschaften, um das Aussehen des Eisbrechers anzupassen. Einige sind erforderlich, während andere optional sind. Lesen Sie weiter, um weitere Informationen zu jeder Eigenschaft zu erhalten.
    • backgroundColor: Die Hintergrundfarbe. Geben Sie einen HEX-Farbcode ein. Diese Eigenschaft ist erforderlich.
    • textColor: Die Textfarbe. Geben Sie einen HEX-Farbcode ein. Diese Eigenschaft ist erforderlich.
    • borderWidth: Die Rahmenbreite der Bubble, die die Meldung anzeigt. Geben Sie eine Breite in Pixel ein. Diese Eigenschaft ist optional. Wenn er ausgeschlossen ist, hat der Eisbrecher keine Grenze.
    • borderColor: Die Farbe des Rahmens. Geben Sie einen HEX-Farbcode ein. Diese Eigenschaft ist erforderlich, wenn borderWidth verwendet wird.
    • Breite: Die Breite der Eisbremsblase. Geben Sie eine Breite in Pixel ein. Diese Eigenschaft ist optional. Wenn der Eisbrecher ausgeschlossen ist, beträgt die Breite standardmäßig 150 Pixel.
    • Höhe: Die Höhe der Eisbrecher Blase. Geben Sie eine Höhe in Pixel ein. Diese Eigenschaft ist optional. Wenn der Eisbrecher ausgeschlossen ist, beträgt die Höhe standardmäßig 50 Pixel.
  5. Ihr Live-Chat-Symbol wird nun eine Eisbrecher Nachricht daneben haben.

Abläufe

Sie können Ihrem Live-Chat Flüsse hinzufügen, um Antworten über Ihren Live-Chat zu automatisieren. Besuchen Sie die verlinkte Seite, um mehr über das Anlegen von Flüssen zu erfahren. In diesem Abschnitt erfahren Sie, wie Sie Ihrem Live-Chat einen Fluss hinzufügen.

  1. Fügen Sie den folgenden Code-Block nach Ihrem ursprünglichen Live-Chat-Code-Snippet ein:
    ClarabridgeChat.on('widget:open', () => {
    
     ClarabridgeChat.createConversation();
    
     });
  2. Navigieren Sie zu Profilmanager und wählen Sie über die Dropdown-Liste Ablauf beim Start senden einen Ablauf aus.
  3. Sie können drei zusätzliche Flüsse auswählen, die an jede ausgehende Nachricht angehängt werden sollen, sodass Kunden verschiedene Optionen haben, z.B. den Chat neu starten oder die Supportsprache ändern.

Geschäftszeiten und Agentenverfügbarkeit

Sie können Ihren Live-Chat so beschränken, dass er nur während Ihrer Geschäftszeiten verfügbar ist und wenn Agents online und verfügbar sind. Dazu müssen Sie Ihren Live-Chat mit der Qualtric Social Connect API integrieren. Sie müssen auch Ihren Zeitplan für die Geschäftszeiten anlegen.

  1. Folgen Sie diesem Leitfaden, um Ihre Website in die Qualtrics Social Connect API zu integrieren.
  2. Rufen Sie diesen Endpunkt auf, um Ihre Geschäftszeiten-ID abzurufen.
  3. Verwenden Sie Ihre Geschäfts-ID, um dann den Zeitplan für die Geschäftszeiten über diesen Endpunkt abzurufen.
  4. Sie erhalten ein Ergebnis, das wie folgt aussieht:
    {"Name":"Mein Zeitplan","Perioden"[{"dayofweek":1,"start":"0900","end":"1900"},"dayofweek":1,"start":"1300","1900"},"dayofweek":"start":"000""
  5. Sie können diese Informationen verwenden, um den Live-Chat nur während der Arbeitszeit zu aktivieren.
  6. Sie können auch denselben API-Aufruf verwenden, um Informationen über verfügbare Agenten abzurufen und den Live-Chat zu deaktivieren, wenn keine verfügbar sind.

Viele Seiten dieses Portals wurden mithilfe maschineller Übersetzung aus dem Englischen übersetzt. Obwohl wir bei Qualtrics die bestmögliche maschinelle Übersetzung ausgewählt haben, um ein möglichst gutes Ergebnis zu bieten, ist maschinelle Übersetzung nie perfekt. Der englische Originaltext gilt als offizielle Version. Abweichungen zwischen dem englischen Originaltext und den maschinellen Übersetzungen sind nicht rechtlich bindend.