# Costruisci la tua esperienza di chat

Gli strumenti di Zoom rendono semplice personalizzare e avviare la tua esperienza di chat con poco o nessun codice.

### Finestra di coinvolgimento della chat

La finestra di coinvolgimento della chat è il modo in cui i tuoi utenti inviano messaggi al tuo agente virtuale o agente umano. Con gli strumenti di Zoom, puoi creare una finestra di chat facile da vedere e con cui interagire e che rispecchia il marchio della tua azienda.

Per creare o modificare la tua Finestra di Coinvolgimento della Chat, vai all'Amministrazione Web di Zoom.

Da lì fai clic su **+Aggiungi campagna** o apri la bozza di una Campagna esistente. Scorri fino alla **Finestra di coinvolgimento della chat** sezione per creare o modificare la tua finestra.

#### <mark style="color:blu;">Dimensione della finestra ed esperienza mobile</mark>

La finestra di coinvolgimento della chat di Zoom è reattiva, il che significa che adatta automaticamente il suo layout se il tuo utente accede al sito da desktop o smartphone.

Su dispositivi mobili, la finestra della chat si apre a schermo intero per massimizzare lo spazio limitato e garantire un'esperienza pulita e leggibile.

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-6998b69e233a164db1b6dc64f142829e13b7888d%2Fimage.png?alt=media" alt="Image of mobile Zoom Virtual Agent window, opened full-screen." width="375"><figcaption></figcaption></figure>

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-61f505c8f139782d7f5f797e297da44f43507826%2Fimage%20(13).png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

Per gli utenti che accedono alla chat su dispositivi desktop, puoi scegliere tra tre opzioni di dimensione per l'altezza della finestra:

* **S:** 540 pixel
* **M:** 650 pixel, **Predefinito**
* **L:** 780 pixel

{% hint style="info" %}
**Nota**

La larghezza è sempre fissa a 420 pixel per garantirne la leggibilità.
{% endhint %}

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-4c34881c869207a1dd2ca360de0d89b78fcd3c4e%2Fimage.png?alt=media" alt="Image of desktop Zoom Virtual Agent window, opened in the lower right corner of the window."><figcaption></figcaption></figure>

#### <mark style="color:blu;">Barra dell'intestazione</mark>

Il **barra dell'intestazione della chat** è un elemento chiave del design della tua chat. Se progettata con cura, offre agli utenti un contesto su cosa aspettarsi dall'esperienza di supporto e fiducia nella conversazione. Puoi usare l'intestazione per condividere informazioni sul tuo team di supporto e/o aggiungere il logo o i colori del tuo marchio.

Zoom CX offre diverse opzioni di design dell'intestazione tra cui puoi scegliere.

**Immagine dell'intestazione completa**

Aggiungi un'immagine di 426 pixel per 95 pixel che riempie l'intero spazio dell'intestazione, ottima per design personalizzati.

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-47cd7bf2bfb396f60736955b1db02d95bdd1dc04%2Fchat-full-header.png?alt=media" alt="This image shows a chat window with a blue gradient header that says Zoom Virtual Agent. The image fills the header space." width="375"><figcaption></figcaption></figure>

**Dimensione dell'immagine dell'avatar**

Aggiungi un'immagine di 40 x 40 pixel da visualizzare nella barra dell'intestazione, da mostrare da sola o insieme al testo dell'intestazione.

{% columns %}
{% column %}

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-9c882aae75d1ccea2d35f87b4241bcf42d77fbc5%2Fimage.png?alt=media" alt="Image of a chat screen with Zoom logo in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-61f505c8f139782d7f5f797e297da44f43507826%2Fimage%20(13).png?alt=media" alt="Image of a chat screen with Zoom logo and header text in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

**Solo testo nell'intestazione**

Condividi una breve nota su qualsiasi cosa, come il nome del tuo team, la disponibilità o gli orari di supporto. Controlla la dimensione del testo dell'intestazione utilizzando H1, H2, H3 o la dimensione del paragrafo del corpo.

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-72f870fbba9b4c1f7a7103706908de36b157db36%2Fimage.png?alt=media" alt="Image of a chat screen with header text only in the header bar." width="375"><figcaption></figcaption></figure>

