Dopo che un amministratore ha configurato il Web Widget di messaggistica nel Centro amministrativo e uno sviluppatore lo ha aggiunto al tuo sito web, puoi collaborare per personalizzare ulteriormente il comportamento e l’esperienza del widget. Questo ricettario offre una panoramica di ciò che è possibile fare con il Web Widget di messaggistica e include ricette. Per informazioni dettagliate sull’implementazione e ulteriori esempi di codice, consulta Web Widgets nella nostra documentazione per sviluppatori.

Riepilogo AI verificato ◀▼

Personalizza il Web Widget di messaggistica per migliorare le interazioni con i clienti sul tuo sito web. Configura opzioni come la lingua del widget, le conversazioni multiple e i temi dei colori. Controlla la visibilità, la posizione e la modalità incorporata dei widget per una perfetta integrazione. Collabora con gli sviluppatori per implementare le modifiche usando le API JavaScript, assicurandoti che il widget soddisfi le tue esigenze specifiche e migliori l’esperienza utente su pagine e dispositivi diversi.

Dopo che un amministratore ha configurato il Web Widget di messaggistica nel Centro amministrativo e uno sviluppatore lo ha aggiunto al tuo sito web, puoi collaborare per personalizzare ulteriormente il comportamento e l’esperienza del widget. Questo ricettario offre una panoramica di ciò che è possibile fare con il Web Widget di messaggistica e include ricette. Per informazioni dettagliate sull’implementazione e ulteriori esempi di codice, consulta Web Widget nella nostra documentazione per sviluppatori.

Nota: questo articolo è relativo agli account che usano il Web Widget di messaggistica. Se usi il Web Widget (versione classica), consulta Personalizzazione avanzata del Web Widget (versione classica) .

Questo articolo include i seguenti argomenti:

  • Pianificazione della personalizzazione del Web Widget di messaggistica
  • Apertura e chiusura del widget
  • Visualizzazione del widget in un'altra lingua
  • Configurazione conversazioni multiple
  • Riposizionamento del programma di avvio
  • Personalizzazione del colore degli elementi del widget
  • Modifica dell'ordine visibile nel widget
  • Visualizzazione del widget in modalità incorporata

Pianificazione della personalizzazione del Web Widget di messaggistica

La maggior parte degli amministratori Zendesk non sono sviluppatori web e collaborano con uno sviluppatore per implementare le personalizzazioni del Web Widget di messaggistica. In genere, un amministratore configura le impostazioni di messaggistica nel Centro amministrativo, mentre uno sviluppatore aggiorna il codice del sito web per controllare il comportamento del widget usando le API JavaScript Web Widget di messaggistica. Ad esempio, le API possono cambiare quando il widget viene mostrato o aperto.

Anche se uno sviluppatore gestisce l’implementazione, gli amministratori svolgono comunque un ruolo importante nel comprendere ciò che è possibile fare e nel comunicare chiaramente l’esperienza desiderata.

La personalizzazione del Web Widget di messaggistica in genere comporta i seguenti passaggi:

  1. Consulta questo ricettario per capire quali opzioni di personalizzazione sono disponibili.
  2. Incontra le parti interessate per definire i requisiti per l’esperienza con i widget. Ad esempio, quando deve essere visualizzato, dove deve essere posizionato, se usare un programma di avvio personalizzato e se autenticare gli utenti.
  3. Crea un elenco specifico delle modifiche desiderate e includi link a qualsiasi documentazione per sviluppatori pertinente a cui il tuo sviluppatore possa fare riferimento.
  4. Chiedi allo sviluppatore di implementare le modifiche aggiornando il codice HTML e JavaScript del tuo sito web (e CSS per posizionare il pulsante di avvio o definire lo stile di qualsiasi pulsante di avvio personalizzato), quindi prova l’esperienza su pagine e dispositivi chiave. Il Web Widget di messaggistica viene visualizzato all’interno di un iframe aggiunto alla pagina, quindi il CSS del sito può aiutare con il posizionamento, ma non può definire lo stile dell’interfaccia utente del widget.
Nota: Questo articolo include diversi esempi JavaScript. Inseriscili dopo il codice del Web Widget di messaggisticazE è disponibile. 
<!-- Messaging Web Widget -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY"></script>

<!-- After the Web Widget code -->
<script>
  zE("messenger:set", "locale", "es");
