alan-logo
Docs

Documentation

Powered by Algolia
How-tosAlan tutorials

Starting the dialog and playing greetings

In a typical dialog flow, the user gives commands to Alan and Alan replies to the user. If necessary, you can let Alan start the dialog. For example, Alan can welcome the user and say a few words about the app and its capabilities.

In this tutorial, we will create a webpage that will greet the user when it is opened. The Alan button will be automatically activated and Alan will say: Hi, this is Alan and continue the dialog. To greet the user, we will use the playText() method of the Alan Web SDK.

What you will learn

  • How to play a greeting in the app or webpage with voice
  • How to use the activate() and playText() methods

What you will need

To go through this tutorial, make sure the following prerequisites are met:

Step 1: Create a webpage

First, let's create a webpage and embed the Alan button to it:

  1. In Alan Studio, open your project.
  2. At the top of the code editor, click Integrations.

  3. In the Embed Code Example section, click Copy All. Save the copied code as an HTML page.

    <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Alan Example</title>
		<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i"
			rel="stylesheet">
	</head>
	<body>
		<div class="alan-btn"></div>
		<script type="text/javascript"
			src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>
		<script>
			// Define alanBtnInstance
			var alanBtnInstance = alanBtn({
			key: "be2e15207f5bbff17d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage",
			onCommand: function (commandData) {
				if (commandData.command === "go:back") {
					//call client code that will react to the received command
				}
			},
			rootEl: document.getElementById("alan-btn"),
			});
		</script>
	</body>
</html>

Open the created webpage and make sure you see the Alan button.

Step 2: Add a callback for receiving the button connection state

We want to activate the Alan button automatically when the page is opened and hear greetings from Alan. To do this, let's add the onConnectionStatus callback for the Alan button. This callback will listen to the Alan button connection state and, once the button is authorized (Alan has connected to the voice project), activate it and play some text to the user.

In the webpage, update the code for the Alan button to the following:

...
// Define alanBtnInstance
var alanBtnInstance = alanBtn({
	key: "be2e15207f5bbff17d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage",
	onCommand: function (commandData) {
		if (commandData.command === "go:back") {
			// Call client code that will react to the received command
		}
	},
	
	// Listening to the button state
	onConnectionStatus: async function(status) {
        if (status === 'authorized') {
            await alanBtnInstance.activate();
            alanBtnInstance.playText('Hey, this is Alan');			
        }
    },		
	rootEl: document.getElementById("alan-btn"),
});
...

Now, when the user opens the webpage, the Alan button is programmatically activated and the following greeting is played: Hey, this is Alan.

Step 3. Add commands to the dialog

Let's create the dialog that goes in the "reverse order": after greeting, Alan will ask something so that the user can respond.

  1. In the playText() function in the webpage, update the text to: Hey, this is Alan. What is your name?

    ...
// Listening to the button state
onConnectionStatus: async function(status) {
    if (status === 'authorized') {
        await alanBtnInstance.activate();
        alanBtnInstance.playText('Hey, this is Alan. What is your name?');			
    }
},
...

  2. To the voice script in Alan Studio, add the following commands:

    intent('(It is|My name is|) $(ANSWER* (.*))', p => {
	p.play(`Nice to meet you, ${p.ANSWER.value}`);
	p.play(`You can ask any questions about our products or browse through the catalog with voice`);
	p.play(`What would you like to do?`);
});

You can now add more commands to the script to continue the dialog with Alan.