Panoramica sullo sviluppo di chat web

Se si desidera personalizzare lo stile e l'aspetto della web chat oltre le opzioni disponibili nella scheda Stile delle impostazioni della web chat, è possibile farlo scegliendo un tema Carbon Design diverso.

I temi supportati sono temi di colore definiti da IBM Carbon Design. Per impostare il tema Carbon, utilizzare l'opzione di configurazione 'carbonTheme.

È inoltre possibile impostare singole variabili all'interno del tema per personalizzare elementi specifici dell'interfaccia utente. Ad esempio, il testo visualizzato nella finestra di chat utilizza i font 'IBMPlexSans, Arial, Helvetica, sans-serif. Se si desidera utilizzare un font diverso, è possibile specificarlo utilizzando il metodo di istanza 'updateCSSVariables().

La schermata iniziale accoglie il cliente e, a scelta, mostra un elenco di spunti di conversazione suggeriti. È possibile personalizzare lo stile e il contenuto della schermata iniziale:

• Per aggiungere elementi alla schermata iniziale, è possibile definire un HTML personalizzato utilizzando la variabile di tematizzazione 'writeableElements.homeScreenAfterStartersElement:

  instance.writeableElements.homeScreenAfterStartersElement.innerHTML = 
    '<div class="MyCustomClass">This is my custom element</div>';
  

  Esempio: Per un esempio funzionante che mostra come aggiungere elementi personalizzati alla schermata iniziale, vedere Elementi personalizzati della schermata iniziale per la chat web del costruttore di assistenti AI.

• Per modificare lo stile della schermata iniziale, utilizzare le classi di aiuto CSS.

È possibile personalizzare le stringhe che definiscono le varie etichette e frasi codificate visualizzate dalla chat web. Per personalizzare le stringhe, utilizzare il metodo di istanza 'updateLanguagePack() per sostituire le stringhe del pacchetto linguistico corrente. Per ulteriori informazioni, vedere Lingue.

Per impostazione predefinita, le stringhe visualizzate dalla chat web sono in inglese. Per passare a una lingua diversa, utilizzare il metodo di istanza 'updateLanguagePack() per sostituire il pacchetto linguistico corrente con uno dei pacchetti linguistici tradotti disponibili. Per ulteriori informazioni, vedere Supporto al pubblico globale nella chat web.

Per integrarsi meglio con il vostro sito web, potreste sostituire l'icona del launcher integrato con un meccanismo diverso per aprire la chat web. Per nascondere il launcher predefinito, impostare l'opzione di configurazione 'showLauncher su 'false. Per aprire la web chat in base a un'altra interazione, utilizzare il metodo di istanza 'openWindow.

Esercitazione: Per un'esercitazione che mostra come implementare un launcher personalizzato, vedere Utilizzo di un launcher personalizzato.

Se si desidera che la chat web rimanga sempre aperta sulla pagina, utilizzare la configurazione 'openChatByDefault per rendere la pagina con la finestra di chat aperta e l'opzione 'hideCloseButton per impedire ai clienti di chiuderla.

Il design del sito web potrebbe richiedere di modificare la posizione e il modo in cui la finestra della chat web viene visualizzata sul sito. Ad esempio, si potrebbe desiderare che appaia in una posizione diversa della pagina, con dimensioni diverse o annidato all'interno di un altro elemento della pagina.

Per modificare le dimensioni della finestra della chat web, è possibile utilizzare il metodo di istanza updateCSSVariables() per modificare lo stile CSS.

Se è necessario cambiare la posizione della finestra di web chat o modificarne le dimensioni oltre i limiti consentiti dai CSS, è possibile utilizzare un elemento DOM personalizzato per contenere la finestra di web chat. A tal fine, utilizzare l'opzione di configurazione " element.

'Tutorial: Per un tutorial che mostra come rendere la web chat in un elemento personalizzato, vedere 'Esercitazione: Personalizzazione delle dimensioni e della posizione della web chat.

È possibile utilizzare una WebView con un bridge JavaScript per aggiungere la chat web all'applicazione mobile. Per ulteriori informazioni, vedere Aggiunta della chat web all'applicazione mobile.

Sottoscrivendo gli eventi, il codice può intercettare i messaggi inviati e ricevuti tra il cliente e l'assistente e persino modificarne il contenuto.

Sottoscrivere l'evento 'pre:receive se si desidera intercettare il messaggio di un cliente prima che venga inviato all'assistente AI. Ad esempio, si potrebbero eliminare le informazioni di identificazione personale dal testo del messaggio o aggiungere variabili di contesto al payload del messaggio.

Sottoscrivere l'evento 'pre:send se si vuole intercettare una risposta in arrivo dall'assistente AI prima che venga mostrata al cliente. Ad esempio, è possibile aggiungere formattazione, collegamenti o altri elementi specifici della chat web.

Tutorial: For a tutorial showing how to use the pre:receive event to intercept and modify incoming messages, see Esercitazione: implementazione di pulsanti di opzione personalizzati nella chat web.

Se l'assistente AI invia risposte specializzate utilizzando un tipo di risposta personalizzata (user_defined), è possibile implementare una vista personalizzata per visualizzare queste risposte nella finestra della chat web. A tal fine, è necessario sottoscrivere l'evento 'customResponse, che viene attivato ogni volta che viene ricevuta una risposta 'user_defined. Nel metodo del gestore dell'evento, si può quindi leggere il contenuto della risposta e rendere l'output utilizzando i propri elementi.

'Tutorial: Per un tutorial che mostra come rendere un tipo di risposta personalizzato in sostituzione della risposta predefinita alle opzioni, vedere 'Esercitazione: implementazione di pulsanti di opzione personalizzati nella chat web.

È possibile utilizzare uno degli starter kit di web chat per integrarsi con una piattaforma di contact center (service desk) diversa da quelle disponibili come integrazioni integrate nel costruttore di assistenti AI. Sono disponibili implementazioni di riferimento completamente funzionali per diverse piattaforme di contact center; inoltre, è possibile utilizzare uno starter kit per sviluppare un'integrazione personalizzata con la piattaforma di vostra scelta.

Per ulteriori informazioni, vedere Aggiunta del supporto del contact center.

La chat web associa un ID utente a ogni messaggio inviato all'assistente AI; questo ID utente viene utilizzato per la fatturazione basata sull'utente e per altri scopi. È possibile consentire alla web chat di generare un ID anonimo per ogni utente, oppure controllare l'ID utente stesso.

A seconda che si sia abilitata la sicurezza per la web chat, è possibile utilizzare il metodo di istanza 'updateUserID o il metodo 'updateIdentityToken per specificare le informazioni sull'identità dell'utente.

Per ulteriori informazioni su come vengono specificate e utilizzate le informazioni sull'identità dell'utente, vedere Gestione delle informazioni sull'identità dell'utente nella chat Web.

Per proteggere la chat web, è possibile utilizzare JSON Web Token (JWT) per autenticare gli utenti e crittografare i dati privati. Per ulteriori informazioni, vedere Protezione della chat Web.

Il codice della chat web ospitata da IBM Cloud viene regolarmente aggiornato con miglioramenti e nuove funzionalità. Per impostazione predefinita, lo script di incorporamento utilizza automaticamente l'ultima versione della web chat. Per evitare modifiche impreviste che potrebbero influire sul vostro sito web, potreste voler controllare quale versione della web chat viene utilizzata dal vostro sito, dandovi la possibilità di testare ogni nuova versione prima di distribuirla in produzione, per evitare modifiche impreviste quando viene rilasciata una nuova versione.

Per ulteriori informazioni sul versioning della web chat, vedere Controllo della versione della web chat.