Per un design lineare e minimalista puoi optare per **lasciarla vuota**, concentrando gli utenti sulla chat.

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-d0fb1e76f829104ec3cf80604620e232d46f2234%2Fimage.png?alt=media" alt="Image of a chat screen with nothing in the header bar." width="375"><figcaption></figcaption></figure>

Puoi usare **seleziona qualsiasi colore per lo sfondo e le icone dell'intestazione**, utile per integrare il design della chat al tuo sito web.

{% hint style="warning" %}
**Attenzione**

Se cambi il colore di sfondo, assicurati di riuscire ancora a vedere le icone per ridurre a icona e il menu. Potrebbe essere necessario cambiare anche il colore delle icone.

<img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-00429cd4c5188fe86b153ad85efc46340e5ccfbb%2Fimage.png?alt=media" alt="Image of a chat screen with a blue header bar, with no logo or text." data-size="original">
{% endhint %}

#### <mark style="color:blu;">Colori per la bolla della chat, il testo, le icone e altro</mark>

Il creatore della finestra di coinvolgimento ti consente di scegliere i colori esatti che desideri per la tua chat. Inserirai codici esadecimali per ogni parte della finestra e rivedrai l'anteprima per vedere come appare.

Zoom fornisce un modello per iniziare. Per mantenere un aspetto ottimale (e facile da leggere), atteniti ai colori del tuo marchio e assicurati che ci sia abbastanza contrasto tra i colori del testo e dello sfondo.

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-8774508f3fee14c82e8ce2f3d7af47a58e3f82d7%2Fimage.png?alt=media" alt="Image of the template for formatting your engagement window."><figcaption></figcaption></figure>

#### <mark style="color:blu;">Schermata di benvenuto</mark>

Il **Schermata di benvenuto** in Zoom Contact Center e Zoom Virtual Agent è una schermata introduttiva opzionale che appare prima dell'inizio della chat, dandoti la possibilità di salutare i tuoi clienti, raccogliere informazioni da loro e adattare l'esperienza al tuo marchio.

Questo è disponibile per l'esperienza di chat web. Per configurarlo, fai clic su **Coinvolgimento chat** finestra, quindi su **Schermata di benvenuto** del sito.

***

### Design dell'invito

