Sending Page Context

Touchpoint provides NLX with information about your page structure on page load, after filling forms, and on page refresh. All available forms information and any available href links found on the page are analyzed by NLX and then used to send payloads and smalltalk during user interactions.

When autocontext is enabled, Touchpoint:

  • Gathers and sends the DOM details to NLX and will update NLX on changes

  • Scans for hrefs and creates a list of all link text and their corresponding URLs

Directly Sending Page Context

You shouldn't need to send context for basic bidirectional Voice+ interactions. If you have other page interactions that change the DOM, you should send the context manually after processing those changes.

The analyzePageForms function scans your page for form elements and returns two important objects:

import { analyzePageForms } from "@nlxai/touchpoint-ui";
// Analyze forms on the current page
const { context, formElements } = analyzePageForms();

Best Practices

  • Only turn off automaticContext if you know you need to change the behavior

  • Always store the formElements reference for use in your command handlers

  • Re-analyze and resend context when your page structure changes

  • Use good form accessibility practices such as labeling fields

  • Provide form instructions for better voice recognition

When to Send Context

  1. On page load - Send initial context after touchpoint initialization

  2. On route changes - In SPAs, resend context when navigating to new pages

  3. After dynamic form updates - If forms are added/removed dynamically

  4. After significant DOM changes - When form structure changes

Sending Context Example

import { create, analyzePageForms } from "@nlxai/touchpoint-ui";

const touchpointOptions = {
  config: {
    applicationUrl: "YOUR_APPLICATION_URL",
    headers: {
      "nlx-api-key": "YOUR_API_KEY",
    },
    languageCode: "en-US",
  },
  input: "voiceMini", // Enables voice input with bidirectional support
  bidirectional: {
    automaticContext: false,
  },
};

const touchpoint = await create(touchpointOptions);

const { context, formElements } = analyzePageForms();
// Store formElements for later use when handling commands
window.formElements = formElements; // or use state management

// Array of destinations for navigation commands
const destinations = ["about", "contact", "pricing"];

touchpoint.conversationHandler.sendContext({
  "nlx:vpContext": {
    url: window.location.origin,
    fields: context,
    destinations: destinations,
  },
});

Last updated