VOGO Voice – Knowledge Base

Visitor Counter

Estimated reading time: 11 min

Now that you have familiarized yourself with creating a flow that differentiates a new user from an existing user, it’s time to move forward to an advanced version of the tutorial that focuses on distinct ways on how to customize voice responses by enabling a visitor counter function to render a curated experience for the existing user, as his visits to the skill increases.

This part of the instructional tutorial will walk you through the procedural steps on how to implement a visitor counter in order to execute the function of counting the number of times the user visits the skill. To accomplish this criteria, the logic of adding+1 each time the user opens the launch screen is put to use. The logic behind being the function of the counter is triggered upon the user’s second visit onwards. The advantageous side of adding a visitor counter is that it extends the option to tailor voice responses to address the new/returning users more than once accordingly and thus enhance their experience of the functionality of the custom skill.

Prerequisites

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

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.Click on the Open button of the default Launch interaction card to be directed into the Interaction builder platform. 

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

6. Drag and drop the Check variable component onto the flow diagram area.
7. Connect the anchor symbol of Next on the Start component to the anchor symbol on the Check Variable component.
8.Configure the Check Variable component with a test condition using the relational operator Exists to evaluate the value stored in the system through Save Settings. The flow for the existing user will proceed from Then because the values of his previous visit exists; and for the new user it will progress from Otherwise as no values are existent in the system.
1.Populate the left hand side of the Configuration window as in the screenshot shown below. Set the data type based on the input.

 Left-Hand side: settings.visitorCnt (choose data type as Path).

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

9. Drag and drop the Save Settings component onto the flow canvas.
10. Chain the anchor symbol of Then on the Check Variable component to the anchor symbol on the Save Settings component. The objective of configuring the Save Settings component here is to implement the counter function within the skill to capture the instance of the user’s visit for the purpose of returning a numerical value upon his next visit in the form of a voice response. This function when called to action adds value one (+1) to the instance of the user’s previous visit represented by a numerical value within the Save Settings component
11. To configure the Save Settings component add the key-value pair. Input visitorCnt as the key and add as its corresponding value. Set the data type as Function. There’s also another way to input the value add and its corresponding type as Function – navigate to the Data tab adjacent to the Components on the top left-hand side of the interaction builder platform. 

  1. In the Data section navigate further down through to Functions. Click on its plus button to have its subsection appear. In the list that appears, click on the plus button of Math which will open up a list. From the list select add by dragging and dropping it in the value field of the Save Settings component which will automatically generate add and Function in its respective fields.

2. Then input the first argument by clicking the plus button that appears under the heading Arguments.

3. Input number to represent the numerical value and set the data type to Function as shown below.

4. Click on the plus button that comes within the Arguments. In this sub-section add the path to which the value is saved. Here the input being settings.visitorCnt. Choose the data type as Path.
5. Now click on the plus button as highlighted in the screenshot below that appears on the region outside of the subsection to add a second argument. The purpose here being to substantiate the first argument. 

6. Populate the field that appears with the numerical value 1 and choose its data type as Number.

12.Drag and drop a Response component and connect its anchor symbol to the anchor symbol of Next on the Save Settings component.
13.Roll the mouse over the Response component to see the voice, computer and camera icon on the top right-hand side of the component.
14.Click on the Voice icon of the Response card to open up the Speak pop-up window and type the voice action intended to be spoken to the user to provide a suitable response 
SayDelighted to see you visit the Vocabulary Bingo game {{settings.visitorCnt}} {{pluralize settings.visitorCnt ‘time’}}

🖍Note: The variable name visitorCnt represents the count of the user visiting the skill.

To learn how to use pluralize features within a template engine visit https://university.vogovoice.com/kb/template-engine/#ch_9

To add a display message in a video-enabled voice-assisted device
1.Click on the Computer icon, and type in a condensed version of the voice message in the field titled Display Message of the Show pop-up window.
2.Populate the required fields and click the Save button. 
Title: Vocabulary Bingo
Display Message: Delighted to see you visit the Vocabulary Bingo game
             {{settings.visitorCnt}} {{pluralize settings.visitorCnt ‘time’}}

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

15.Now drag and drop another Save Settings component onto the flow canvas. 
16. Chain the anchor symbol of Otherwise on the Check Variable component to the topmost anchor symbol on the Save Settings component.
17. Configure the Save Settings component by adding the key-value pair. 
1. To configure add an arbitrary variable name to identify the value stored and assign a corresponding value to be called to function anytime within or beyond a session. Here, the key represents the variable visitorCnt and the value assigned is 1 to capture and save the initial visit of the user. Set the data type to Number.   

