Embedded 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:
              "https://apps.nlx.ai/c/Xq3kT5uVOCGipRW8kW9pB/BajtUGSLN5hoqiSmgTA7B",
            headers: {
              "nlx-api-key": "VkvGvxQ-iQQ/EgpgyJQxkDL-OhmhVwzV",
            },
            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 16 hours ago