Aller au contenu principal

Intégration Webcomponent

Généralités​

Depuis la version 3.0.3, l'intégration de Retorik Framework dans une page HTML peut aussi s'effectue en utilisant le webcomponent intégré dans le paquet disponible 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

Configuration​

L'utilisation du webcomponent comporte 3 paramètres :

  • tenant : paramètre obligatoire, représentant l'identifiant de votre tenant
  • prefix : paramètre obligatoire si votre tenant est sur la canal "Preview" (prefix = "preview") ou "Développement" (prefix = "dev") dans Retorik Studio.
  • props : paramètre facultatif, utilisé si vous voulez ajouter des options de configuration parmi celles disponibles dans la section Configurations de la documentation Framework.

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">
      <!-- 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>
      <!-- Intégrer Retorik Framework avec les attributs -->
      <retorik-agent style="display: block; width: 50%; height: 50%" tenant="<votre_id_tenant>" prefix="preview" props='{"config": { "fullSize": false }}'></retorik-agent>
      <retorik-widget style="display: block; width: 50%; height: 50%" tenant="<votre_id_tenant>" prefix="dev" props='{"config": { "fullSize": false }}'></retorik-widget>
    </body>
  </html>