Installer le widget

Tout type de site

Collez le code juste avant </body>. Remplacez l’identifiant du site par le vôtre, disponible dans Paramètres → Développeurs.

<script src="https://cdn.yuno.chat/widget.js"
  data-site-id="site_8Kq2mXvR" async></script>

Le script est chargé avec async et ne bloque donc jamais votre page. Il est distribué via un CDN et mis en cache par les navigateurs.

WordPress

Utilisez une extension d’en-tête et de pied de page comme WPCode, puis collez le code dans la section du pied de page. Si vous préférez modifier le code, ajoutez ceci au fichier functions.php de votre thème enfant :

add_action('wp_footer', function () {
    echo '<script src="https://cdn.yuno.chat/widget.js" data-site-id="site_8Kq2mXvR" async></script>';
});

Shopify

Dans l’administration, ouvrez Boutique en ligne → Thèmes → Modifier le code, puis layout/theme.liquid et collez le code avant </body>. Pour transmettre l’identité du client connecté, ajoutez un appel à identify :

<script src="https://cdn.yuno.chat/widget.js"
  data-site-id="site_8Kq2mXvR" async></script>
{% if customer %}
<script>
  window.Yuno = window.Yuno || function () { (Yuno.q = Yuno.q || []).push(arguments) };
  Yuno("identify", {
    userId: "{{ customer.id }}",
    email: "{{ customer.email }}",
    name: "{{ customer.name }}"
  });
</script>
{% endif %}

Next.js

Chargez le script une seule fois dans le layout racine avec next/script. Le widget continue de fonctionner lors des navigations côté client.

import Script from "next/script"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        {children}
        <Script
          src="https://cdn.yuno.chat/widget.js"
          data-site-id={process.env.NEXT_PUBLIC_YUNO_SITE_ID}
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

React, Vue et autres applications monopages

Ajoutez le code à votre fichier index.html. Le widget détecte les changements d’URL effectués avec l’API History : le champ page_url des conversations reste ainsi à jour sans code supplémentaire. Pour charger le widget directement depuis votre code :

export function loadYuno(siteId) {
  if (document.getElementById("yuno-widget")) return
  const script = document.createElement("script")
  script.id = "yuno-widget"
  script.src = "https://cdn.yuno.chat/widget.js"
  script.async = true
  script.dataset.siteId = siteId
  document.body.appendChild(script)
}

Créateurs de sites

Webflow

Ouvrez Paramètres du site → Code personnalisé → Code du pied de page, collez le code et publiez.

Wix

Ouvrez Paramètres → Code personnalisé → Ajouter un code personnalisé. Choisissez « Toutes les pages » et « Corps — fin ».

Squarespace

Ouvrez Paramètres → Avancé → Injection de code → Pied de page. Nécessite une formule Business ou supérieure.

Ghost

Ouvrez Paramètres → Injection de code → Pied de page du site.

Framer

Ouvrez Paramètres du site → Général → Code personnalisé → Fin de la balise <body>.

Politique de sécurité du contenu (CSP)

Si votre site envoie un en-tête CSP, autorisez le script ainsi que l’endpoint auquel il transmet les messages. Si vous définissez un avatar, son domaine doit aussi être autorisé dans img-src.

script-src  https://cdn.yuno.chat;
connect-src https://yuno.chat;

Le widget s’affiche dans un Shadow DOM : le CSS de votre site ne peut pas modifier son apparence, et ses styles n’affectent jamais vos pages.

Vérifier le fonctionnement

Ouvrez votre site et exécutez Yuno("version") dans la console du navigateur. Si un numéro de version s’affiche, le widget est chargé. Si la bulle n’apparaît pas, vérifiez l’identifiant du site et la présence du domaine de la page dans Paramètres → Sites → Domaines autorisés.