How to Add a Voice Form to Your Website

Summary

This tutorial demonstrates how to integrate Alan AI’s voice assistant into a React app, turning a basic hotel booking form into an interactive voice-enabled experience. Users can fill out fields such as location, check-in/check-out dates, and apartment types using voice commands. The video walks through setting up a React app, configuring Alan AI’s SDK, defining voice commands, and managing form data using `react-hook-form`. With a focus on seamless voice interaction, the tutorial covers form validation, page state management, and voice-based form submission, offering a fully functional voice form experience in a React environment.

Takeaways

• 😀 Easily turn your web forms into voice-enabled forms using Alan AI in a React app.
• 😀 Install necessary dependencies like `react-router-dom` and `react-hook-form` to set up your React app.
• 😀 Create a simple hotel search form with multiple input fields such as location, check-in date, and checkout date.
• 😀 Integrate Alan AI by installing the Alan Web SDK and setting up a voice assistant button in your app.
• 😀 Use Alan AI's voice commands to fill in form fields, such as capturing location and dates through voice.
• 😀 Leverage `react-hook-form` to manage form validation and submission while incorporating voice interaction.
• 😀 Create specific voice intents (e.g., 'I am going to *' for location) and map them to form fields for voice input.
• 😀 Implement a voice command for form submission that checks the data and provides feedback to the user.
• 😀 Use React’s `useLocation` and `visualState` to manage page navigation and filter voice intents based on the active page.
• 😀 Personalize user experience by adding a greeting message when the voice assistant is connected and guiding users through the form.
• 😀 Improve user interaction by ensuring voice commands only work on the relevant form page, preventing accidental activation.

Q & A

What is the main purpose of integrating Alan AI with a React app?

The main purpose is to add voice functionality to web forms, allowing users to fill out forms and navigate the app using voice commands, making the user experience more accessible and efficient.

What are the initial steps to set up the React app for this integration?

The initial steps include creating a React app using `create-react-app`, installing necessary dependencies like `react-router-dom`, `react-hook-form`, and `alan-sdk`, and setting up basic routing in `index.js` to structure the app.

How does the `react-hook-form` library assist in handling form inputs?

The `react-hook-form` library helps manage form state, validate inputs, and handle user input more efficiently with minimal re-renders. It is used to manage the location input and date picker controls in the app.

What role does the Alan AI platform play in the integration?

Alan AI provides the voice assistant that allows users to interact with the form using voice commands. It helps create and manage the voice interface, processing commands like setting the location, checking in on a specific date, and submitting the form.

How do you handle voice commands in the React app?

Voice commands are handled by defining intents in Alan Studio and then processing them in the React app using a command handler. For example, when a command like 'set location' is received, the app updates the corresponding form field with the provided value.

What is the purpose of using `moment.js` and the `react-datepicker` component?

`moment.js` and `react-datepicker` are used to handle date inputs. `moment.js` helps format date values from voice commands, while `react-datepicker` is used to visually display and manage the check-in and checkout dates in the form.

How can users select options like apartment type or cancellation preferences with voice?

Users can select options like apartment type or cancellation preferences by using voice commands. The app listens for specific intents such as 'select apartment type' or 'need free cancellation' and updates the form fields accordingly.

How is the form submitted using voice commands?

The form can be submitted via voice by using the 'start searching' intent, which triggers the form submission. If the form is valid, the app will submit the data, otherwise, it will ask the user to check the entered data.

What functionality does the `useLocation` hook provide in this integration?

The `useLocation` hook from React Router helps track the current page the user is on. This allows the app to filter voice intents based on the active page, ensuring that voice commands only work when the correct form step is open.

How does Alan AI handle greeting the user and prompting them to start the form?

When the Alan button is online, Alan AI plays a greeting message, such as 'Hello, I’m your travel assistant.' This prompts the user to either hit the start button or say 'start now' to begin the voice-controlled form process.