Integrazione e impostazioni della Chat integrata
Inline chat
La chat integrata (<web-chat-agent-inline>) viene visualizzata all'interno del layout della pagina invece di fluttuare sopra di esso. È ideale per un centro assistenza, un consulente di prodotto, un portale interno o un assistente a tutta pagina.
Apri Dashboard → tuo assistente → Canali → Chat integrata. Il canale dispone di un proprio codice di installazione, impostazioni e anteprima live. Può essere eseguito sullo stesso sito del widget di chat fluttuante con titolo, contenuto di benvenuto, altezza, suggerimenti e stile differenti.
Installa la chat integrata
Espandi Mostra dettagli di installazione e copia il codice precompilato. Il formato manuale è:
<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
Posiziona l'elemento esattamente nel punto in cui deve apparire la chat e carica lo script una sola volta per pagina. L'elemento occupa l'intero contenitore padre, quindi la larghezza dipende dal tuo layout:
<div style="max-width: 720px; margin: 0 auto;">
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
</div>
Usa la versione copiata dalla dashboard per evitare errori di battitura nell'ID del chatbot. Il pannello di installazione può anche verificare se questo assistente viene caricato su un dominio consentito.
Aspetto
| Impostazione | Cosa modifica |
|---|---|
| Titolo | Intestazione nella schermata iniziale. Lascialo vuoto per nascondere l'intestazione. |
| Colore principale | Colore accent per i pulsanti e i messaggi dei visitatori. |
| Famiglia di Caratteri | Carattere del widget. Cerca su Google Fonts o inserisci il nome di un carattere personalizzato. |
| Altezza | Altezza del contenitore della chat come valore CSS, ad esempio 600px, 80vh o 100%. |
| Messaggio di benvenuto | Contenuto mostrato prima del primo messaggio del visitatore. |
L'anteprima live si aggiorna con queste impostazioni. L'invio di un messaggio nell'anteprima utilizza l'assistente reale e consuma la normale quota di messaggi.
Immagini
Aggiungi un'Immagine di benvenuto opzionale tramite caricamento o URL. Viene visualizzata nella schermata iniziale sopra il messaggio di benvenuto. Usa un logo o un banner ottimizzato e verifica la resa alla larghezza minima del contenitore utilizzata sul tuo sito.
Contenuto & Comportamento
| Impostazione | Cosa modifica |
|---|---|
| Messaggio di benvenuto | Introduzione in formato rich text sopra il campo di inserimento prima del primo messaggio. |
| Mostra le fonti | Aggiunge i riferimenti alle fonti disponibili alle risposte. |
| Etichetta IA sotto le risposte del bot | Contrassegna ogni risposta dell'assistente come generata dall'IA. Questa opzione è sempre attiva. |
| Traduzione automatica | Traduce le etichette dell'interfaccia nella lingua rilevata del visitatore. |
| Caricamento file | Consente ai visitatori di allegare file quando il piano lo permette. |
| Pulsanti suggerimento | Domande iniziali nella schermata iniziale, chiamate anche domande suggerite o spunti di conversazione. Ogni elemento include un titolo visibile e un messaggio inviato all'assistente. Fino a 10 elementi. |
I pulsanti suggerimento possono essere generati come bozza con l'IA o aggiunti manualmente. Mantieni un elenco breve e usa domande che mostrino le reali conoscenze dell'assistente.
Avanzate
| Impostazione | Cosa modifica |
|---|---|
| Fonte di rilevamento della lingua | Utilizza la lingua del browser oppure l'attributo <html lang> della pagina per la traduzione automatica. |
| Nascondi il branding | Rimuove il link "Powered by" quando il piano lo consente. |
| CSS personalizzato | Inserisce codice CSS nel widget integrato utilizzando i selettori stabili documentati. |
L'editor CSS include preset iniziali, un riferimento ai selettori stabili, un conteggio dei caratteri e l'anteprima live. Consulta CSS personalizzato.
Attributi di contesto opzionali
L'elemento inline accetta tracking-consent e context-data oltre a chatbot-id. I dati di contesto possono trasmettere informazioni di sessione non riservate dalla pagina che incorpora il widget:
<web-chat-agent-inline
chatbot-id="YOUR_CHATBOT_ID"
context-data="Customer=Jane Doe;OrderID=A-1023"
></web-chat-agent-inline>
L'IA può utilizzare questi valori nelle risposte e nelle chiamate agli strumenti approvati. Non inserire negli attributi HTML segreti, credenziali o informazioni a cui il visitatore attuale non è autorizzato ad accedere. Consulta Dati di contesto della sessione per formati, limiti e l'evento di runtime.
Fluttuante vs. integrato
| Widget di chat | Chat integrata | |
|---|---|---|
| Posizionamento | Pulsante fluttuante fisso e overlay | All'interno del layout della pagina |
| Elemento | <web-chat-agent> | <web-chat-agent-inline> |
| Script | /widget/web-chat-agent.js | /widget/chat-widget-inline.js |
| Fumetto e trigger proattivi | Sì | No |
| Action Bar e moduli | Sì | No |
| Passaggio alla chat dal vivo | Sì | No |
| Impostazioni | Canali → Widget di chat | Canali → Chat integrata |
Prova prima di pubblicare
- Salva le impostazioni inline.
- Invia una domanda basata sui contenuti nell'anteprima live.
- Apri la pagina reale e controlla altezza, scorrimento, caricamento dei caratteri, fonti e pulsanti suggerimento.
- Esegui un test nel contenitore mobile più piccolo.
- Se entrambi i tipi di widget sono installati, verifica che utilizzino le impostazioni indipendenti previste.