How to fill the form in a multi-page website using Alan AI?
Have you ever wondered if you can just use your voice to fill up a lengthy form on a website and let the website interact with you to capture the responses? Well, this thing is now possible with the help of Alan AI’s out-of-the-box capabilities of capturing accurate phrases by using one of the most sound and refined NLP models.
What are we going to build in this article?
In this article, we will be using Alan AI to incorporate a voice assistant which will serve as the medium of interaction with the user on a multi-page website. As the starting purpose, we are assuming the website to be a healthcare-related site where hospitals can add their patient details and maintain their medical records. So, we will be dealing with how to first capture the responses from users and then will look to dynamically populate (update) the input fields. So, let’s get started.
How is the form structured and what are the fields?
The form has a total of 8 fields which are as follows:
- Email address
- Full Name
- Date of Admission
- Age
- Disease category
- Note
- Phone
- Critical
Out of these 8 fields, we will be using Alan AI to update 5 fields except email, disease category & phone. So let’s start by creating an Alan script on the Alan Studio.
Let’s start with creating the patient’s form page
In the markup of the page, you can see that I used Bootstrap to style the front-end part.
Creating an Alan Script
Go to https://studio.alan.app/ and get yourself registered on the platform. Click on Create Voice Assistant to make a fresh script file. Now you are good to go & create your very own webpage which will be using your voice commands to fill up a form and do many more things.
Start formatting the Alan Script
To initiate the conversation with Alan, we will say the phrase “Let’s start filling the details”. Then Alan will respond with the play command i.e. it will say “Enter patient’s name”
So as of now if I will say the phrase “Let’s start filling the details”, then Alan will only reply and do nothing. The next step is to send a command to the website such that the user’s input can be applied to the form fields.
How to integrate the Alan Script in the patient’s page of the website?
- Open the Alan script which you have created as of now.
- Click on Integrations and then choose web as the preferred option.
- Then copy the division element for the Alan button and the script tag and paste them at the end of the patient’s page.
Move further & start updating the UI
As of now, we have used only a simple phrase to start filling the form, but now we have to tell Alan’s script that we have to populate the field on the website by first capturing the user’s phrase. So, the first thing to do as of now is to catch the user’s phrase and this we will do by using contexts.
Contexts: Just like in real-world conversations, in voice scripts some user commands may have meaning only within a context. To let you organize dialogs with such commands, Alan provides contexts. Contexts are useful if you create a multi-stage conversation where some commands or dialog branches do not make sense as standalone utterances. In this case, you can place them in contexts.
You must have seen that we have used a command p.then(addName). addName is the context name in our case. So, now let’s create the context addName and then work accordingly.
In the context, you can see that the user will have to say a phrase like “Name is Bob” and then Alan’s script will use the pre-defined script objects to capture the user’s response. userData is a runtime object that can be used during a voice session with a specific user. I have used $(NAME), which is a pre-defined slot to capture names. To send this captured phrase’s value to the website, we will pass a JSON object in the play function. For our case, we have used addName as the command name and we will use it on the website to do the needful.
Note: You have to pass the value which you want to use in the website as the item field in the JSON object
As you can see I have deleted the default go:back command written in the script file and replaced it with a command of our interest i.e. addName. As soon as the website gets the addName command then I want to fill/populate the name field in the form. To do that I used JavaScript and DOM manipulation. I selected the field using the id ‘name’ and then set its value using commandData.item
Now the name field will be updated at the UI’s end if we enter the phrase correctly after Alan asks for the input. Similarly, we have to create contexts for different input fields and accordingly use them in the website.
When the user will say Name is John Doe then the script will send the addName command to the website and then it will ask to enter the date of admission. Then the user has to provide the Date of admission by saying (for eg) the Date of admission is 27 March 2022. Then addDOA command will be sent and then the DOA field will also be populated.
As a point of confirmation, in the context addNote after taking the user’s input, Alan will repeat what you have said by the play command.
As of now, we have implemented all 5 contexts for fields like name, doa, age, note & status, and the website is also updating the UI accordingly. But I guess, I am forgetting something. Oh! how the remaining 3 fields (email, disease category & phone number) will be updated manually in between the conservation.
Don’t worry, for that we will make a new context named submitPatient which will ask them whether Alan can now submit the form or not?
Note: You must have to understand in my case the form has to be submitted to a script file named patient_details.php whose path is utilities/patient_details.php Along with the path I have to send the field values which have been collected by Alan.
After filling the form, the user will say (for eg) “Wait I have to fill some more details” so Alan will wait accordingly for the user to fill in the left out fields manually and when the user will be done filling those then the user can say “yes” to Alan & Alan will do the further operations successfully. You must be noticing that I have used regular expressions in the name & note data because I have to replace all whitespaces with %20. This is necessary because whenever an API call has to be made, all the whitespaces in the request have to replaced by %20 otherwise the link will be broken.
Fallback at the end ensures that the user can only use the phrase “Yes” / “You may” to escape the current context that is to submit the details.
Before submitting the form, I have to gather the remaining values of the 3 fields that are manually set by the user. I have done the same by document.getElementById().value and thus I am having all the 3 input field values. Now I have to redirect my age to the final script file where the things will be used for interacting with the backend. For this thing, I used the window.location.replace() and then appended the last 3 attributes to the field also. In this fashion, Alan is doing everything on its own.
Final workflow of how the phrases work?
Phrase 1: User (speaking): Let’s start filling the details
Alan: Enter patient’s name
Result: name field is populated in the UI
Phrase 2: User (speaking): Name is Sam
Alan: Enter date of admission
Phrase 3: User (speaking): Date of admission is 16 March 2022
Result: doa field is populated in the UI
Alan: Enter patient’s age
Phrase 4: User (speaking): Age is 35
Result: age field is populated in the UI
Alan: Add a note
Phrase 5: User (speaking): Sam seems to have a bad throat
Alan: You have said Sam seems to have a bad throat
Result: note field is populated in the UI
Phrase 6: Alan: Is the patient critical?
User (speaking): Yes
Alan (if the user says yes): Now please add the remaining fields. Shall I submit the details?
Phrase 7: User: Yes, you may
Final script file for website
Let’s see the work in action
I hope you understood how to use various Alan concepts and integrate them in your end application. Surely, this gives a lot of boost in the enhancing the user experience and providing them an all new way of interaction that is voice assistance in the application