SDK

The NXTL browser SDK is a small JavaScript client for web experiences. It initializes NXTL in the browser, keeps signal and conversation state, calls the NXTL API, and powers components like Dreamcatcher.

It does not define your Entries, User Journeys, or Matrices. Those are managed in NXTL Studio , through the API, or by connectors.

Install

npm install nxtl

Or import the browser build from the CDN:

import NXTL from "https://cdn.nxtl.ai/nxtl.es.js";

Initialize NXTL

For direct API access:

import NXTL from "nxtl";
 
const nxtl = new NXTL({
  apiKey: "YOUR_API_KEY",
  projectId: "YOUR_PROJECT_ID",
});
 
window.nxtl = nxtl;

For production websites, prefer a server proxy so your API key is not exposed in client code:

import NXTL from "nxtl";
 
const nxtl = new NXTL({
  proxy: "/api/nxtl",
  projectId: "YOUR_PROJECT_ID",
});
 
window.nxtl = nxtl;

Connector plugins usually set this up for you.

Options

Signals

Signals are runtime context from your app, connector, or user interactions. Dreamcatcher manages conversational signals automatically, but custom integrations can read or update nxtl.signal directly:

nxtl.signal = [
  { role: "user", text: "I am looking for enterprise onboarding" },
];

Signals are sent with conversational calls so NXTL can classify intent, retrieve relevant Entries, and align with the right User Journey and Matrix.

Dreamcatcher

Dreamcatcher expects a global window.nxtl instance. After initializing NXTL, load the widget and render the web component:

<script type="module">
  import NXTL from "https://cdn.nxtl.ai/nxtl.es.js";
  import dreamcatcher from "https://cdn.nxtl.ai/nxtlDreamcatcherWidget.es.js";
 
  window.nxtl = new NXTL({
    proxy: "/api/nxtl",
    projectId: "YOUR_PROJECT_ID",
  });
 
  dreamcatcher();
</script>
 
<nxtl-dreamcatcher></nxtl-dreamcatcher>

API helpers