API JavaScript

Contrôlez le widget depuis votre propre code avec la fonction globale Yuno().

Fonctionnement

Chaque appel prend la forme Yuno("command", ...args). Les appels effectués avant le chargement du script sont mis en attente puis exécutés dans l’ordre dès qu’il est prêt. Vous n’avez donc pas besoin d’attendre un événement de chargement. Ajoutez cette fonction d’attente une seule fois, avant tout appel :

javascript

window.Yuno = window.Yuno || function () { (Yuno.q = Yuno.q || []).push(arguments) }

En TypeScript, déclarez la fonction globale une seule fois : declare function Yuno(command: string, ...args: unknown[]): unknown.

Commandes

open, close, toggle

Affichent ou masquent la fenêtre de chat, même si la bulle est masquée avec launcher: false.

javascript

document.querySelector("#help").addEventListener("click", () => Yuno("open"))

Yuno("close")
Yuno("toggle")

identify

Indique à Yuno Chat qui est le visiteur. Les conversations et les tickets sont rattachés au contact correspondant, et votre équipe voit son nom et ses attributs. Appelez cette commande après la connexion ou à chaque chargement de page pour les utilisateurs connectés.

javascript

Yuno("identify", {
  userId: "usr_2041",          // votre identifiant, enregistré dans external_id
  email: "[email protected]",
  name: "Marta Kowalski",
  attributes: { plan: "wholesale", orders: 7 },
  userHash: "c5f1…",           // voir Vérification d’identité
})

Sans userHash valide, n’importe qui peut usurper l’identité d’un utilisateur depuis la console du navigateur. Activez la vérification d’identité avant de vous fier aux données d’un utilisateur identifié.

logout

Efface l’identité de l’utilisateur et démarre une nouvelle session anonyme. Appelez cette commande lors de la déconnexion.

javascript

Yuno("logout")

startTicket

Ouvre directement le formulaire de ticket dans le widget, avec des champs préremplis si vous le souhaitez.

javascript

Yuno("startTicket", {
  subject: "Problème avec la commande n° 1187",
  description: "",
  metadata: { order_id: "1187" },
})

sendMessage

Ouvre le widget et envoie un message au nom du visiteur, comme s’il l’avait saisi.

javascript

Yuno("sendMessage", "Avez-vous cet article en taille M ?")

update

Modifie les options de configuration pendant l’exécution.

javascript

Yuno("update", { locale: "fr", offset: { x: 24, y: 120 } })

on, off

Permettent de s’abonner aux événements du widget. on renvoie une fonction de désabonnement.

javascript

const stop = Yuno("on", "ticket:created", (ticket) => {
  console.log("Ticket", ticket.number)
})

// plus tard
stop()

shutdown

Retire complètement le widget de la page. Rechargez-le avec Yuno("boot", options).

Événements

Événement	Données transmises	Déclenchement
`ready`	—	Le widget a terminé son chargement.
`open`	—	La fenêtre de chat s’ouvre.
`close`	—	La fenêtre de chat se ferme.
`message:sent`	{ id, body }	Le visiteur envoie un message.
`message:received`	{ id, body, author }	Une réponse de l’assistant ou de votre équipe arrive.
`handoff`	{ conversationId }	Le visiteur demande à parler à quelqu’un.
`ticket:created`	{ id, number, subject }	Le visiteur crée un ticket.
`unread`	{ count }	Le nombre de réponses non lues change.

Exemple : un bouton d’ouverture personnalisé

Masquez la bulle par défaut et utilisez votre propre bouton avec un compteur de réponses non lues.

html

<button id="support">Assistance <span id="unread" hidden></span></button>

<script>
  window.YunoSettings = { siteId: "site_8Kq2mXvR", launcher: false }
  window.Yuno = window.Yuno || function () { (Yuno.q = Yuno.q || []).push(arguments) }

  document.getElementById("support").onclick = () => Yuno("toggle")

  Yuno("on", "unread", ({ count }) => {
    const badge = document.getElementById("unread")
    badge.hidden = count === 0
    badge.textContent = count
  })
</script>
<script src="https://cdn.yuno.chat/widget.js" async></script>