Événements du SDK Web headless

Le SDK Web headless fournit des événements que vous pouvez écouter pour gérer des actions ou des mises à jour spécifiques dans votre application.

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

client.on("ready", handleReady)

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

Événements généraux

Voici les événements généraux du SDK :

ready

Émis lorsque le client est prêt à communiquer.

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

authenticated

Émis lorsque le client s'est authentifié avec le jeton de l'utilisateur.

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

Tous les événements disponibles

Le SDK fournit différents événements que vous pouvez écouter pour gérer des actions ou des mises à jour spécifiques dans votre application.

Vous pouvez ajouter et supprimer des écouteurs d'événements à l'aide des méthodes .on et .off.

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

Voici la liste complète de tous les événements disponibles :

Événements mondiaux

Nom de l'événement Description
ready Émis lorsque le client est prêt à communiquer

Événements obsolètes

Le SDK continue d'émettre les événements suivants pour assurer la rétrocompatibilité. Ne les utilisez pas dans de nouvelles intégrations.

Nom de l'événement Description Conseils
authenticated Émis lorsque le client s'est authentifié avec le jeton de l'utilisateur Obsolète et sera supprimé. Les intégrations existantes peuvent continuer à le recevoir jusqu'à sa suppression.
chat.connected Émis lorsque le chat est connecté au fournisseur. Obsolète. Utilisez chat.connectedMessages, qui fournit également la charge utile des messages initiaux.

Événements Chat

Nom de l'événement Description
chat.ongoing Émis lorsqu'un chat est en cours.
chat.updated Émis lorsque l'instance de chat a été mise à jour.
chat.message Émis lorsqu'un nouveau message est disponible.
chat.memberJoined Émis lorsqu'un nouveau membre rejoint la conversation.
chat.memberLeft Émis lorsqu'un membre a quitté la conversation.
chat.typingStarted Émis lorsqu'un membre commence à saisir du texte.
chat.typingEnded Émis lorsqu'un membre a fini de saisir du texte.
chat.connectedMessages Émis lorsque le SDK est connecté à une conversation avec le fournisseur.
chat.disconnected Émis lorsque le chat est déconnecté du fournisseur.
chat.dismissed Émis lorsque l'état du chat passe à dismissed.
chat.timeout Émis lorsque le chat est terminé en raison d'un "délai avant expiration".
chat.ended Émis lorsque le chat est terminé.
chat.destroyed Émis lorsque destroyChat est appelé.
chat.checkInRequested Émis lorsque le chat peut être enregistré.
chat.checkInTimedOut Émis lorsque le délai d'enregistrement du chat a expiré

Événements de co-navigation

Nom de l'événement Description
cobrowse.request Émis lorsque l'utilisateur final ou l'agent demande une navigation partagée
cobrowse.loaded Émis lorsque la session de co-navigation est chargée
cobrowse.updated Émis lorsque la session de co-navigation est mise à jour
cobrowse.ended Émis à la fin de la session de co-navigation

Exemples d'utilisation

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)
})

Configuration personnalisée des données

L'option custom_data vous permet de transmettre des données de paires clé/valeur arbitraires au SDK Web.

Utilisation

Vous pouvez fournir des données personnalisées sous la forme d'un objet (non signé) ou d'une chaîne (signée) lors de la création d'un 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>;
  };
}

Exemple

Consultez l'exemple ci-dessous :

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
}

Transfert vers un chatbot externe

Dans certains cas, vous pouvez souhaiter conserver l'historique et les interactions d'autres fournisseurs de chat. Pour ce faire, utilisez custom_data object.

Consultez l'exemple ci-dessous :

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
}