Implementazione della Live Chat (QSC)

Informazioni sull’implementazione di Live Chat

Live Chat è una funzione di Social Connect di Qualtrics che ti permette di aggiungere un servizio di live chat al tuo sito web. Quando i clienti fanno clic su questo chatbot, crea una menzione nel proprio account Social Connect per consentire a un agente di agire. Quando un agente risponde a questa menzione, la risposta viene dal chatbot, offrendo al cliente un’esperienza di conversazione senza soluzione di continuità.

Nozioni introduttive di chat in diretta

Live Chat è un componente aggiuntivo della tua licenza Qualtrics. Contatta il tuo Account Executive per iniziare a utilizzare la Live Chat. Una volta aggiunta la Live Chat al tuo account, ti verranno forniti un ID di integrazione e un ID applicazione univoci. Salvare questi ID per un momento successivo.

Personalizzazione della Live Chat

Una volta abilitata la Live Chat per il tuo account, puoi trovarla nel Responsabile del profilo. Qui puoi personalizzare gli aspetti della tua live chat, come ad esempio:

• L’aspetto della finestra della chat (colori e logo).
• Aggiungi i domini del sito web su cui dovrebbe apparire la finestra della chat.
• Selezionare un flusso che inizia quando un cliente invia un messaggio iniziale.
• Allegare una risposta rapida a ogni messaggio in uscita.

Per ulteriori informazioni, consultare la pagina Profilo chat in tempo reale.

Aggiunta di Live Chat al tuo sito web

Mentre si trova nel Responsabile del profilo, fare clic su Anteprima per visualizzare lo snippet del codice per la Live Chat. 

Copiare il codice e assegnarlo al team IT. Dovranno aggiungere il codice all’intestazione o al corpo del sito web su cui desiderano che appaia Live Chat.

Una volta aggiunto, Live Chat apparirà nell’angolo in basso a destra del tuo sito web. È quindi possibile personalizzare ulteriormente la Live Chat regolando il CSS. Consulta questa pagina di supporto esterno per maggiori informazioni sulla personalizzazione della tua Live Chat con CSS.

Creazione automatica caso

Quando si utilizza Live Chat, si consiglia vivamente di attivare la creazione automatica di casi. Questo raggrupperà automaticamente i messaggi della stessa conversazione in un thread invece di aggiungere ogni messaggio come menzione individuale.

Tracciamento pagina Web

Se si dispone di Live Chat su più pagine Web, si consiglia di aggiungere il monitoraggio delle pagine Web. Ciò consente agli agenti di vedere da quale pagina Web sta chattando il cliente. Per aggiungere il monitoraggio della pagina Web, sarà necessario aggiungere codice aggiuntivo allo snippet del codice per Live Chat.

