Il blocco Gen UI (Generative UI) è uno degli strumenti più potenti di SendBot. Ti consente di visualizzare componenti dell’interfaccia personalizzati e interattivi direttamente nella conversazione, andando ben oltre le bolle di testo standard. Questo blocco può essere utilizzato in due modi: Manuale (configurato da te nello Studio) o Generativo (generato dinamicamente da un’IA).

​
Cos’è la Gen UI?

A differenza di una bolla di testo o immagine, Gen UI è un “contenitore” per componenti React. Ciò significa che puoi visualizzare qualsiasi cosa, da un calendario di prenotazione a un complesso grafico finanziario, purché il componente sia registrato nel tuo pacchetto webchat.

​
Come configurare manualmente

Nello Studio, quando aggiungi un blocco Gen UI, troverai due campi principali:
  1. Nome del componente: l’identificatore univoco del componente React da visualizzare (ad esempio, booking-calendar, sales-chart, product-card).
  2. Dati (JSON): un oggetto JSON contenente le informazioni necessarie al funzionamento del componente. Puoi utilizzare le variabili di SendBot qui usando la sintassi {{mia_variabile}}.

​
Esempio di configurazione

  • Nome: product-card
  • Dati:

​
Scenari di utilizzo manuale

L’uso manuale è ideale per le situazioni in cui è necessaria prevedibilità e prestazioni.

​
1. Widget di prenotazione

Se disponi già di un componente calendario, puoi forzarne la visualizzazione dopo che l’utente ha scelto un servizio.
  • Scenario: “Perfetto, ora scegli l’orario migliore nel calendario qui sotto.”
  • Vantaggio: Deterministico e veloce, senza fare affidamento sull’IA per decidere il formato.

​
2. Dashboard e grafici

Se il tuo bot interroga un’API esterna, puoi passare il risultato a un componente grafico.
  • Scenario: Visualizza l’estratto conto dei punti fedeltà dell’utente.
  • Vantaggio: Visualizzazione ricca di dati che sarebbe impossibile con il solo testo.

​
3. Esperienze gamificate

Visualizza ruote della fortuna, gratta e vinci digitali o selettori di avatar.
  • Vantaggio: Aumenta il coinvolgimento dell’utente con un’interfaccia che “vive” all’interno della chat.

​
Scenari di utilizzo con IA (Agent AI)

Se utilizzato insieme al blocco Agent AI, Gen UI diventa veramente “generativo”. L’IA può decidere, in base al contesto della conversazione, quale componente mostrare e quali dati inserire in esso.
  • Esempio: L’utente dice “Sto cercando un tavolo da pranzo in legno”. L’IA comprende l’intento e, invece di limitarsi a elencare i collegamenti, emette un componente product-carousel con i mobili filtrati.

​
Migliori pratiche

  • Validazione JSON: assicurati che il JSON inserito sia valido. L’editor dello Studio ti avviserà in caso di errori di sintassi.
  • Fallback: ricorda che il componente deve essere disponibile nel tuo pacchetto Webchat per essere visualizzato correttamente per l’utente finale.
  • Variabili: usa le variabili per rendere i componenti dinamici in base alle risposte precedenti dell’utente.