VOGO Voice – Knowledge Base

Tutorial for stripping HTML

Estimated reading time: 6 min

In this in-depth tutorial, you will learn how to strip SSML tags from the data using the stripHTML function on the VOGO Voice platform. Implementing this method allows you to remove the SSML tag from the display that complements the Alexa voice response. The presence of SSML tags within the voice text response is crucial, yet the same is not required for the display part. If allowed, SSML tags will render the display message into an unreadable format. 

For a guided walkthrough, the comprehensive instructions combined with highlighted screenshots will offer the required direction for using the stripHTML function tailored with the shuffle function. The purpose of the latter is to ensure that the retrieved FAQs presented in a set of 2 are picked in a random fashion and provided to the user each time upon request. The interaction put to use in this tutorial serves to showcase the step-by-step process involved while a user is attempting to retrieve the FAQs while accessing a health and fitness center voice app.

Prerequisites

  • VOGO Voice account: https://www.vogovoice.com/
  • Access rights to the Interactions section.
  • Access rights to the Interaction builder platform.

Create a Custom Intent 

Make a suitable intent to be invoked in order to execute a Strip function interaction mapped to it. 

Create an intent titled ‘FAQ’ with suitable sample utterances mapped to it. The sample utterances for this intent would be: “FAQ”, “Can I access the FAQ section”, “Give me the FAQ” and “Can I have the FAQ”.

To learn about how to create a custom intent, visit Creating Intents 

Steps to create an interaction flow

