Documentation

Powered by Algolia

Highlighting items with voice

In an app with a multimodal UX, it is always a good idea to accompany voice commands with visual effects in the app. For example, if your app displays a list of items, you can add a voice command that will let the user check what items are available. And to support such a voice command visually, you can highlight each named item while Alan passes through the list. You can also have an item highlighted when the user asks about the item details.

In this tutorial, we will create a simple webpage with a list of items. The user will be able to through the list with voice. When Alan names an item, this item will be highlighted in the app UI.

We will also add a command to learn about the item price. When the price is played, this item will be highlighted as well.

What you will learn

  • How to go through the list of items with voice
  • How to accompany voice commands with visual effects in the app

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>
  4. To the <body> tag of our page, add a container with items and a heading:

    <body>
    	<div class="header">
    		<h1>Footwear catalog</h1>
    	</div>
    	<div class="card-deck">
    		<div id="foam-more" >
    			<div class="item-title">Fresh Foam More</div>
    			<img src="https://nb.scene7.com/is/image/NB/mmorbl2_nb_04_i?$pdpflexf22x$&fmt=webp&wid=250&hei=250" />
    		</div>
    		<div id="foam-tempo" >
    			<div class="item-title">Fresh Foam Tempo</div>
    			<img src="https://nb.scene7.com/is/image/NB/mtmpobk_nb_02_i?$pdpflexf22x$&fmt=webp&wid=250&hei=250"/>
    		</div>
    		<div id="xc-seven" >
    			<div class="item-title">XC Seven</div>
    			<img src="https://nb.scene7.com/is/image/NB/mxcs7ot3_nb_03_i?	$pdpflexf22x$&fmt=webp&wid=250&hei=250" />
    		</div>
    	</div>
    ...
    </body>
  5. And add some styles:

    <style>
    	h1, .item-title {
    		text-align: center;
    		font-family: Roboto;
    		padding:10px;
    	}
    
    	.card-deck {
    		display: flex;
    		justify-content: space-between;
    	}
    </style>

Open the created webpage and make sure you see a webpage with the list of items and the Alan button.

Step 2: Add a voice command to pass through the items list

Now, let's go to Alan Studio. We will add information about our items and a voice command to name them one by one.

  1. In the voice script, add the items list:

    const catalog = [       
        {id: "foam-more", title: "fresh foam more", price: 144.99},
        {id: "foam-tempo", title: "fresh foam tempo", price: 109.99},
        {id: "xc-seven", title: "xc seven", price: 69.99}
    ];
  2. Add the command to pass through this list:

    intent(`What are the best sneakers for running?`, p => {
    	p.play(`Here are some popular models`);
    	for (let i = 0; i < catalog.length; i++) {
    		let item = catalog[i].title;
    		p.play(`${item}`);       
    	}
    });

Now, when the user asks about items, Alan goes through the catalog and names each item in it.

You can test it: in the webpage, click the Alan button and ask: What are the best sneakers for running? Alan will name all items available in the catalog.

Step 3. Highlight named items

Now, let's highlight each item in the webpage as Alan names it.

  1. In the voice script, update the voice command to the following:

    intent(`What are the best sneakers for running?`, p => {
    	p.play(`Here are some popular models:`);
    	for (let i = 0; i < catalog.length; i++) {
    		let item = catalog[i].title;
    		
    		// Sending the highlight command
    		p.play({command: 'highlight', item: catalog[i].id});
    		p.play(`${item}`);       
    	}
    });

    Now, before the item is named, Alan will send a command to the webpage.

  2. Let's handle the sent command on the client side. To the webpage, add the highlight() function. This function will show a border around the named item and remove it after a while:

    <script>
    	function highlight(item) {
    		const el = document.getElementById(item);
    
    		if (el) {
    			el.style.border = '5px solid rgb(25, 149, 255, .5)';
    			setTimeout(() => {
    				el.style.border = ('none');
    			}, 1000);
    		}
    	};
    	...
    </script>
  3. We also need to update the onCommand block for the Alan button to invoke this function when the highlight command is received:

    <script>
    ...
    	var alanBtnInstance = alanBtn({
    		key: "be2e15207f5bbff17d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage",
    		onCommand: function (commandData) {
    			if (commandData.command === "highlight") {
    				highlight(commandData.item);
    			}
    		},
    		rootEl: document.getElementById("alan-btn"),
    	});
    </script>

Here is how it works: when the user gives a voice command, Alan starts passing through the catalog. For each item, it sends the highlight command with the item ID to the webpage. On the webpage side, the command is handled and the highlight function adding a border to the item is invoked.

You can test it: in the webpage, click the Alan button and ask: What are the best sneakers for running? Alan will name all items and each named item will be highlighted.

Step 4: Get the item details and highlight the item

Let's add a voice command to get the item price. As we are getting the item details, the item will be highlighted.

In the voice script in Alan Studio, add the following command:

intent(`How much are $(FOOTWEAR xc seven|fresh foam more|fresh foam tempo)?`, p => {
	p.userData.sneakers = p.FOOTWEAR.value.toLowerCase();
	let item = _.find(catalog, ["title", p.userData.sneakers]) 
	p.play({command: 'highlight', item: item.id});
	p.play(`The price is ${item.price} dollars`);   
});

In the pattern of this command, we have the FOOTWEAR slot listing all items available. When the user asks for the price of a specific model, Alan gets its name and saves it to p.userData.sneakers. It then uses this variable to get the item by its title and play the item price. At the same time, it sends the highlight command to the webpage, and the named item is highlighted.

You can test it: in the webpage, click the Alan button and ask: How much are XC Seven? The item will be highlighted and Alan will tell the item price.