Personalizzazioni HTML di Dialogflow CX Messenger

Esistono molte personalizzazioni HTML che puoi applicare a una finestra di dialogo della chat.

Opzioni dell'elemento chat HTML

L'elemento secondario dell'elemento df-messenger può essere uno dei seguenti:

  • df-messenger-chat: la finestra di dialogo dell'agente è sempre aperta
  • df-messenger-chat-bubble: la finestra di dialogo dell'agente può essere aperta o chiusa con un pulsante a bolla di apertura o chiusura

Personalizzazioni HTML per df-messenger

L'elemento HTML df-messenger prevede i seguenti attributi:

Attributo Policy di input Valore
agent-id Obbligatorio ID agente associato all'agente Dialogflow CX.
allow-feedback Facoltativo Imposta il valore su all per consentire agli utenti finali di fornire feedback sulle risposte dell'agente.
language-code Obbligatorio Codice lingua predefinito.
project-id Obbligatorio ID progetto per l'agente.
location Facoltativo La regione dell'agente. Il valore predefinito è global.
intent Facoltativo Un evento personalizzato che verrà richiamato all'apertura della finestra di dialogo della chat. Puoi utilizzare un gestore di eventi che verrà chiamato per questo evento e produrrà il primo messaggio dell'agente.
oauth-client-id Facoltativo Obbligatorio per l'autenticazione OAuth. Il valore predefinito è null. Se il valore non viene fornito e l'accesso non autenticato a Dialogflow CX Messenger è attivato, gli utenti non autenticati possono interagire con l'agente. Se viene fornito il valore, la finestra di dialogo dell'agente verrà sovrapposta alla notifica "Richiedi autenticazione" (il testo può essere controllato, vedi request-auth-text), che richiede all'utente di accedere prima di poter utilizzare l'agente.
storage-option Facoltativo Specifica l'archiviazione locale per i messaggi delle conversazioni. Utilizza none se i messaggi non devono essere memorizzati. L'utilizzo di none cancellerà tutti i messaggi quando la pagina viene aggiornata o ricaricata. Il valore predefinito è sessionStorage.
session-ttl Facoltativo Imposta una durata in secondi per mantenere la sessione, che deve essere rigorosamente inferiore a 86400 (1 giorno) e il valore predefinito è 1800 (30 minuti).
url-allowlist Facoltativo Consente il caricamento delle immagini da un elenco di prefissi URL separati da virgole. Gli URL delle immagini utilizzati nelle risposte HTML o Markdown devono iniziare con uno dei prefissi elencati. Utilizza * per consentire tutti gli URL.
max-query-length Facoltativo Definisce la lunghezza massima di una query di testo. Se il valore è negativo, la lunghezza è illimitata. Il valore predefinito è 256. Documentazione aggiuntiva.

Personalizzazioni HTML per df-messenger-chat

Screenshot di Dialogflow CX Messenger

L'elemento HTML df-messenger-chat prevede i seguenti attributi:

Attributo Policy di input Valore
chat-title Facoltativo Il titolo della casella di chat, visualizzato sopra.
chat-subtitle Facoltativo Il sottotitolo della casella della chat, mostrato sopra, sotto chat-title
chat-title-icon Facoltativo L'icona mostrata nel titolo della casella di chat, sopra, a sinistra di chat-title per impostazione predefinita
bot-writing-text Facoltativo Il testo visualizzato mentre l'agente scrive
bot-writing-image Facoltativo L'immagine mostrata mentre l'agente scrive. Ha la priorità su bot-writing-text.
request-auth-text Facoltativo Il testo del pulsante nel caso in cui sia richiesta l'autenticazione.
placeholder-text Facoltativo Testo da mostrare nel campo di input quando è vuoto. Il valore predefinito è "Chiedi qualcosa…".
bot-actor-image Facoltativo L'origine dell'immagine da utilizzare per l'immagine dell'attore dell'agente. Verrà visualizzato in ogni gruppo di risposte dell'agente.
user-actor-image Facoltativo Origine dell'immagine da utilizzare per l'immagine dell'attore dell'utente. Verrà visualizzato in ogni messaggio dell'utente.

Personalizzazioni HTML per df-messenger-chat-bubble

Screenshot di Dialogflow CX Messenger

L'elemento HTML df-messenger-chat-bubble ha gli stessi attributi di df-messenger-chat e i seguenti attributi aggiuntivi:

Attributo Policy di input Valore
expanded Facoltativo Valore booleano che determina se la chat è inizialmente aperta. Se non viene impostato, la chat ricorderà il suo ultimo stato.
chat-icon Facoltativo L'icona della bolla della chat. Deve essere un URI disponibile pubblicamente.
chat-close-icon Facoltativo L'icona di chiusura della bolla della chat. Deve essere un URI disponibile pubblicamente.
chat-collapse-icon Facoltativo L'icona del pulsante Comprimi nella barra del titolo. Deve essere un URI disponibile pubblicamente.
anchor Facoltativo Definisce la posizione della finestra di dialogo della chat rispetto alla bolla aperta o chiusa. Il valore è costituito da due parole che indicano la direzione (top, bottom, left, right) delimitate da -. Il valore predefinito è top-left. La prima direzione definisce il punto di ancoraggio, mentre la seconda definisce la direzione di espansione principale lontano dalla bolla. Ad esempio, top-left viene posizionato sopra la bolla e si espande verso sinistra e verso l'alto (allontanandosi dalla bolla).
chat-width Facoltativo Definisce la larghezza della finestra della chat. Valori numerici (in pixel). Il valore predefinito è 320 px.
chat-height Facoltativo Definisce l'altezza della finestra di chat. Valori numerici (in pixel). Il valore predefinito è 480 px.
allow-fullscreen Facoltativo Definisce se la finestra di chat può essere aperta a schermo intero. Se impostato su always, si apre a schermo intero per tutte le dimensioni dello schermo. Se impostato su small, si apre a schermo intero per le dimensioni dello schermo inferiori a 500 px, altrimenti si apre come finestra normale. Può ignorare chat-width, chat-height e anchor se impostati.
minimized Facoltativo Determina se la chat è inizialmente aperta in forma ridotta. Utilizza la stessa logica di anchor. Eseguirà il intent iniziale al caricamento, se specificato.