Skip to main content

Webcomponent Integration

Generalities​

Since version 3.0.3, integrating Retorik Framework in a HTML page can also be done by using the webcomponents integrated in the package available on the CDN at this address https://cdn.retorik.ai/retorik-framework/version_number_or_tag/index.js

Version tags allow targeting some specific versions :

  • development (stability / compatibility not guarantied) : tag = alpha
  • preview (stability / compatibility not guarantied) : tag = preview
  • latest (see release notes) : tag = latest

Configuration​

The webcomponents allow 3 parameters :

  • tenant : mandatory, this is the id of your tenant
  • prefix : mandatory if your tenant is on the "Preview" channel (prefix = "preview") or "Development" channel (prefix = "dev") in Retorik Studio.
  • props : facultative, used if you want to add configuration options (see the Configurations section in Framework documentation for the available options).

Simple example​

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Integration example</title>
    </head>
    <body style="margin: 0">
      <!-- Retrieve Retorik Framework data from the CDN -->
      <script type="module" src="https://cdn.retorik.ai/retorik-framework/latest/index.js"></script>
      <!-- Use webcomponents with the attributes -->
      <retorik-agent style="display: block; width: 50%; height: 50%" tenant="<your_id_tenant>" prefix="preview" props='{"config": { "fullSize": false }}'></retorik-agent>
      <retorik-widget style="display: block; width: 50%; height: 50%" tenant="<your_id_tenant>" prefix="dev" props='{"config": { "fullSize": false }}'></retorik-widget>
    </body>
  </html>