Custom Form Fill

Touchpoint includes an application-agnostic form-input handler built in to the SDK that sets the values received from NLX during a conversation.

Customizing Form Fill Behavior

To customize the formfill behavior build and specify a custom input handler. NLX will send input commands with field IDs that match the IDs from your formElements object returned from analyzePageForms().

Important Notes:

• The field.id in the command will match the element IDs in your formElements object

  • This is different from the element's own id attribute. It is unique to Voice+.

  • Voice+ generates its own id for reference as the HTML element may not have an id at all or the page might violate the HTML spec and assign the same id to multiple elements.

• Always check if the element exists before trying to update it

Payload from NLX

Key	Value	Description
classification	input	Indicates this is a form fill command
fields	Array of field objects	Each object contains id and value
id	NLX's unique identifier for the form field	Pairs and will be use to match the ID in your formElements. This is different from the element's own 'id' attribute. It is unique to Voice+
value	Value to set for the form field	The value to fill in the form field

Example Payload:

{
  "classification": "input",
  "fields": [
    { "id": "firstName", "value": "John" },
    { "id": "email", "value": "[email protected]" }
  ]
}

Sample Custom Form Handler

function handleFormInput(fields, formElements) {
  fields.forEach((field) => {
    // Use the stored formElements to find the DOM element
    if (formElements[field.id]) {
      const element = formElements[field.id];
      element.value = field.value;
    } else {
      console.warn(`Field with id "${field.id}" not found in formElements`);
    }
  });
}

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: {
    input: handleFormInput,
  }, // Explicitly enable bidirectional mode.
};