Codice del widget chat IA: aggiungi un assistente di supporto a qualsiasi sito
Copia un solo tag script e metti sul tuo sito un assistente chat IA con risposte in streaming. Questa guida spiega il codice, le opzioni e i controlli da fare prima di andare online.
Pubblicato:
Un widget chat IA risponde ai tuoi visitatori sulla pagina che stanno già leggendo. Con api14 l'intera integrazione è un solo tag script: progetti il widget nella dashboard, copi il codice e lo incolli nel tuo HTML. Non c'è nessun SDK da installare e nessun codice server da scrivere.
Cosa fa il widget chat
Il widget chat è una piccola finestra di conversazione che trasmette in streaming le risposte del modello che hai scelto. Segue istruzioni private che scrivi tu e che i visitatori non vedono mai, quindi può fare da agente di supporto, da assistente alle vendite o da guida alla tua documentazione. Le risposte supportano una formattazione di base (paragrafi, elenchi, grassetto, codice e link), il pulsante Interrompi ferma una risposta lunga e la conversazione resta attiva mentre il visitatore passa da una pagina all'altra nella stessa scheda.
Il codice del widget
Dopo aver salvato un widget in Widget, l'editor mostra il suo codice di incorporamento:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
Inserisci il tag dentro <body>, nel punto in cui deve comparire la chat. Due attributi facoltativi cambiano dove e come viene visualizzato:
| Attributo | A cosa serve |
|---|---|
data-target | Selettore CSS dell'elemento in cui visualizzarlo, per esempio #support. |
data-height | Altezza di un widget nella pagina, per esempio 520px. Per la chat il valore predefinito è 480px. |
Se preferisci un pulsante di apertura nell'angolo dello schermo, scegli la posizione Pulsante flottante nell'editor. Il codice resta lo stesso.
Quattro passi per un assistente chat online
- Scegli un modello. Va bene qualsiasi modello chat del catalogo. Il selettore mostra il prezzo di ogni modello, così puoi partire con un modello veloce ed economico e cambiarlo in seguito senza toccare il sito.
- Scegli una chiave API. Ogni widget funziona con una delle tue chiavi API. Seleziona una chiave esistente oppure usa l'ultima opzione dell'elenco, Crea nuova chiave API, per crearne una solo per questo widget. I limiti della chiave valgono per il widget, e la chiave non arriva mai al browser.
- Scrivi le istruzioni e i testi. Imposta il titolo, il messaggio di benvenuto, il testo segnaposto e il testo del pulsante. Aggiungi istruzioni private che descrivono il tuo prodotto e il tono che desideri.
- Autorizza i tuoi domini. In Impostazioni, Siti del widget elenca i siti su cui il widget può funzionare. Le richieste da qualsiasi altro sito vengono rifiutate.
Perché non rompe la tua pagina
Il widget viene visualizzato in uno Shadow DOM isolato. Il tuo CSS non entra nella finestra della chat e il widget non cambia lo stile della tua pagina. Si carica in modo asincrono, quindi non blocca la visualizzazione del resto dei contenuti.
Prima di andare online
- Apri l'anteprima nell'editor e fai le domande che i tuoi clienti fanno davvero. L'anteprima invia richieste reali con le impostazioni non ancora salvate.
- Imposta un limite di spesa giornaliero per il widget, così una giornata intensa non ti riserva sorprese.
- Verifica che il saldo copra il traffico previsto. Le richieste dei visitatori sono addebitate sul tuo saldo in USD al prezzo normale del modello.
Vuoi provarlo? Progetta un widget chat senza account nella pagina dei widget, poi leggi il riferimento completo nella documentazione dei widget.