Widget Builder
Il Widget Builder genera componenti HTML autonomi — moduli di contatto, moduli di feedback, tabelle prezzi — che appaiono direttamente nella finestra di chat quando l'IA li attiva o il visitatore li apre dal menu del widget.
Un widget del costruttore raccoglie dati (salvati nella scheda Invii). Non chiama corrieri o cataloghi prodotti — questo lo fanno le Integrazioni, che restituiscono risultati come testo in chat o un carosello di prodotti.
Apri il costruttore
Vai alla scheda Capacità e passa alla sotto-scheda AI-Costruttore (raggiungibile anche dal collegamento rapido AI-Costruttore nella barra laterale). Clicca su Nuovo widget.
Modelli rapidi
In alto sono disponibili due modelli di partenza:
| Modello | Cosa genera |
|---|---|
| Modulo di contatto | Campi nome, email, messaggio e un pulsante Invia |
| Tabella prezzi | Una visualizzazione prezzi a tre livelli con interruttore mensile/annuale |
Clicca su un modello per generarlo subito, oppure ignorali e descrivi il tuo qui sotto.
Prompt personalizzato
Inserisci una descrizione del widget desiderato nel campo. Sii specifico quanto vuoi:
Un modulo di feedback con valutazione da 1 a 5 stelle, un campo commento e
un pulsante «Invia feedback». Stile con sfondo scuro e accenti arancioni.
L'IA genera il widget e mostra un'anteprima dal vivo all'interno di un mockup di chat, così vedi esattamente come apparirà a un visitatore.
Iterare e affinare
Dopo la generazione, sotto l'anteprima appare il campo «Chiedi una modifica…». Descrivi cosa vuoi di diverso:
Arrotonda i pulsanti e aumenta la dimensione del carattere dei prezzi.
Aggiungi una nota sotto la tabella prezzi: «Tutti i prezzi IVA esclusa».
Ogni iterazione è una nuova generazione dell'IA e aggiorna l'anteprima.
Salva il widget
Quando tutto va bene, inserisci:
- Nome del widget — etichetta interna (es. «Tabella prezzi – principale»).
- Condizione di attivazione — la condizione in linguaggio naturale di quando l'IA mostra questo widget.
- Mostra nel menu del widget — opzionalmente elencalo anche nel menu di avvio ＋, così i visitatori possono aprirlo su richiesta (indipendentemente dall'attivazione dell'IA).
Mostra la tabella prezzi quando il visitatore chiede dei piani, dei prezzi o di cosa è incluso.
Un widget può essere attivato dall'IA, nel menu, entrambi o nessuno — ma per essere mostrato deve essere attivo. Clicca su Salva; il widget appare nella panoramica delle Capacità come una scheda con miniatura di anteprima.
Gestire i widget
Dalla panoramica delle Capacità puoi:
- Attivare/disattivare un widget.
- Modificare — riapre il costruttore con l'HTML esistente per affinarlo.
- Eliminare — rimuove definitivamente il widget.
Come appaiono i widget in chat
Quando l'IA rileva una corrispondenza con la condizione (o il visitatore apre il widget dal menu ＋), viene reso come un messaggio del bot. Il widget viene eseguito in un <iframe> isolato, quindi non può influire sulla tua pagina, e adatta le dimensioni al contenuto.
Se il widget ha un modulo, il visitatore lo invia dalla chat. Dopo l'invio, il modulo viene sostituito da una conferma neutra «Inviato», e i dati vengono salvati nella tua scheda Invii.
Consigli
- Mantieni i widget focalizzati su una singola azione — una tabella prezzi che ha anche un modulo di contatto e un carosello di prodotti è dispersiva.
- Rendi le condizioni di attivazione specifiche per evitare che il widget appaia in conversazioni non pertinenti.
- I widget generati usano solo CSS inline e JavaScript puro — nessuna libreria esterna o richiesta di rete.
- L'endpoint di rendering forza la larghezza piena del widget, così si adatta alla dimensione impostata. Se un layout appare ancora sbagliato, chiedi: «Imposta il contenitore a width:100% così riempie lo spazio».