1.Log into your VOGO Voice account to be directed to VOGO Voice Management Console (https://account.vogovoice.com)
2. Navigate to Interactions on the vertical bar displayed on the left-hand side of the Dashboard.
      Dashboard > Interactions

3. Now, click on the Interactions button at the bottom right-hand corner of the screen. Select the ‘FAQ’ intent to be directed onto the interaction builder platform.

4. In the flow diagram area, you will be able to see the Start and Response components.
5. Unlink the Start component from the Response card by clicking the delete icon placed in the middle of the chain.

6. Now, drag and drop an Add Variables component onto the flow diagram area and connect it to the Start Component.

7. Now mouse over the top right corner of the Add Variables component. Click on the pencil icon that appears. This will open up its configuration window.

8. Configure the Add Variables component by adding the key-value pairs as shown in the screenshot below. Fill in the variable name as questions and add the value, the format of which is provided below in detail.

🖍 Note: The input value for the questions variable includes the list of FAQs.

Here are the array elements or questions in the variable named questions

[
"Can anyone join Health club?", 
"Does the Health club sell <say-as interpret-as='spell-out'>USFDA</say-as> certified products?", 
"How can I become a member?"
]

After adding the array select its data type as Array

9. Navigate to the Data tab adjacent to the Components on the top left-hand side of the interaction builder platform.

10. Click on the Data part and in the search bar type shuffle. From the drop-down that appears, click on the plus button beside the collection, and this will bring up the shuffle function.

11. Drag and drop the shuffle function in the subsequent value field of the recently attached Add Variables component. This will automatically generate the shuffle function in the respective field. Now configure it as shown below. The purpose of using this function is to pick the questions randomly and generate a set of two questions each time the user requests to access the FAQ. 

👍 Note: Here we name the new variable as questionMix. Click the plus button that appears under the heading Arguments and add the argument as var.questions which is the array that contains the values to be shuffled and set the data type as Path. It is the var.questionMix that will contain the shuffled array. 

12. Next, we need to add 2 variables namely question1 and question2 within the same Add Variables component. To configure click two separate plus buttons at the extreme left corner within the component below the Arguments. Name the variables as question1 and question2 in the respective fields.

13. Next, navigate to the Data tab adjacent to the Components on the top left-hand side of the interaction builder platform. Click on the Data part and in the search bar type stripHTML. From the drop-down that appears, click on the plus button beside the String, and this will bring up the stripHTML function as shown below. 

14. Drag and drop the stripHTML function twice in order to populate the function in the two separate value fields, for the variables question1 and question2.This will automatically generate the stripHTML function in the respective fields. Here both the variables are set up to generate the output of 2 random questions picked from the array on the display without SSML tags.

👍 Note: Now var.question1 and var.question2 will render the first and second elements of the shuffled array var.questionMix respectively, along with the SSML tags stripped, if any.

To learn about different template engines to be followed to run functions visit https://university.vogovoice.com/kb/template-engine/

15. Next, drag and drop a Response component and connect it to the already configured Add Variables component. Click on the Voice icon on the top right-hand side of the Response component to configure it.

16. Clicking on the voice icon opens a Speak pop-up window with a field titled Say wherein you need to type the following.

Say: These are some of the questions you can ask about our fitness center.

{{var.questionMix.[0]}} 
or 
{{var.questionMix.[1]}}.

Prompt: Say next to see the questions without SSML tag.
The same message will be replicated in the Reprompt field.
Reprompt: Say next to see the questions without SSML tag.

Here, the questions with the SSML tags, if any, will be relayed to the user as {{var.questionMix.[0]}} and {{var.questionMix.[1]} retrieves the first and second element of the shuffled array var.questionMix for which the stripHTML function was not implemented. 

In the entire array there is only one element that has the SSML tag, and when that particular one is fetched, then {{var.questionMix.[0]}} or {{var.questionMix.[1]}} will render the question with the tags intact. For instance while generating the FAQ “Does the Health club sell <say-as interpret-as=’spell-out’>USFDA</say-as> certified products?”Alexa will spell out USFDA correctly as letters. Hence, here, in the Say part, these SSML tags are a prime requisite to ensure correct pronunciation. 

🖍 Note1: Here .[0] notation is used to take the first element from var.questionMix and .[1] notation to take the second element. If we use .0 or .1 instead of .[0] or .[1] the template will take it as an index instead of an identifier and will throw an ” Expecting ‘ID’ ” error.

🖍 Note2: The purpose of calling the Prompt and Reprompt in the Speak window of the Response component is to route the user to the displayed version of the FAQ without the SSML tag.

17. Populate the field under Expectations by checking the Allow Global Interactions and then select Next from the drop-down list. 

To add a display message in a display voice-assisted device.

  1. Click on the Computer icon, and type in the field titled Display Message of the Show pop-up window. 
  2. Populate the required fields and click the Save button. 

Title: FAQ

Display Message: {{var.questionMix.[0]}} 
                       or 
                     {{var.questionMix.[1]}}.

👍 Note: Here in the display too, we will get the questions with the tags intact as “Does the Health club sell <say-as interpret-as=’spell-out’>USFDA</say-as> certified products?”.

🖍 Note: Ensure to click the Save button to save the interaction flow as and when edits are made.

For further reference on how to populate the additional fields visit https://university.vogovoice.com/kb/guide-response-component/

18. Drag and drop another Response component and connect it to the previously configured Response component.

19. Click on the Voice icon on the top right-hand side of the Response component to configure it. This will open up a Speak pop-up window with a field titled Say wherein you need to type the following.

Say:  These are some of the questions you can ask about our fitness center.
         {{var.question1}} 
         or 
         {{var.question2}}.

🖍 Note: The FAQ “Does the Health club sell <say-as interpret-as=’spell-out’>USFDA</say-as> certified products?” retrieved via {{var.question1}} and {{var.question2}} will show up the question without tags as “Does the Health club sell USFDA certified products?”, where the USFDA won’t be spelled out as expected as Alexa is likely to mispronounce it.

To add a display message in a display voice-assisted device.

  1. Click on the Computer icon, and type in the field titled Display Message of the Show pop-up window. 
  2. Populate the required fields and click the Save button. 

    Title: FAQ
    Display Message:   {{var.question1}} 
                             or 
                            {{var.question2}}

On the display front, the question”Does the Health club sell <say-as interpret-as=’spell-out’>USFDA</say-as> certified products?” will show up without the tags as “Does the Health club sell USFDA certified products?” 

Testing and Validation 

  1. Click on the Test button next to the Flow Editor button on the interaction builder platform.

2. In the Tests pop-up window that appears, click the + button on its top right-hand corner. 

3. Fill in the Name field of the Test Response window that shows up. In the Conversation section of the Test Response, the FAQ intent through which this interaction flow has been initiated will be auto-generated in the User invokes field as shown below. 

4. Click the + button within the Conversation Section to open up an additional field titled User Invokes. Ensure to populate this field by selecting the Next intent called to action within the interaction flow. Now, click Save to perform the test.

5. To validate the Test Response, click on the lightning symbol on the left-hand side of the test case. 

6. The test response in the screenshot below shows the first response output with the SSML tag.

First Response Output

Device Display message

7. Here the second response output shows the questions without the SSML tag owing to the use of the stripHTML function.

Second Response Output

Device Display message

Congratulations! You have successfully learned how to create an interaction that requires you to strip SSML tags from the given data using the stripHTML function.

👍 Note: To test the functioning of the interactions on your device you have to deploy the custom skill to facilitate the skill with the new edits. To accomplish this, click on the Deploy button seen at the bottom of the Skill Settings pop-up window.

To know how to deploy a custom skill visit https://university.vogovoice.com/kb/deploying-a-skill/

To learn about Add Variables, click here.

Tags:
Was this article helpful?
Dislike 0
Previous: How to Use a Shuffle Function
Next: Socrata Show Chart Example