Building a voice assistant for web (JavaScript)

You can create a voice assistant or chatbot and embed it to a web app, website or webpage with Alan’s voice assistant SDK for Web. In this tutorial, we will voice enable a simple webpage. You will be able to click the Alan button on the page, give custom voice commands and get Alan’s responses.

What you will learn

  • How to create a voice script with simple voice commands

  • How to test voice scripts in Alan Studio

  • How to add the Alan button to a website

What you will need

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

Step 1. Sign up for Alan Studio

First, we need to sign up for Alan Studio — the web portal where we will create a dialog scenario, or the voice script, for our voice assistant.

  1. Go to Alan Studio.

  2. Sign up with a Google or GitHub account or with your email address.

    Note

    When you sign up, Alan adds free interactions to your balance to let you get started. To get additional interactions to your balance, sign up with your GitHub account or connect your Alan account with your GitHub account and give stars to Alan repositories.

  3. In Alan Studio, click Create Voice Assistant. Select to create an empty project and give it any name you want.

Step 2: Add voice commands

Now we will add simple voice commands to the voice script.

  1. In the code editor, add the following intents. An intent is a voice command the user can give to receive a voice response or trigger some activity in the client app.

    intent(`Hi`, reply(`Hello`));
    intent(`Who are you?`, reply(`I'm Alan, your virtual voice assistant`));
    
    ../../../_images/quickstart_step3.png
  2. Save the changes.

  3. You can test your voice script in the Debugging Chat area in the right part of the screen. Type the voice commands in the text box and press ENTER. You will be able to see Alan’s responses which you have defined. You can also click the Alan button in the bottom right corner and test your commands with voice. Say "Hi" or "Who are you?", and you will hear Alan’s response.

    ../../../_images/quickstart_step4.png

Step 3: Add the Alan button to a client page

For simplicity, we will add the Alan button to an HTML page.

  1. At the top of the code editor, click Integrations.

    ../../../_images/quickstart_step5.png
  2. Scroll down to the Embed Code Example section. Here you can find instructions on how to add the Alan button for different platforms.

    ../../../_images/quickstart_step6.png
  3. On the JavaScript tab, click Copy all and save the copied code as a new HTML file.

  4. Open the file in the browser. You will see an empty page with the Alan button in the bottom right corner.

    ../../../_images/quickstart_step7.png
  5. Click the Alan button and give commands that you have defined.

Note

JavaScriptThe page will work with the latest versions of Chrome, Firefox, Microsoft Edge. You will need to give microphone access after clicking 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 voice-enabled app and learned how to test voice scripts in Alan Studio! Find more examples in the Tutorials section. To see how to add a voice experience for a food delivery app, check out the Creating a voice-enabled food delivery app: complete tutorial.