search

arrows-from-lineEmbedded mode

Use Touchpoint inside your layout

Normally Touchpoint shows up as a launch icon in the bottom right corner of your webpage and then as floating UI on top of your existing content (in text and voice mode covering up a substantial portion of your UI).

However, this may not be suitable for every app: sometimes you may want to control both the layout as well as the exact way the application is opened. Embedded mode is designed to solve this problem.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Touchpoint</title>
  </head>

  <body
    style="
      background-image: url(https://platform.nlx.ai/onboarding-bg/voiceplus.webp);
      background-size: cover;
      color: white;
    "
  >
    <div style="width: 40vw; height: 80vh; margin: auto; padding-top: 10vh">
      <nlx-touchpoint
        id="touchpoint"
        style="display: block; height: 100%"
      ></nlx-touchpoint>
    </div>
    <script type="module">
      import "https://unpkg.com/@nlxai/touchpoint-ui/lib/index.js?module";

      document.addEventListener("DOMContentLoaded", () => {
        touchpoint.touchpointConfiguration = {
          config: {
          applicationUrl: "REPLACE_WITH_APPLICATION_URL",
          headers: {
            "nlx-api-key": "REPLACE_WITH_API_KEY"
            },
            languageCode: "en-US",
          },
        };
      });
    </script>
  </body>
</html>

This will result in the following:

As you can see, we have complete control via HTML on where and when the touchpoint UI will be rendered.

Last updated