Examples

A comprehensive example implementing voice-driven form filling, navigation:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Enhanced Voice+ Example</title>
    <style>
      @keyframes highlight {
        0% {
          background-color: #ffeb3b;
        }
        100% {
          background-color: transparent;
        }
      }
    </style>
  </head>
  <body>
    <h1>Enhanced Voice+ Demo</h1>

    <form id="contact-form">
      <input
        type="text"
        id="firstName"
        name="firstName"
        placeholder="First Name"
      />
      <input
        type="text"
        id="lastName"
        name="lastName"
        placeholder="Last Name"
      />
      <input type="email" id="email" name="email" placeholder="Email" />
      <input type="tel" id="phone" name="phone" placeholder="Phone" />
      <textarea id="message" name="message" placeholder="Message"></textarea>
      <button type="submit">Submit</button>
    </form>

    <script type="module">
      import {
        create,
        React,
        html,
        analyzePageForms,
      } from "https://unpkg.com/@nlxai/[email protected]/lib/index.js?module";

      async function initializeVoicePlus() {
        // Create touchpoint with voiceMini and bidirectional enabled
        const touchpoint = await create({
          config: {
            applicationUrl: "YOUR_APPLICATION_URL",
            headers: {
              "nlx-api-key": "YOUR_API_KEY",
            },
            languageCode: "en-US",
          },
          input: "voiceMini",
          bidirectional: {
            navigation: handleNavigation,
            input: handleFormInput,
            custom: handleCustom,
          },
        });

        return touchpoint;
      }

      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 (destinationText.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.",
            );
        }
      }

      // Handle form input commands with new structure
      function handleFormInput(fields, formElements) {
        console.log("Form input fields received:", fields);
        fields.forEach((field) => {
          if (formElements[field.id]) {
            const element = formElements[field.id];
            element.value = field.value;
            element.classList.add("voice-updated");

            // Trigger events for frameworks that listen to them
            element.dispatchEvent(new Event("input", { bubbles: true }));
            element.dispatchEvent(new Event("change", { bubbles: true }));

            setTimeout(() => {
              element.classList.remove("voice-updated");
            }, 2000);
          }
        });
      }

      // Handle custom commands
      function handleCustom(action, payload) {
        console.log("Custom command:", action, payload);

        // Example: Handle custom search command
        if (action === "search") {
          // Implement search functionality
          console.log("Searching for:", payload.query);
        }
      }
      // Initialize when page loads
      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", initializeVoicePlus);
      } else {
        initializeVoicePlus();
      }
    </script>
  </body>
</html>

Last updated