Personalizzazioni HTML di Dialogflow CX Messenger

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

Opzioni dell'elemento HTML della chat

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 della bolla

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 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 genererà 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 da un messaggio "Richiedi autenticazione" (il testo può essere controllato, vedi la notifica 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 di conversazione. Utilizza none se i messaggi non devono essere archiviati. Se utilizzi none, tutti i messaggi verranno cancellati quando la pagina viene aggiornata o ricaricata. Il valore predefinito è sessionStorage.
session-ttl	Facoltativo	Imposta una durata in secondi per mantenere la sessione. Il valore deve essere 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

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

Attributo	Policy di input	Valore
chat-title	Facoltativo	Il titolo della finestra di chat, mostrato sopra.
chat-subtitle	Facoltativo	Il sottotitolo della finestra di chat, mostrato sopra, sotto chat-title.
chat-title-icon	Facoltativo	L'icona mostrata nel titolo della finestra di chat, mostrata sopra, 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 visualizzata 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 visualizzare 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. Verrà mostrata in ogni gruppo di risposte dell'agente.
user-actor-image	Facoltativo	Origine dell'immagine da utilizzare per l'immagine dell'attore dell'utente. Verrà mostrata in 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 è impostato, la chat ricorderà l'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 di compressione nella barra del titolo. Deve essere un URI disponibile pubblicamente.
anchor	Facoltativo	Definisce la posizione della finestra di dialogo della chat rispetto alla bolla 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 dalla bolla. Ad esempio, top-left viene posizionato sopra la bolla e si espande verso sinistra e verso l'alto (lontano dalla bolla).
chat-width	Facoltativo	Definisce la larghezza della finestra di 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 una finestra normale. Se impostato, può sostituire chat-width, chat-height e anchor.
minimized	Facoltativo	Determina se la chat è inizialmente aperta in forma ridotta. Utilizza la stessa logica di anchor. Se specificato, eseguirà l'intent iniziale al caricamento.