Aller au contenu principal

Intégration Vanilla Js

Généralités​

L'intégration de Retorik Framework dans une page HTML s'effectue en important les données depuis le CDN à l'adresse https://cdn.retorik.ai/retorik-framework/{numéro_ou_tag_de_version}/index.js

Les tags de version permettent de cibler les versions actuelles en :

  • développement (stabilité / compatibilité non garanties) : tag = alpha
  • preview (stabilité / compatibilité non garanties) : tag = preview
  • latest (voir les notes de version) : tag = latest

L'instantiation nécessite aussi un conteneur dans la page pour que l'injection soit possible. Une div normale suffit.

Configuration​

Le lancement de l'application nécessite la présence d'un seul paramètre (addressData).

Exemple simple​

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Exemple Intégration</title>
    </head>
    <body style="margin: 0">
      <!-- Div dans laquelle le bot sera injecté -->
      <div id="botContainer"></div>

      <!-- Récupération des données de Retorik Framework depuis le CDN -->
      <script type="module" src="https://cdn.retorik.ai/retorik-framework/latest/index.js"></script>
      <!-- Script d'instantiation par injection du composant dans la div parent -->
      <script>
        document.addEventListener("DOMContentLoaded", () => {
          const parentElement = document.getElementById("botContainer");
          if (parentElement) {
            // Affichage mode agent plein écran
            window.Retorik?.renderAgent({ addressData: { tenant: "<votre_id_tenant>" }}, parentElement);
            // Affichage mode widget
            window.Retorik.renderWidget({ addressData: { tenant: "<votre_id_tenant>" }}, parentElement);
          }
        })
      </script>
    </body>
  </html>