Esistono molte personalizzazioni HTML che puoi applicare a una finestra di dialogo della chat.
Opzioni per gli elementi 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 apertadf-messenger-chat-bubble
: la finestra di dialogo dell'agente può essere aperta o chiusa con un pulsante a fumetto
Personalizzazioni HTML per df-messenger
L'elemento HTML df-messenger
ha i seguenti attributi:
Attributo | Criterio di input | Valore |
---|---|---|
agent-id |
Obbligatorio | ID agente associato all'agente Dialogflow. |
allow-feedback |
Facoltativo | Impostalo 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 dell'agente. |
location |
Facoltativo | La regione dell'agente. Il valore predefinito è global . |
intent |
Facoltativo | Un evento personalizzato che viene 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 di Dialogflow Messenger è attivato, gli utenti non autenticati possono interagire con l'agente. Se il valore viene fornito, alla finestra di dialogo dell'agente verrà visualizzata la dicitura "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 lo spazio di archiviazione locale per i messaggi di conversazione. Utilizza none se i messaggi non devono essere archiviati. L'utilizzo di none cancellerà tutti i messaggi quando la pagina viene aggiornata o ricaricata. Il valore predefinito è sessionStorage. |
session-ttl |
Facoltativo | Impostato su una durata in secondi per mantenere la sessione, deve essere rigorosamente inferiore a 86400 (1d) e il valore predefinito è 1800 (30min). |
url-allowlist |
Facoltativo | Consente di attivare il caricamento delle immagini da un elenco separato da virgole di prefissi URL. Gli URL immagine 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 | Criterio di input | Valore |
---|---|---|
chat-title |
Facoltativo | Il titolo del riquadro della chat, mostrato sopra. |
chat-subtitle |
Facoltativo | Il sottotitolo del riquadro della chat, mostrato sopra, sotto l'icona chat-title |
chat-title-icon |
Facoltativo | L'icona mostrata nel titolo del riquadro della chat, visibile sopra, a sinistra di chat-title per impostazione predefinita |
bot-writing-text |
Facoltativo | Il testo che viene mostrato mentre l'agente sta scrivendo |
bot-writing-image |
Facoltativo | L'immagine che viene 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 visualizzare nel campo di immissione vuoto. Il valore predefinito è "Chiedi qualcosa...". |
bot-actor-image |
Facoltativo | Origine immagine da utilizzare per l'immagine dell'attore dell'agente. Verranno mostrate su ogni gruppo di risposte degli agenti. |
user-actor-image |
Facoltativo | Origine immagine da utilizzare per l'immagine dell'attore dell'utente. Verrà mostrato in ciascun 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 | Criterio di input | Valore |
---|---|---|
expanded |
Facoltativo | Valore booleano che determina se la chat è inizialmente aperta. Se non viene configurato, la chat ricorda l'ultimo stato. |
chat-icon |
Facoltativo | Icona della bolla della chat. Deve essere un URI disponibile pubblicamente. |
chat-close-icon |
Facoltativo | Icona di chiusura per il fumetto della chat. Deve essere un URI disponibile pubblicamente. |
chat-collapse-icon |
Facoltativo | 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 a quella di apertura o chiusura. Il valore corrisponde a 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 lontano dal fumetto. Ad esempio: top-left viene posizionato sopra la bolla 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 è possibile aprire la finestra della chat 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 gli schermi di dimensioni inferiori a 500 px, altrimenti si apre come una finestra normale. Se impostato, può eseguire l'override di chat-width , chat-height e anchor . |
minimized |
Facoltativo | Determina se la chat è aperta inizialmente in forma ridotta a icona. Utilizza la stessa logica di anchor . Se specificato, verrà eseguito il intent iniziale al caricamento. |