1. Nello snippet di codice esistente, trovare la seguente riga di codice:

   ClarabridgeChat.init({ appId: 'integration-id' }).then(() => {

2. Inserire un’interruzione di riga.
3. Aggiungere il seguente blocco di codice nella nuova riga:

   ClarabridgeChat.setDelegate({
   
    beforeSend(message) {
   
    message.metadata = {
   
    ...message.metadata,
   
    originTitle: document.title,
   
    originUrl: window.location.href
   
    };
   
    return message;
   
    }
   
    });

4. Le menzioni ora ti mostreranno da quale pagina web il cliente ha chattato.

Interruttori di ghiaccio

Un ice breaker è un breve messaggio che appare accanto all’icona Live Chat sul tuo sito web. Spesso agisce come una richiesta per attirare l’attenzione del cliente su Live Chat come una risorsa se hanno domande. Nell’esempio seguente, “Possiamo aiutarti?” è l’interruttore di ghiaccio.

Per aggiungere un ice breaker, dovrai aggiungere codice aggiuntivo allo snippet del codice per la tua Live Chat:

1. Cercare le seguenti righe di codice nello snippet del codice esistente:

   ClarabridgeChat.init({
   
    // integrationId: 'your_integration_id', // Usa questo OR appId
   
    appId: '', // Utilizza questo OR integrationId

2. Inserire un’interruzione di riga.
3. Aggiungere il seguente blocco di codice nella nuova riga:

   rompighiaccio: {
   
    delay: 1000,
   
    testo: 'Possiamo aiutarti?',
   
    stili: {
   
    backgroundColor: '#9FFF04',
   
    textColor: '#F420F5',
   
    borderWidth: '1px', //
   
    borderColor: '#EAFD10',
   
    larghezza: '150px', //
   
    altezza: '40px' //
   
    }
   
    },

4. Nello snippet del codice di cui sopra, è possibile adattare i valori in grassetto per personalizzare l’interruttore di ghiaccio. Potrebbe essere necessario chiedere aiuto al team IT. Di seguito sono riportati i suggerimenti per ogni campo:
   • ritardo: la quantità di tempo che il cliente deve trascorrere sulla pagina prima che venga visualizzato l’interruttore di ghiaccio. Inserire un periodo di ritardo in millisecondi.
   • Testo: immettere il messaggio dell’interruttore di ghiaccio.
   • Stili: si tratta di proprietà CSS aggiuntive per personalizzare l’aspetto del ice breaker. Alcuni sono obbligatori, mentre altri sono facoltativi. Continua a leggere per ulteriori informazioni su ogni proprietà.
   • Colore sfondo: il colore di sfondo. Inserire un codice colore HEX. Questa proprietà è obbligatoria.
   • textColor: il colore del testo. Inserire un codice colore HEX. Questa proprietà è obbligatoria.
   • borderWidth: larghezza del bordo dell’area commento che mostra il messaggio. Inserire una larghezza in pixel. Questa proprietà è facoltativa. Se escluso, l’interruttore di ghiaccio non avrà un bordo.
   • borderColor: il colore del bordo. Inserire un codice colore HEX. Questa proprietà è richiesta se si utilizza borderWidth.
   • Larghezza: la larghezza della bolla dell’interruttore di ghiaccio. Inserire una larghezza in pixel. Questa proprietà è facoltativa. Se escluso, l’interruttore di ghiaccio verrà impostato in modo predefinito su una larghezza di 150 pixel.
   • Altezza: l’altezza della bolla dell’interruttore di ghiaccio. Inserisci un’altezza in pixel. Questa proprietà è facoltativa. Se escluso, l’interruttore di ghiaccio verrà impostato in modo predefinito su 50 pixel di altezza.
5. Accanto all’icona Live Chat verrà visualizzato un messaggio di interruttore di ghiaccio.

Flussi

Puoi aggiungere flussi alla chat dal vivo per automatizzare le risposte tramite la tua Live Chat. Visita la pagina collegata per maggiori informazioni sulla creazione di flussi. Questa sezione tratterà come aggiungere un flusso alla tua Live Chat.

1. Incolla il seguente blocco di codice dopo il tuo frammento di codice Live Chat originale:

   ClarabridgeChat.on('widget:open', () => {
   
    ClarabridgeChat.createConversation();
   
    });

2. Passare a Responsabile del profilo e utilizzare l’elenco a discesa Invia flusso all’inizio per scegliere un flusso.
3. È possibile selezionare 3 flussi aggiuntivi da allegare a ogni messaggio in uscita offrendo ai clienti varie opzioni, ad esempio l’avvio della chat o la modifica della lingua di supporto.

Orario di lavoro e disponibilità dell’agente

Puoi limitare la tua Live Chat in modo che sia disponibile solo durante l’orario lavorativo e quando gli agenti sono online e disponibili. Ciò richiede l’integrazione della Live Chat con l’API Social Connect di Qualtric. È inoltre necessario creare la pianificazione dell’orario lavorativo.

1. Segui questa guida per integrare il tuo sito web con l’API Qualtrics Social Connect.
2. Chiamare questo endpoint per recuperare l’ID orario lavorativo.
3. Utilizzare il proprio ID aziendale per recuperare la pianificazione dell’orario lavorativo utilizzando questo endpoint.
4. Si riceverà un risultato simile al seguente:

   {"name":"My scheduling","period":[{"dayofweek":1,"start":"0900","end":"1200":"dayofweek":1,"start":"1300","end":"1900":"1900",{"dayofweek":2" {"0900","end":"end":"1900":"1900","dayofweek","dayofweek":1""inizio","inizio","inizio",

5. È possibile utilizzare queste informazioni per attivare la Live Chat solo durante l’orario di lavoro.
6. È anche possibile utilizzare la stessa chiamata API per recuperare informazioni sugli agenti disponibili e disattivare la Live Chat se non ne sono disponibili.