Eventi del Widget

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:

{
  chatbotId: string;
}

Esempio:

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:

{
  chatbotId: string;
}

Esempio:

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:

{
  chatbotId: string;
  message: string;
  sessionId?: string;
}

Esempio:

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:

{
  chatbotId: string;
}

Esempio:

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:

<!DOCTYPE html>
<html>
  <head>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Chat aperta
        window.addEventListener("keplero_chat_aperta", (e) => {
          console.log("✅ Chat aperta:", e.detail);
          // Esempio: Traccia nelle analytics
          // gtag('event', 'chat_aperta', { chatbot_id: e.detail.chatbotId });
        });

        // Chat chiusa
        window.addEventListener("keplero_chat_chiusa", (e) => {
          console.log("❌ Chat chiusa:", e.detail);
          // Esempio: Traccia nelle analytics
          // gtag('event', 'chat_chiusa', { chatbot_id: e.detail.chatbotId });
        });

        // Interazione utente (messaggio inviato)
        window.addEventListener("keplero_chat_interaction", (e) => {
          console.log("💬 Interazione utente:", e.detail);
          // Esempio: Traccia nelle analytics
          // gtag('event', 'chat_messaggio_inviato', {
          //   chatbot_id: e.detail.chatbotId,
          //   session_id: e.detail.sessionId
          // });
        });

        // Chat aperta per 60 secondi
        window.addEventListener("keplero_chat_interaction_60sec", (e) => {
          console.log("⏱️ Chat aperta per 60 secondi:", e.detail);
          // Esempio: Traccia il coinvolgimento
          // gtag('event', 'chat_coinvolgimento_60s', { chatbot_id: e.detail.chatbotId });
        });
      });
    </script>
  </head>
  <body>
    <kepleroai-chat chatbot="your-chatbot-id" side="right"></kepleroai-chat>
  </body>
</html>

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

Dashboard

Integrazioni

Automazioni

Meta & Business Manager

Documentazione Tecnica

FAQ

Panoramica

Eventi disponibili

`keplero_chat_aperta`

`keplero_chat_chiusa`

`keplero_chat_interaction`

`keplero_chat_interaction_60sec`

Esempio di utilizzo completo

Note importanti

​Panoramica

​Eventi disponibili

​keplero_chat_aperta

​keplero_chat_chiusa

​keplero_chat_interaction

​keplero_chat_interaction_60sec

​Esempio di utilizzo completo

​Note importanti

Panoramica

Eventi disponibili

`keplero_chat_aperta`

`keplero_chat_chiusa`

`keplero_chat_interaction`

`keplero_chat_interaction_60sec`

Esempio di utilizzo completo

Note importanti