</script>
Se il sito carica il widget in background (ad esempio, un’app a pagina singola che carica gli script dopo il rendering iniziale), assicurati che il widget sia completamente caricato prima di chiamarezE(...) .

Apertura e chiusura del widget

Puoi controllare quando la finestra di messaggistica e il pulsante di avvio sono disponibili e quando si aprono. Questa funzione è utile se vuoi che il pulsante di avvio sia visibile solo in determinate pagine o se vuoi aprire la messaggistica in risposta a un’azione dell’utente, ad esempio facendo clic su un pulsante della Guida. Il pulsante di avvio è il piccolo pulsante (di solito nell’angolo in basso) su cui gli utenti fanno clic per iniziare a inviare messaggi. La finestra di messaggistica è l’interfaccia di chat espansa che si apre dopo che l’utente fa clic sul pulsante di avvio. Proprietà API disponibili:
  • show ehide controlla se il pulsante di avvio è visibile.
  • open eclose controlla se la finestra di messaggistica viene espansa.

Nascondere il pulsante di avvio non impedisce di aprire la finestra di messaggistica usandozE("messenger", "open") .

Controllo della visibilità del programma di avvio:
zE("messenger", "show"); // show launcher
zE("messenger", "hide"); // hide launcher
Controllo dello stato della finestra di messaggistica:
zE("messenger", "open");  // open messaging window
zE("messenger", "close"); // close messaging window
Esempio di pulsante della Guida personalizzato che mostra il pulsante di avvio e apre la finestra di messaggistica:
<button id="help-button" type="button">Help</button>
<script>
  document.getElementById("help-button").onclick = function () {
    zE("messenger", "show"); // ensure launcher is available
    zE("messenger", "open"); // open messaging window
  };
</script>

Per maggiori informazioni, consulta Visualizzazione del Web Widget di messaggistica .

Visualizzazione del widget in un'altra lingua

Per impostazione predefinita, il Web Widget di messaggistica usa la lingua del browser dell’utente finale. Per ignorare questo comportamento (ad esempio, in modo che corrisponda a un selettore di lingua nel sito), imposta le impostazioni locali in fase di runtime inserendo questo codice immediatamente dopo lo script di incorporamento Web Widget . Se il sito carica il widget in modo asincrono (ad esempio, in un’applicazione a pagina singola), eseguilo al più prestozE è disponibile e prima di chiamare altri comandi Web Widget di messaggistica.

<!-- Messaging Web Widget snippet -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY"></script>

<!-- Immediately after the snippet -->
<script>
  zE("messenger:set", "locale", "es");
</script>

Per un elenco delle impostazioni locali e dei codici delle impostazioni locali supportati, consulta https:// assistenza.zendesk.com/api/v2/locales/public.json . Per ulteriori informazioni sull’impostazione delle impostazioni locali, consulta Impostazione delle impostazioni locali .

Configurazione conversazioni multiple

Le conversazioni multiple consentono agli utenti finali di avere più di una conversazione attiva contemporaneamente con la tua organizzazione (ad esempio, thread separati per problemi diversi). Per usare le conversazioni multiple, un amministratore Zendesk deve abilitarlo e il tuo account deve avere accesso a Sunshine Conversations. Per informazioni, consulta Configurazione conversazioni multiple .

Se usi l’autenticazione, autentica gli utenti prima di mostrare il pulsante di avvio. Il ritardo dell’autenticazione può comportare conversazioni anonime e rendere più difficile per gli utenti l’accesso alle conversazioni precedenti. Ad esempio:

zE("messenger", "hide");

zE("messenger", "loginUser", function (callback) {
  callback("new-jwt-for-user");
}, function (error) {
  if (error) return;
  zE("messenger", "show");
});

Se hai accesso a Sunshine ConversationsUpdateConversation endpoint, puoi impostare un titolo e un avatar personalizzati per ogni conversazione. Gli aggiornamenti non si riflettono immediatamente nella schermata di messaggistica corrente dell’utente; vengono visualizzati la prossima volta che l’utente ricarica l’interfaccia utente di messaggistica. 

{
  "displayName": "My conversation",
  "iconUrl": "https://www.someplace.com/image.jpg"
}