L'Invito è ciò che avvierà l'esperienza di supporto sul tuo sito web. È più comune usare il [**Sticky** tipo di invito](https://library.zoom.com/technical-library/it/servizi-business/zoom-contact-center/expert-insights/customize-user-chat-support-experience/..#the-parts), che è un'icona flottante che appare sul tuo sito web. Quando i tuoi utenti la cliccano, la finestra della chat si aprirà e inizierà la loro esperienza.

Per creare o modificare un Invito, vai all'Amministrazione Web di Zoom.

Da lì, fai clic su **+Aggiungi campagna** o apri la bozza di una Campagna esistente. Scorri fino alla **Invito** sezione per creare un nuovo invito.

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-7910d9628228b300d601f0b10a3a49f69abbe6d6%2Fimage.png?alt=media" alt="Image of a Zoom Support window that says &#x22;Hello! How can we help?&#x22;" width="375"><figcaption></figcaption></figure>

Puoi configurare le seguenti impostazioni per la tua **Invito Sticky** icona:

* **Dimensione del pulsante:** La dimensione dell'icona dell'invito alla chat dovrebbe essere abbastanza grande da essere facilmente notata e cliccata o toccata, ma non così grande da disturbare l'esperienza utente o coprire contenuti importanti. Zoom offre tre dimensioni di Invito:
  * **S:** 40 pixel
  * **M:** 56 pixel, **Predefinito**
  * **L:** 72 pixel
* **Colore del pulsante:** Scegli un colore del pulsante che abbia un alto contrasto rispetto allo sfondo del tuo sito web. Raccomandiamo di seguire [le linee guida WCAG 2.1](https://www.w3.org/TR/WCAG21/#contrast-minimum), che prevedono un rapporto di contrasto minimo di 3:1 per i componenti dell'interfaccia utente (UI), come icone e pulsanti, rispetto al loro sfondo.
* **Icona:** Un'icona può aiutare i tuoi utenti a farsi un'idea di cosa aspettarsi toccando il pulsante. Zoom offre alcuni design predefiniti tra cui scegliere che indicano l'avvio di una chat. Puoi anche aggiungere la tua icona personalizzata utilizzando un file SVG. I file SVG devono essere inferiori a 10 MB.
* **Raggio degli angoli:** Quanto vuoi che l'icona dell'invito sia arrotondata o squadrata? Dai un'occhiata al tuo sito per vedere se c'è un modello su come appaiono i pulsanti, o chiedi al tuo team del brand se hanno una preferenza. Usare un raggio degli angoli inferiore, come 8 pixel, renderà l'Invito più squadrato. Un raggio degli angoli maggiore, come 28 pixel, renderà l'invito più rotondo.
* **Aggiungi testo al tuo Invito:** Aggiungere un'etichetta testuale a un pulsante di invito lo rende più chiaro e invitante. Gli utenti capiscono immediatamente lo scopo del pulsante, quindi non c'è da indovinare cosa significhi l'icona. Tuttavia, occupa anche più spazio e potrebbe affollare lo schermo, specialmente su mobile. Considera il tuo pubblico e i dispositivi che usano più frequentemente. Se aggiungi un carattere, puoi scegliere tra le opzioni preimpostate Arial, Georgia, Tahoma o Verdana; oppure caricare un tuo font personalizzato usando un file TTF.

#### <mark style="color:blu;">**Posizione dell'invito nella pagina**</mark>

La posizione più popolare per un'icona di invito al supporto è l'angolo in basso a destra, con un offset dal fondo e dal lato di 20 pixel. Questo è generalmente facile da notare senza bloccare contenuti chiave.

Raccomandiamo di guardare il tuo sito sia su desktop che su mobile. Se il tuo sito ha già un banner o un pulsante in questa posizione, potrebbe compromettere l'usabilità per i tuoi clienti o interrompere i flussi degli utenti.

Se hai già un elemento (come un banner dei cookie, una barra di navigazione o un altro widget) nello stesso punto dell'icona dell'invito alla chat, considera di cambiare l'allineamento a sinistra o a destra, o di regolare l'offset dal basso o dai lati.

{% hint style="success" %}
**Esempio**

Se scopri che il pulsante dell'invito alla chat copre un link critico nella parte inferiore della tua pagina su dispositivi mobili, aumenta l'offset finché l'icona dell'invito non copre più quell'elemento.
{% endhint %}

Puoi anche "Abilitare i consumatori a trascinare e spostare l'invito" per offrire ai tuoi utenti ancora più flessibilità nel posizionare l'icona nella pagina.

#### <mark style="color:blu;">Domanda comune</mark>

L'icona di invito alla chat sta bloccando o distraendo gli utenti in una particolare pagina su dispositivi mobili. Quali sono le mie opzioni?

**Risposta:**

Ci sono diversi modi per ottenere questo risultato.

* **Opzione 1:** Modifica la posizione dell'icona dell'invito nella pagina. Puoi spostare la posizione dell'invito nella pagina usando le opzioni di offset e posizione. Questo si configura modificando l'invito.
* **Opzione 2:** Mostra o nascondi l'icona della chat in base alla posizione della pagina. Se vuoi rimuovere completamente l'invito alla chat per tutte le pagine di pagamento, modifica la Posizione per escludere le pagine di checkout. Ad esempio, puoi escludere tutte le pagine che contengono "checkout" nell'URL.
* **Opzione 3:** Configura il targeting per dispositivo. Se non vuoi che l'icona dell'invito appaia sui siti mobili, deseleziona l'opzione "telefono mobile" sotto Targeting della Campagna. Per configurarlo, fai clic su **Campagna**, **Targeting**.

Le Campagne Zoom offrono un [**invito incorporato**](https://library.zoom.com/technical-library/it/servizi-business/zoom-contact-center/expert-insights/customize-user-chat-support-experience/..#the-parts) opzione se non vuoi usare l'icona sticky predefinita per avviare la chat. Questo ti consente di trasformare qualsiasi elemento sul tuo sito web, come un pulsante nel menu o un link in una pagina, in un trigger per aprire la finestra della chat.

Per farlo, crei l'elemento nell'HTML del tuo sito e utilizzi lo Zoom Campaign SDK per collegarlo alla chat. Quando un utente clicca quell'elemento, si apre la finestra della chat e inizia l'esperienza della campagna. Puoi anche usare l'HTML esistente sul tuo sito per attivare la finestra della chat, se preferisci.

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-0df545c67755150cc88ff94b7ecfc1fd2a7bff74%2Fimage.png?alt=media" alt="Image of the Create Embedded Invitation screen." width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
**Attenzione**

Vuoi sia un'icona di invito Sticky sia attivare l'apertura della chat tramite il clic di un pulsante sul tuo sito?

Crea una Campagna usando l'opzione Invito Sticky, quindi usa [lo SDK delle Campagne di Zoom](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) per attivare l'apertura della chat.
{% endhint %}

***

### Messaggistica proattiva

Che succede se vuoi un modo più attivo per attirare l'attenzione dei tuoi utenti affinché chattino con il tuo team o agente virtuale? La funzione di Messaggistica Proattiva di Zoom consente alle aziende di avviare conversazioni con i visitatori, invece di aspettare che il cliente inizi la chat cliccando l'invito.

#### <mark style="color:blu;">Come aiuta</mark>

* **Migliore coinvolgimento:** Puoi attirare l'attenzione delle persone e offrire assistenza al momento giusto.
* **Più lead:** Messaggi e pulsanti personalizzati possono incoraggiare le persone a saperne di più chattando con un agente, o a condividere le loro informazioni per una chiamata di follow-up.
* **Assistenza più rapida:** Collega rapidamente i visitatori a un bot o a un agente dal vivo, così ottengono risposte senza ritardi.

Quando un utente arriva su una pagina dove la messaggistica proattiva è abilitata, riceverà un messaggio e potrà cliccare i pulsanti per avviare un flusso specifico.

#### <mark style="color:blu;">Dove configurarla</mark>

Questa funzione si configura sotto **Campagne**, ed è disponibile per le campagne chat sulle pagine web che utilizzano il **Sticky** tipo di invito.

#### <mark style="color:blu;">Targetizza i tuoi utenti</mark>

Puoi impostare che il tuo messaggio proattivo abbia un ritardo, in modo che compaia solo per gli utenti che sono rimasti su quella pagina per un periodo specifico. Puoi anche scegliere se vuoi che l'utente veda il messaggio solo una volta in un periodo di 24 ore, o se vuoi che il messaggio proattivo ricompaia se l'utente aggiorna la pagina o visita un'altra pagina corrispondente.

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-88b5f038460b68336b3dd507b0f1c7eb7f7b04e8%2Fimage.png?alt=media" alt="Image of a Zoom Campaign window that asks &#x22;How can I help&#x22;." width="191"><figcaption></figcaption></figure>

#### <mark style="color:blu;">Domanda comune</mark>

Voglio avere un'icona di invito in modo che i miei utenti possano avviare una chat in qualsiasi momento, ma voglio anche inviare ai miei clienti un messaggio proattivo su una pagina specifica (per esempio, la pagina dei prezzi della mia azienda). Come lo configuro?

**Risposta**

Vorrai creare due Campagne: una per il tuo invito standard su tutto il sito ("Campagna A") e un'altra Campagna ("Campagna B") per la pagina in cui desideri avere un messaggio proattivo.

Per ciascuna Campagna, dovrai definire le Posizioni della Campagna in modo che non si sovrappongano.

{% hint style="success" %}
**Esempio**

La Posizione della Campagna A dovrebbe escludere "zoom.us/pricing" e la Posizione della Campagna B dovrebbe contenere "zoom.us/pricing." In questo modo, gli utenti che visitano qualsiasi URL che include "zoom.us" vedranno l'invito normale, mentre gli utenti che arrivano sulla pagina specifica "zoom.us/pricing" vedranno apparire il messaggio proattivo.
{% endhint %}

***

### Avatar

Un avatar è l'immagine che appare accanto ai messaggi nella chat web. Aiuta a dare personalità e identità visiva alla conversazione.

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-58fb8d5bb699354d77f5a0baa841a09ac56f7616%2Fimage.png?alt=media" alt="Image of the Zoom Virtual Agent avatar, including a picture of a woman with dark hair and a headset." width="375"><figcaption></figcaption></figure>

Per i messaggi inviati prima che un utente si connetta con un agente (ad esempio, un messaggio di benvenuto o dell'Agente Virtuale), puoi impostare un avatar predefinito unico per tutte le tue esperienze, oppure impostare un avatar unico per ciascun singolo flusso di chat. Questo ti dà la flessibilità di mantenere coerenza o di adattare l'esperienza per diversi marchi o casi d'uso.

Se stai usando **Zoom Contact Center**, fai clic sul seguente:

1. Preferenze
2. Esperienza del consumatore
3. Avatar e nome predefiniti per il messaggio del flusso.

Se stai usando **Solo Zoom Virtual Agent**, fai clic sul seguente:

1. menu AI Studio
2. Agenti virtuali
3. Chatbot
4. Scheda impostazioni

<figure><img src="https://2272214008-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-bce555e7ae1868a468f90882db1c9b2ce9cc69d2%2Fimage.png?alt=media" alt="Side-by-side image of the Customize Name and Avatar screen and a rendering of the settings."><figcaption></figcaption></figure>

Quando il tuo cliente passa dal bot a un agente live in Zoom Contact Center, puoi anche controllare come appare l'avatar dell'agente. Puoi scegliere di mostrare la foto del profilo dell'agente da Contact Center, le sue iniziali o un'immagine avatar impostata.

Per configurarlo, fai clic su quanto segue:

1. Preferenze
2. Esperienza del consumatore
3. Immagine di visualizzazione

***

### Impostazioni aggiuntive di configurazione della chat

#### <mark style="color:blu;">Controlla la finestra della chat web con lo Zoom Campaign SDK</mark>

Lo Zoom Contact Center (ZCC) e lo Zoom Virtual Agent (ZVA) Campaign SDK offrono agli sviluppatori un maggiore controllo su come si comporta la chat web e su come interagisce con il tuo sito. Ti permette di aprire, chiudere e controllare il comportamento della chat in modo programmato in base alle azioni dell'utente, al contesto della pagina o alla logica personalizzata.

Ad esempio, puoi fare in modo che la finestra della chat si apra automaticamente quando i tuoi utenti sono rimasti sulla pagina per un numero specifico di secondi o cliccano un determinato pulsante.

Vedi [Documentazione per sviluppatori di Zoom Riferimento SDK](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) per ulteriori dettagli.

#### <mark style="color:blu;">Persistenza della chat a livello di sito</mark>

La persistenza della chat controlla se la sessione di chat di un utente continua mentre si sposta tra diverse pagine del tuo sito web.

* **Quando la persistenza è&#x20;*****abilitata*****&#x20;(predefinita):** La stessa chat rimane aperta tra le pagine, così l'utente può continuare la conversazione senza interruzioni.
* **Quando la persistenza è&#x20;*****disabilitata*****:** La chat non continua quando l'utente naviga su una nuova pagina, a meno che quella pagina non faccia esplicitamente parte della posizione definita della prima campagna.

Questo cambiamento rende più semplice per le aziende con più marchi o reparti sullo stesso dominio mantenere separate le campagne di chat. Impedisce agli utenti di portare una chat tra pagine non correlate e riduce la necessità di configurazioni manuali.

Trova questa impostazione sotto **Zoom Contact Center** che **Preferenze Zoom Virtual Agent**.

#### <mark style="color:blu;">Notifiche sonore</mark>

Per impostazione predefinita, quando il tuo agente o agente virtuale invia un messaggio nella chat web, i consumatori sentono un suono di notifica. Se i suoni predefiniti risultano fastidiosi per l'esperienza del tuo marchio, puoi disattivarli sotto **Zoom Contact Center** o **Preferenze Zoom Virtual Agent**.

I consumatori avranno comunque la possibilità di riattivarli nel menu della chat, se lo preferiscono.