To know more about different data types, click here.

18. Drag and drop another Response card onto the flow canvas.
19. Link the anchor symbol of the Response card to the Next on the Save Settings component.
20.The Response card chained to Save Settings should have a voice message welcoming the new user to the skill. To type the voice action intended to be spoken to the user click on the Voice icon which will open up a Speak pop-up window with a field titled Say.
Say: Welcome to the Vocabulary Bingo game.

To add a display message in a video-enabled voice-assisted device
1.Click on the Computer icon, and type in a condensed version of the voice message in the field titled Display Message of the Show pop-up window.
2.Populate the required fields and click the Save button. 
Title: Vocabulary Bingo
Display Message: Welcome to the Vocabulary Bingo game.

The screenshot below captures the aforementioned interaction flow.

Testing and Validation

a) Testing for existing user
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 the Name field of the Test Response window that shows up.
4. In the Conversation section of the Test Response, the Launch intent through which this interaction flow has been initiated will be auto-generated in the User invokes field as shown below.
5.Populate the User Settings sectionfield with the variable as defined in the Save Settings component. Input the variable as visitorCnt and assign a numerical value representing the count of the number of times the user has visited the skill since his initial visit. Here the value assigned is 3, to which value one (+1) will be added to represent the total number of times the user has visited the skill i.e. to add the first instance of his visit to the value captured and stored in the system. The reason being the function of the counter is triggered upon the user’s second visit onwards.

6. Finally, click the Save button to save the input and perform the test.
7. To validate the Test Response, click on the lightning symbol on the left-hand side of the test case.

8. On the resultant Test Response window, the blue chat bubble will present the previously input message within the Response component to address the existing user.

9. Click on the chat bubble to see the details of the individual response.

b) Testing for new user
Repeat the same steps as carried out while performing Testing for Existing User with the only exception being to leave the  User Settings section empty.

To know more about testing an interaction refer https://university.vogovoice.com/kb/testings/

Congratulations! You have successfully created an interaction flow using a counter function which will add +1 each time the user opens the launch screen. 

👍 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/

Advanced version if count > 5

This user-centric tutorial is designed to give you a hands-on experience on how to create an interaction model and tailor its voice responses to acknowledge new and returning users accordingly. This version focuses on how to curate voice responses by employing a counter >5 to address an existing user who has visited the skill a couple of times.

To begin, start off by performing the steps 1-11 (upto step 12) as instructed in Tutorial- Add a visitor counter and then proceed with the instructional guidelines provided hereon.
12. Now drag and drop another Check Variable component onto the flow canvas.
13. Connect the anchor symbol of the Check Variable component to the Save Settings component.
14.Configure the Check Variable component with a test condition using the relational operator is greater than to evaluate the value stored in the system through Save Settings.  Here the purpose being to curate two different voice responses based on the counter > 5 i.e. one to address a user whose visit to the skill has exceeded five times and the other one for a user who has visited the skill five times or lesser.
1.Populate the left-hand side and right-hand side of the Configuration window as in the screenshot shown below. Set the data type based on the input.
Left-Hand side: settings.visitorCnt (choose data type as Path).
Right-Hand side:  5 (choose data type as Number)

Upon testing the condition, the subsequent pathing will be modeled accordingly i.e. if the test condition returns true link the result to ‘Then’ and if it returns false, link it to ’Otherwise’. 
15.Drag and drop a Response component onto the flow canvas and connect the anchor symbol of this Response card to the ‘Then’ on the Check Variable component.
16.Roll the mouse over the Response component to see the voice, computer and camera icon on the top right-hand side of the component.
17.Click on the Voice icon of the Response card to open up the Speak pop-up window and type the voice action intended to be spoken to the user to provide a suitable response if the test condition returns true i.e. the Check Variable component upon evaluating the values stored in the system recognizes the number of times the user has visited the skill as >5.
 Say: Welcome back to the classic Vocabulary Bingo game! Glad to see you visit {{settings.visitorCnt}} {{pluralize settings.visitorCnt ‘time’}}. It will be more fun this time as there's more to play and practice.

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

To add a display message in a video-enabled voice-assisted device

  1. Click on the Computer icon, and type in a condensed version of the voice message in the field titled Display Message of the Show pop-up window.
  2. Populate the required fields and click the Save button. 
    Title: Vocabulary Bingo
    Display Message: Welcome back to the classic Vocabulary Bingo game! Glad to see you visit {{settings.visitorCnt}} {{pluralize settings.visitorCnt ‘time’}}. It will be more fun this time as there's more to play and practice.

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