Gli utenti possono passare da un thread all’altro usando la schermata di un elenco di conversazioni. Se vuoi mostrare un’interfaccia a conversazione singola, Sunshine Conversations supporta acanUserSeeConversationList per nascondere l’elenco delle conversazioni e mostrare solo la conversazione aggiornata più di recente.

{
  "canUserSeeConversationList": false
}

Riposizionamento del programma di avvio

Per impostazione predefinita, il pulsante di avvio Web Widget di messaggistica viene visualizzato nell’angolo in basso a destra del browser. Per spostare il pulsante di avvio, usa uno di questi approcci:

  • Posizionamento CSS (consigliato per gli spostamenti semplici): Modifica il posizionamento del pulsante di avvio scegliendo come target l’elemento del widget (spesso un iframe) e aggiornandoleft ,right , ebottom offset. Usa gli strumenti di sviluppo del browser per esaminare l’iframe e il contenitore del widget e, se necessario, regolare il selettore.
  • Pulsante di avvio personalizzato (consigliato per il controllo completo): Nascondi il pulsante di avvio predefinito e posiziona il pulsante “Aiuto” in un punto qualsiasi del layout, quindi apri il widget a livello di codice.

Esempio: Spostamento del programma di avvio predefinito usando CSS

Questo esempio sposta il pulsante di avvio predefinito nell’angolo in basso a sinistra usando CSS.
/* Move the Zendesk messaging Web Widget launcher to the bottom left */
/* Use your browser's DevTools to find the widget iframe and adjust the selector as needed */
iframe[title*="Zendesk"],
iframe[aria-label*="Zendesk"] {
  right: auto !important;
  left: 24px !important;
  bottom: 24px !important;
}
Nota: Il Web Widget di messaggistica può aggiungere più iframe alla pagina. Ad esempio, il pulsante di avvio e la finestra di conversazione. Se il codice CSS influisce su più elementi del pulsante di avvio, restringi il selettore all’iframe o al contenitore specifico da riposizionare.

Esempio: Nascondere il programma di avvio predefinito e usare un pulsante della Guida personalizzato

Questo esempio mostra come usare il tuo pulsante Guida come unico punto di accesso alla messaggistica. Nel Centro amministrativo, configura un pulsante di avvio personalizzato in modo che il pulsante di avvio predefinito non venga mostrato. Nel codice del sito, chiamazE("messenger","hide") per garantire che il programma di avvio predefinito rimanga nascosto. Se usi la messaggistica autenticata (JWT), autentica l’utente prima di chiamareopen() .

zE("messenger","hide")

document.getElementById("help-button").onclick = function () {
  zE("messenger", "open");
};

Esempio: Usando un pulsante della Guida personalizzato e mantenendo disponibile il programma di avvio predefinito

Questo esempio mostra come usare un pulsante Guida per aprire la messaggistica consentendo comunque la visualizzazione del pulsante di avvio predefinito dopo l’autenticazione (ad esempio, in modo che gli utenti possano riaprire la messaggistica in un secondo momento senza tornare al pulsante Guida). Se l’autenticazione non riesce, il pulsante Aiuto apre il widget in modo anonimo.

zE("messenger", "hide");

let authSucceeded = false;

zE("messenger", "loginUser", function (callback) {
  // Fetch or provide a JWT for the signed-in user
  callback("new-jwt-for-user");
}, function (error) {
  if (error) {
    // Auth failed — user can still open messaging anonymously via the Help button
    return;
  }
  authSucceeded = true;
  zE("messenger", "show"); // show launcher after successful auth
});

document.getElementById("help-button").onclick = function () {
  // If auth didn't succeed (or hasn't completed yet), open anonymously
  if (!authSucceeded) {
    zE("messenger", "show");
  }
  zE("messenger", "open");
};

Personalizzazione del colore degli elementi del widget

Puoi configurare la combinazione di colori generale per il Web Widget di messaggistica, inclusi lo stile del pulsante di avvio e i colori del brand dal Centro amministrativo. Consulta Configurazione del nome e dell’aspetto del Web Widget .

Se hai bisogno di un maggiore controllo sui singoli elementi dell’interfaccia utente, puoi personalizzare i colori dei widget in fase di runtime usando JavaScript. L’API di personalizzazione Web Widget di messaggistica consente di impostare colori specifici del tema (come i colori del programma di avvio e delle intestazioni, i colori delle bolle dei messaggi di utenti finali e agenti, i colori dei pulsanti di azione e i colori di sfondo) chiamando
zE("messenger:set", "customization", { theme: ... })

