Custom Page Navigation

Touchpoint has default handlers for bidirectional voice+ commands from the user such as "page back", "next page", and basic "navigate to the {} page".

Ensuring Persistence During Navigation

If you are using a framework like React, Vue, or Angular, you should use their respective routing libraries to handle navigation in a custom navigation handler.

Payload from NLX

Key	Example Value	Description
action	page_next, page_previous, page_custom	Type of navigation action
destination	/about home page https://google.com	A URL slug starting with // The URL Text Absolute URL https://

Example Payload:

{
  "classification": "navigation",
  "action": "page_custom",
  "destination": "/about"
}

Sample Custom Navigation Handler

Touchpoint includes an application-agnostic navigation handler built in to the SDK that leverages window based navigation. If you're using a web framework or would like to change routing behavior, you will build your own navigation handler.

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

function handleNavigation(action, destinationText, destinationUrls) {
  switch (action) {
    case "page_next":
      // Navigate to next page
      window.history.forward();
      break;

    case "page_previous":
      // Navigate to previous page
      window.history.back();
      break;

    /**
    * If you are using a framework like React, Vue, or Angular.
    * Use their respective routing libraries to handle navigation.
    * Your Custom Handler should deference the actual URL from the text provided.
    **/
    case "page_custom":
      // If we don't have any text, then we can't process
      if (destinationText === null) {
        break;
      }
      // If the destination is a path, we can go directly there
      if (destination.startsWith("/")){
        window.location.pathname = destination;
        break;
      }
      // Otherwise, let's pull the actual URL based on the text from NLX
      const url = destinationUrls[destinationText];
      if (url != null) {
        window.location.href = url;
        break;
      }
      // finally, parse the URL from the text and navigate if full URL
      try {
        //Parse the URL from the destination
        new URL(destinationText);
        window.location.href = destinationText;
      } catch (error) {
        console.log(
          `Custom page navigation action received, but no URL found for destination".`,
          destinationText,
        );
      }
      break;

    /**
    * Handle the unknown edge case
    */
    case "page_unknown":
      console.log(
        "Unknown page navigation action received, no automatic handling available.",
      );
  }
}

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: {
    navigation: handleNavigation,
  },
};