Live Chat (QSC) implementieren

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.

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. 

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.

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.

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.