18.Now drag and drop another Response component onto the flow canvas and connect the anchor symbol of this Response card to the ‘Otherwise’ on the Check Variable component.
19.Click on the Voice icon of the Response card to open up the Speak pop-up window and type the voice action intended to be spoken to the user to provide a suitable response if the test condition returns false i.e. the Check Variable component upon evaluating the values stored in the system recognizes the number of times the user has visited the skill as 5 or < than 5.
Say:Welcome back to the classic Vocabulary Bingo game! Glad to see you visit {{settings.visitorCnt}} {{pluralize settings.visitorCnt ‘time’}}.

To add a display message in a video-enabled voice-assisted device

  1. Click on the Computer icon, and type in a condensed version of the voice message in the field titled Display Message of the Show pop-up window.
  2. Populate the required fields and click the Save button. 
    Title: Vocabulary Bingo
    Display Message: Welcome back to the classic Vocabulary Bingo game! Glad to see you visit {{settings.visitorCnt}} {{pluralize settings.visitorCnt ‘time’}}.

The interaction flow developed so far had its pathing linked to the Then on the initially configured Check Variable component. Now to complete the rest of the flow, the pathing from the Otherwise of the Check Variable component needs to be developed. 
20. So, now drag and drop another Save Settings component onto the flow canvas.
21.Chain the anchor symbol of Otherwise on the first Check Variable component in the flow that has not been linked to the topmost anchor symbol on the Save Settings component.
22.  Configure the Save Settings component by adding the key-value pair.   
1. To configure add an arbitrary variable name to identify the value stored and assign a corresponding value to be called to function anytime within or beyond a session. Here, the key represents the variable visitorCnt and the value assigned is 1 tocapture and save the initial visit of the user.Set the data typeto Number.

To know more about different data types, click here.

23. Drag and another Response card onto the flow canvas.
24. Link the anchor symbol of the Response card to the Save Settings component.
25.The Response card chained to Save Settings should have a voice message welcoming the new user to the skill. To type the voice action intended to be spoken to the user click on the Voice icon which will open up a Speak pop-up window with a field titled Say.
Say: Welcome to the incredibly fun and thrilling classic Vocabulary Bingo game.  

To add a display message in a video-enabled voice-assisted device

  1. Click on the Computer icon, and type in a condensed version of the voice message in the field titled Display Message of the Show pop-up window.
  2. Populate the required fields and click the Save button. 
    Title: Vocabulary Bingo
    Display Message: Welcome to the incredibly fun and thrilling classic Vocabulary Bingo game.

The screenshot below captures the aforementioned interaction flow.

Testing and Validation

a)Testing for existing user (count >5)
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 the Name field of the Test Response window that shows up.
4.In the Conversation section of the Test Response, the Launch intent through which this interaction flow has been initiated will be auto-generated in the User invokes field.
5.Populate the User Settings sectionfield with the variable as defined in the Save Settings component. Input the variable as visitorCnt and assign a numerical value representing the count of the number of times the user has visited the skill since his initial visit. Here the value assigned is 5, to which value one (+1) will be added internally by means of the counter function applied within the skill. Thus the input of 5 here in the User Settings satisfies the test condition implemented via the Check Variable component i.e. is greater than 5 thereby generating the voice response on the component linked to Then. To test the voice response linked to Otherwise input the numerical value of 4 or lesser.

6. Finally, click the Save button to save the input and perform the test.
7.To validate the Test Response, click on the lightning symbol on the left-hand side of the test case. 

8.On the resultant Test Response window, the blue chat bubble will present the previously input message within the Response component to address the existing user.

Click on the blue chat bubble to see the details of the individual response. 

b) Testing for new user

Repeat the same steps as carried out while performing Testing for existing user (count >5) with the only exception being to leave the  User Settings section empty to validate the response intended for a user visiting the skill for the first time.

To know more about testing an interaction refer https://university.vogovoice.com/kb/testings/

Congratulations! You have successfully created an interaction flow using a visitor counter which will aid in generating a curated voice response for the user based on the number of times he has visited the skill.

👍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 access the tutorial on New vs Returning Users, click here.

Tags:
Was this article helpful?
Dislike 0
Previous: Socrata: Stats by Date
Next: None, One, Many