Eventi dell'SDK web headless

L'SDK web headless fornisce eventi che puoi ascoltare per gestire azioni o aggiornamenti specifici all'interno della tua applicazione.

const handleReady = () => {
  console.log("**** client is ready")
}

client.on("ready", handleReady)

// client.off("ready", handleReady)

Eventi generali

Di seguito sono riportati gli eventi generali per l'SDK

ready

Viene emesso quando il client è pronto per la comunicazione.

client.on("ready", () => {
})

authenticated

Viene emesso quando il client ha eseguito l'autenticazione con il token dell'utente.

client.on("authenticated", () => {
})

Tutti gli eventi disponibili

L'SDK fornisce vari eventi che puoi ascoltare per gestire azioni o aggiornamenti specifici all'interno della tua applicazione.

Puoi aggiungere e rimuovere i listener di eventi utilizzando i metodi .on e .off.

const handleReady = () => {
  console.log(" client is ready")
}
client.on("ready", handleReady)
// client.off("ready", handleReady)

Ecco un elenco completo di tutti gli eventi disponibili:

Eventi globali

Nome evento Descrizione
ready Emesso quando il client è pronto per la comunicazione

Eventi deprecati

L'SDK continua a emettere i seguenti eventi per la compatibilità con le versioni precedenti. Non utilizzarli in nuove integrazioni.

Nome evento Descrizione Consulenza
authenticated Emesso quando il client ha eseguito l'autenticazione con il token dell'utente Deprecato e programmato per la rimozione. Le integrazioni esistenti possono continuare a riceverlo fino alla rimozione.
chat.connected Viene attivato quando la chat è connessa al provider. Deprecato. Utilizza chat.connectedMessages, che fornisce anche il payload dei messaggi iniziali.

Eventi di Chat

Nome evento Descrizione
chat.ongoing Viene emesso quando è in corso una chat.
chat.updated Viene emesso quando l'istanza della chat viene aggiornata.
chat.message Viene emesso quando è presente un nuovo messaggio.
chat.memberJoined Emesso quando un nuovo membro si unisce alla conversazione.
chat.memberLeft Viene attivato quando un membro abbandona la conversazione.
chat.typingStarted Generato quando un membro inizia a digitare.
chat.typingEnded Inviato quando un membro ha terminato di digitare.
chat.connectedMessages Viene attivato quando l'SDK è connesso a una conversazione con il provider.
chat.disconnected Viene attivato quando la chat viene disconnessa dal provider.
chat.dismissed Viene attivato quando lo stato della chat viene modificato in dismissed.
chat.timeout Viene attivato quando la chat viene terminata per "timeout".
chat.ended Viene attivato quando la chat viene terminata.
chat.destroyed Viene emesso quando viene chiamato destroyChat.
chat.checkInRequested Emesso quando è possibile eseguire il check-in della chat.
chat.checkInTimedOut Viene attivato quando il check-in della chat è scaduto

Eventi di co-browsing

Nome evento Descrizione
cobrowse.request Viene emesso quando l'utente finale o l'agente richiede la navigazione condivisa
cobrowse.loaded Attivato quando viene caricata la sessione di co-browsing
cobrowse.updated Attivato quando la sessione di navigazione condivisa viene aggiornata
cobrowse.ended Attivato al termine della sessione di navigazione condivisa

Esempi di utilizzo

client.on("ready", () => {
  // Client is ready
})
client.on("chat.message", message => {
  console.log(message)
})
client.on("chat.connectedMessages", async ({ chat, messages }) => {
  // Handle chat and messages
})
client.on("cobrowse.request", ({ from }) => {
  console.log("Cobrowse requested by", from)
})

Configurazione dei dati personalizzati

L'opzione custom_data ti consente di trasmettere dati di coppie chiave-valore arbitrari all'SDK web.

Utilizzo

Puoi fornire dati personalizzati come oggetto (non firmato) o stringa (firmata) durante la creazione di una chat:

interface ChatRequest {
  lang?: string;
  trigger_id?: string;
  ticket_id?: string;
  email?: string;
  greeting?: string;
  cobrowsable?: boolean;
  custom_data?: {
    signed?: string;
    unsigned?: Record<string, any>;
  };
}

Esempio

Vedi l'esempio che segue:

const custom_data = {
  unsigned: {
    version: {
      label: 'Version',
      value: '1.0.0'
    }
  },
  signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}

try {
  const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
  // handle error
}

Trasferimento del chatbot esterno

In alcuni casi potresti voler conservare la cronologia e le interazioni di altri fornitori di chat. Puoi farlo utilizzando custom_data object.

Vedi l'esempio che segue:

cconst custom_data = {
  unsigned: {
    external_chat_transfer: {
      greeting_override: "Please hold while we connect you with a human agent.",
      agent: {
        name: "Agent Name",
        avatar: "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
      },
      transcript: [
        {
          sender: "agent",
          timestamp: "2021-03-15 12:00:00Z",
          content: [
            {
              type: "text",
              text: "Hello! How can I help you today?"
            },
            {
              type: "buttons",
              buttons: [
                {
                  label: "Create New Order",
                  selected: false
                },
                {
                  label: "Check Order Status",
                  selected: true
                },
                {
                  label: "Check Account Balance",
                  selected: false
                },
              ]
            }
          ]
        },
        {
          sender: "end_user",
          timestamp: "2021-03-15 12:00:15Z",
          content: [
            {
              type: "text",
              text: "Check Order Status"
            }
          ]
        },
        {
          sender: "agent",
          timestamp: "2021-03-15 12:00:16Z",
          content: [
            {
              type: "text",
              text: "I can help you with that, what's your order number?"
            }
          ]
        },
        {
          sender: "end_user",
          timestamp: "2021-03-15 12:00:20Z",
          content: [
            {
              type: "media",
              media: {
                type: "image",
                url: "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
              }
            }
          ]
        }
      ]
    }
  },
  signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}

try {
  const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
  // handle error
}