Sito aziendale: il cliente clicca sul widget chat in basso a destra, scrive "quanti articoli avete in stock di X?", il bot risponde in 2 secondi. Senza che nessun operatore umano intervenga. Risposta basata sui dati aziendali real-time. Vediamo come integrare l'AI di ReportIA come backend di un chatbot frontend custom.
Cosa serve
- Frontend chatbot (widget JavaScript sul sito).
- Backend ReportIA con API attiva.
- API token per autenticazione.
Il frontend manda domanda → backend interroga DB via AI → risposta.
Architettura
[Sito web] │ │ Widget chat │ ▼ [Frontend JavaScript] │ │ fetch() POST con domanda │ ▼ [ReportIA API] │ │ AI genera SQL │ ▼ [Database aziendale] │ │ Risultato │ ▲ Risposta JSON [ReportIA API] │ ▲ [Frontend mostra risposta]
Implementazione tecnica
Step 1: genera API token
Pannello admin ReportIA → API → Genera token:
- Nome: "Chatbot sito".
- Scadenza: 1 anno.
- Rate limit: 100 req/min.
- CORS: solo dominio sito (es. www.azienda.it).
Token mostrato una volta, copialo.
Step 2: implementa widget chatbot
Codice HTML/JS minimale:
<div id="chatbot">
<input id="domanda" placeholder="Fai una domanda...">
<button onclick="invia()">Invia</button>
<div id="risposta"></div>
</div>
<script>
async function invia() {
const domanda = document.getElementById('domanda').value;
const r = await fetch('https://reportia.azienda.it/api/avatar/ask', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_TOKEN'
},
body: JSON.stringify({ domanda })
});
const data = await r.json();
document.getElementById('risposta').textContent = data.risposta_testo;
}
</script>
Step 3: stile UI
CSS per widget moderno:
- Posizione fissa bottom-right.
- Colori brand.
- Animazioni di apertura/chiusura.
- Tipografia leggibile.
Funzionalità avanzate
Memoria conversazionale
Mantieni contesto sessione utente:
{
"domanda": "...",
"context_id": "session-abc123"
}
Stesso context_id → AI ricorda conversazione precedente.
Suggerimenti
Bottoni con domande tipiche per facilitare:
- "Articoli in stock"
- "Stato ordine"
- "Prezzi aggiornati"
Visualizzazione dati
Se la risposta include tabelle/grafici, formattali bene:
if (data.dati && data.dati.length > 0) {
// Mostra come tabella
renderTabella(data.dati);
}
Gestione errori
- Connessione persa: "Riconnessione in corso...".
- Domanda non capita: "Riprova diversamente".
- Errore server: "Problema tecnico, riprova più tardi".
Casi d'uso pratici
E-commerce
Cliente sul sito:
- "Quanti articoli avete in stock di X?"
- "Quando arriva l'ordine 12345?"
- "Qual è il prezzo aggiornato di Y?"
Bot risponde in tempo reale dal magazzino + ordini DB.
B2B con clienti aziendali
Cliente B2B chiede:
- "Quanti articoli ho ordinato questo mese?"
- "Qual è il mio fatturato YTD con voi?"
- "Quando scade la mia offerta?"
Bot autenticato per cliente, risposte personalizzate.
FAQ intelligenti
Sito con FAQ tradizionali. Bot AI risponde a domande non standard usando dati reali.
Customer service first-line
Bot risolve 60-70% delle domande. Casi complessi escalation a operatore umano.
Sicurezza
CORS strict
API accetta solo richieste da dominio sito autorizzato. Bloccchi tentativi da altri siti.
Rate limiting
Max 100 req/min per IP. Previene abusi.
Filtraggio domande
Permessi sul backend: il bot pubblico può accedere solo a tabelle "public" (catalogo, articoli). NON a dati sensibili (clienti, vendite interne).
IP logging
Ogni richiesta loggata con IP. Monitoring anomalie.
Performance
Cache aggressiva
Domande pubbliche ricorrenti: cache 1-6 ore. Riduce costi API OpenAI.
Risposta veloce
Target: < 3 secondi per risposta. Cache hit < 500ms.
Streaming opzionale
Per risposte lunghe, streaming token-by-token. UX migliore.
Costi
| Voce | Costo mensile tipico |
|---|---|
| Licenza ReportIA con API | 100-500 € |
| API OpenAI (con cache) | 10-50 € |
| Sviluppo widget custom | 2.000-8.000 € (una tantum) |
| Hosting sito (esistente) | incluso |
| Costo annuale | 1.500-7.000 € |
Confronta con sviluppo bot AI da zero: 30k-100k €.
I moduli ReportIA correlati
Scopri ReportIA per chatbot sito.
