> ## Documentation Index
> Fetch the complete documentation index at: https://docs.keplero.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Eventi del Widget
> Eventi del Widget di Keplero AI
## Panoramica
Il widget chatbot di Keplero emette eventi personalizzati che puoi ascoltare nella tua applicazione. Questi eventi ti permettono di tracciare le interazioni degli utenti con la chat e implementare analitiche personalizzate o comportamenti specifici.
## Eventi disponibili
### `keplero_chat_aperta`
Emesso quando il widget della chat viene aperto.
**Dettagli dell'evento**:
```ts theme={null}
{
chatbotId: string;
}
```
**Esempio**:
```js theme={null}
window.addEventListener("keplero_chat_aperta", (event) => {
console.log("Chat aperta per il chatbot:", event.detail.chatbotId);
// La tua logica personalizzata qui
});
```
### `keplero_chat_chiusa`
Emesso quando il widget della chat viene chiuso.
**Dettagli dell'evento**:
```ts theme={null}
{
chatbotId: string;
}
```
**Esempio**:
```js theme={null}
window.addEventListener("keplero_chat_chiusa", (event) => {
console.log("Chat chiusa per il chatbot:", event.detail.chatbotId);
// La tua logica personalizzata qui
});
```
### `keplero_chat_interaction`
Emesso quando l'utente invia un messaggio nella chat.
**Dettagli dell'evento**:
```ts theme={null}
{
chatbotId: string;
message: string;
sessionId?: string;
}
```
**Esempio**:
```js theme={null}
window.addEventListener("keplero_chat_interaction", (event) => {
console.log("L'utente ha inviato il messaggio:", event.detail.message);
console.log("ID della sessione:", event.detail.sessionId);
// La tua logica personalizzata qui (es. tracking analytics)
});
```
### `keplero_chat_interaction_60sec`
Emesso quando la chat è rimasta aperta per più di 60 secondi.
**Dettagli dell'evento**:
```ts theme={null}
{
chatbotId: string;
}
```
**Esempio**:
```js theme={null}
window.addEventListener("keplero_chat_interaction_60sec", (event) => {
console.log("La chat è stata aperta per 60 secondi");
// La tua logica personalizzata qui (es. tracking del coinvolgimento)
});
```
### Esempio di utilizzo completo
Ecco un esempio completo di come ascoltare tutti gli eventi della chat Keplero:
```html theme={null}
```
### Note importanti
* Tutti gli eventi sono oggetti `CustomEvent` emessi sull'oggetto `window`
* Gli eventi funzionano sia in modalità fullsize che popover
* L'evento `keplero_chat_interaction_60sec` viene emesso una sola volta per sessione di chat
* In modalità fullsize, l'evento `keplero_chat_aperta` viene emesso quando il componente viene montato
* In modalità popover, gli eventi `keplero_chat_aperta` e `keplero_chat_chiusa` vengono emessi quando il popover si apre/chiude