Powered by Algolia

Adding voice to a web app

In this tutorial, we will create a webpage from scratch and add the Alan button to it.

What you will learn

  • How to create a voice script with simple voice commands
  • How to test voice scripts in the Alan Studio
  • How to add the Alan button to an HTML webpage

What you will need

This is a getting started tutorial. No prior knowledge is required.

Step 1: Create a voice script in the Alan Studio

You need to create a project in the Alan Studio and add a voice script to it.

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

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

  1. Add the following intents to the code editor 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 can say 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 press ENTER. You will be able to see Alan's responses which you defined in step #3. You can also click the Alan button at the right bottom corner and test your script with voice. Say "Hi" or "Who are you?", and you will be able to listen to Alan's response.

Step 2: Add the Alan button to a client page

You be able to send voice commands to your page, you need to add the Alan button to it.

  1. At the top of the code editor, click Embed Code to see how to integrate the Alan button into different platforms:

For simplicity, we will add the Alan button to an HTML page. In the Embed Code section, you can also find instructions on how to add the Alan button for iOS and Android platforms.

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

The page will work with 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 test voice scripts in Alan Studio! You can find more examples in the Tutorials section. Check out the Food Delivery Complete Application Tutorial to see in full how to add a voice experience for a food delivery app.