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 handlersRe-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
On page load - Send initial context after touchpoint initialization
On route changes - In SPAs, resend context when navigating to new pages
After dynamic form updates - If forms are added/removed dynamically
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