Personalizzazioni HTML di Dialogflow CX Messenger

Puoi applicare molte personalizzazioni HTML a una finestra di dialogo della chat.

Opzioni dell'elemento di 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 di apertura o chiusura a fumetto.

Personalizzazioni HTML per df-messenger

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

Attributo	Policy di input	Valore
agent-id	Obbligatorio	ID agente associato all'agente Dialogflow CX.
allow-feedback	Facoltativo	Imposta 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 viene richiamato quando viene aperta la finestra di dialogo della chat. Se la chat è aperta inizialmente (come con df-messenger-chat o expanded/minimized df-messenger-chat-bubble), l'attivazione avviene al caricamento della pagina. Puoi utilizzare un gestore di eventi che viene chiamato per questo evento e produce il primo messaggio dell'agente.
oauth-client-id	Facoltativo	Obbligatorio per l'autenticazione OAuth. Il valore predefinito è null. Se non fornisci questo valore e attivi l'accesso non autenticato a Dialogflow CX Messenger, gli utenti non autenticati possono interagire con l'agente. Se fornisci questo valore, la finestra di dialogo dell'agente mostra un overlay "Richiedi autenticazione" che richiede agli utenti di accedere prima di poter utilizzare l'agente (puoi controllare il testo utilizzando l'attributo request-auth-text).
storage-option	Facoltativo	Specifica lo spazio di archiviazione locale per i messaggi della conversazione. Utilizza none se i messaggi non devono essere archiviati. L'utilizzo di none cancella 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 86.400 (1 giorno) e il valore predefinito è 1800 (30 minuti).
url-allowlist	Facoltativo	Consente di caricare le 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

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

Attributo	Policy di input	Valore
chat-title	Facoltativo	Il titolo della finestra di chat. Viene visualizzato nella parte superiore della finestra di chat.
chat-subtitle	Facoltativo	Il sottotitolo della finestra di chat. Mostrato sotto chat-title.
chat-title-icon	Facoltativo	L'icona mostrata nel titolo della finestra di chat. Visualizzato sopra la finestra della chat, a sinistra di chat-title per impostazione predefinita.
bot-writing-text	Facoltativo	Il testo visualizzato mentre l'agente sta scrivendo.
bot-writing-image	Facoltativo	L'immagine mostrata mentre l'agente sta scrivendo. 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 immissione quando è vuoto. Il valore predefinito è "Chiedi qualcosa…".
bot-actor-image	Facoltativo	Origine dell'immagine da utilizzare per l'immagine dell'attore dell'agente. Visualizzato su ogni gruppo di risposte dell'agente.
user-actor-image	Facoltativo	Origine dell'immagine da utilizzare per l'immagine dell'attore dell'utente. Visualizzato su ogni messaggio dell'utente.

Personalizzazioni HTML per df-messenger-chat-bubble

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 ricorda 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 al fumetto di apertura o chiusura. Il valore è costituito da due parole di 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 rispetto al fumetto. Ad esempio: top-left viene posizionato sopra il fumetto e si espande verso sinistra e verso l'alto (lontano dal fumetto).
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 della chat. Valori numerici (in pixel). Il valore predefinito è 480 px.
allow-fullscreen	Facoltativo	Definisce se la finestra della chat può aprirsi 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 schermi di dimensioni inferiori a 500 px, altrimenti si apre come una finestra normale. Può eseguire l'override di chat-width, chat-height e anchor, se impostati.
minimized	Facoltativo	Determina se la chat viene inizialmente aperta in un formato ridotto a icona. Utilizza la stessa logica di anchor. Se specificato, questo attributo ha la precedenza su expanded. In questo modo viene attivato anche l'evento intent iniziale al caricamento.