Powered by Algolia

Adding Voice to a web application

In this example, we will show you how to:

  • Create a voice script with simple voice commands
  • Test voice scripts in the Alan Studio
  • Add the Alan Button to the HTML webpage.

Creating a voice script in Alan Studio

  1. Go to the Alan Studio and create a project there:
  2. Create a new voice script in the project:

In the "Add script" popup you can create an empty script or you can choose a script that already has intents from the list of predefined scripts. There are a variety of these scripts for different voice use cases.

  1. Add the following intents into the script code area and save your changes:
intent(`Hi`, reply(`Hello`));
intent(`Who are you?`, reply(`I'm Alan, your virtual voice assistant`));

An intent is a voice command the user says to receive a voice response or specific functionality from an application.

  1. After the changes are saved, you can test your voice script in the "Debug chat" area in the right part of the screen. Type your intents there, and after pressing the "Enter" key, you will be able to see Alan's responses which you defined in step #3. You can also press the Alan Button in the right bottom corner and test your script with voice. Just say "Hi" or "Who are you?" and you will be able to listen to Alan's response.

Adding the Alan button to the client page

  1. Go to the Embed Code page to see examples of integrations of the Alan Button for different platforms:

For simplicity, we will add the Alan Button to the HTML page. You can also find instructions on how to add the Alan Button on the "Embed Code" page for iOS and Android platforms.

  1. Click the Copy all button to copy the full HTML code and save it in a new file testAlanButton.html.
  2. When you open the testAlanButton.html file in the browser, you will see the empty page with the Alan Button in the right bottom corner. If you activate the Alan button, you will be able to ask intents which you defined in your voice script ("Hi" or "Who are you?") and get Alan's responses.

The page will work in the latest versions of Chrome, Firefox, Microsoft Edge. You will need to give microphone access after pressing the Alan button. Some browsers may block microphone access on unsecured pages or allow it only during the current session.

Congratulations! You've created your first Alan application and learned how to debug the voice scripts in Alan Studio! You can find more examples in the Tutorials section of this Documentation. Check out the Food Delivery Complete Application Tutorial to see the full example of how to create a Voice Experience for a Food Delivery app.