Queste sostituzioni basate su JavaScript:

  • applicare immediatamente dopo il caricamento del widget
  • si applica solo alle pagine in cui viene eseguito lo script
  • ripristinano i colori del Centro amministrativo quando lo script viene rimosso o l’utente visita una pagina senza di esso
Per maggiori informazioni, consulta Personalizzazione dei colori Web Widget . Ecco un esempio di aggiornamento dei colori dei temi con JavaScript:
zE("messenger:set", "customization", {
  theme: {
    primary: "#0B5FFF",
    onPrimary: "#FFFFFF",
    message: "#F1F8FF",
    onMessage: "#003366",
    action: "#0B5FFF",
    onAction: "#FFFFFF"
  }
});
Iltheme l’oggetto supporta proprietà come:
  • primary eonPrimary per gli elementi di avvio e chiave dell’interfaccia utente
  • message eonMessage per i fumetti degli utenti finali
  • businessMessage eonBusinessMessage per le bolle di agenti e bot
  • action eonAction per i pulsanti di azione
  • background eonBackground per lo sfondo del widget e il colore predefinito del testo e delle icone

Modifica dell'ordine visibile nel widget

Il Web Widget di messaggistica supporta azIndex che si applica agli iframe del widget, consentendoti di controllare se il pulsante di avvio e l’interfaccia utente del widget vengono visualizzati sopra o sotto altri elementi fissi della pagina (come banner dei cookie, intestazioni permanenti o pulsanti mobili). L’aumento del valore porta il widget in avanti; diminuendolo, il widget viene spostato dietro altri elementi.

// Set the z-index for the messaging Web Widget iframes (default is typically 999999)
zE("messenger:set", "zIndex", 1000000);

Per maggiori informazioni, consulta Impostazione di zIndex nella documentazione per sviluppatori.

Visualizzazione del widget in modalità incorporata

Nella modalità incorporata, crei un elemento contenitore nella pagina e visualizzi il Web Widget di messaggistica in quel contenitore. In genere, disattivi il pulsante di avvio mobile in modo che venga mostrata solo l’esperienza incorporata. Ciò è utile quando vuoi che la messaggistica appaia all’interno del layout di pagina (ad esempio, in una pagina dedicata “Contatta assistenza”) anziché come un pulsante di avvio mobile nell’angolo. Questo può aiutare a evitare la sovrapposizione con altri elementi fissi dell’interfaccia utente e offre un maggiore controllo su dove viene visualizzata la messaggistica.

Disabilita il rendering automatico in base all’impostazionewindow.zEMessenger.autorender = false prima di caricare il frammento di widget.

<script>
  window.zEMessenger = {
    autorender: false
  };
</script>

Quindi chiamarender dopo il caricamento del frammento di codice.

<!-- Container where the embedded messaging Web Widget will render -->
<div id="embedded-messaging"></div>

<script>
  // Render the widget in embedded mode into the container
  zE("messenger:set", "render", {
    mode: "embedded",
    widget: {
      target: "#embedded-messaging"
    }
  });
</script>
Nella modalità incorporata, la messaggistica viene visualizzata direttamente all’interno dell’elemento di destinazione (non nel pulsante di avvio mobile), quindi non usa lo stesso comportamento di apertura o chiusura. Assicurati che il contenitore sia visibile e disponga di spazio sufficiente (ad esempio, imposta amin-height o posizionarlo in un’area del layout che fornisce l’altezza) oppure l’esperienza incorporata potrebbe apparire ritagliata o troppo piccola. Ad esempio:
#embedded-messaging { min-height: 520px; }

Per maggiori informazioni, consulta Modalità incorporata Web Widget .

Avvertenza sulla traduzione: questo articolo è stato tradotto usando un software di traduzione automatizzata per fornire una comprensione di base del contenuto. È stato fatto tutto il possibile per fornire una traduzione accurata, tuttavia Zendesk non garantisce l'accuratezza della traduzione.

Per qualsiasi dubbio sull'accuratezza delle informazioni contenute nell'articolo tradotto, fai riferimento alla versione inglese dell'articolo come versione ufficiale.

Powered by Zendesk