Skip to main content

Vanilla Js Integration

Generalities​

Integrating Retorik Framework in a HTML page is done by importing data from 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

The instanciation also needs a container in the page. A simple div is enough.

Configuration​

There is only one mandatory parameter (addressData) to launch the application.

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">
      <!-- Div in which the bot will be injected -->
      <div id="botContainer"></div>

      <!-- Retrieve Retorik Framework data from the CDN -->
      <script type="module" src="https://cdn.retorik.ai/retorik-framework/latest/index.js"></script>
      <!-- Instanciation script = injecting the component inside the parent element -->
      <script>
        document.addEventListener("DOMContentLoaded", () => {
          const parentElement = document.getElementById("botContainer");
          if (parentElement) {
            // Full screen agent mode
            window.Retorik?.renderAgent({ addressData: { tenant: "<your_id_tenant>" }}, parentElement);
            // Widget mode
            window.Retorik.renderWidget({ addressData: { tenant: "<your_id_tenant>" }}, parentElement);
          }
        })
      </script>
    </body>
  </html>