Example: creating a Survey chatbot

This is a simple chatbot that asks whether you want to complete a quick survey. It demonstrates how to use the Card and Action interaction types. In this example, we will start by setting up the action.

Survey bot

Note: This is a more advanced example that assumes you already know about Questions and Messages. For an introduction to these, see Example: creating a Contact Us chatbot.

Step 1: Create the action

In this example, you start with the action that defines the content of the survey. The action defines what is shown on the Card. Starting with the Action means that it will already exist when you create the Card interaction.

Result of step 1

Result of Step 1

To create the action interaction:

At the project level, click Create New, select Chat Bot followed by Create New Bot. Select the Project, then enter the Communication Name. For example call the bot Survey.
Drag an Action on to the c.
In the Name of Interaction field, give the action a meaningful name. For example getSurveyCards.
Select Set Variable as the Action Type. In this example we will use the Set Variable action to define the card as static JSON.
Leave the Intent and When the User Says fields empty. The action will be called directly by the card.
Click the Settings tab to go to a page where you can copy, paste and edit code.
The variable that will contain the list is defined like this, and is accessed through the context object:
```
context.surveyCards = [
]
```

Copy the following code to define the variable that will contain the list, and the two cards.

context.surveyCards = 
[
    {
        "title": "Sundaes",
        "subtitle": "With chocolate and cream",
         "image_url": "https://free-images.com/sm/3786/ice_cream_fruits_dessert.jpg",
         "buttons": [ 
            {"type": "postback", "title":"Chocolate", "payload":"flavor1"},
            {"type": "postback", "title":"Vanilla", "payload":"flavor2"},
            {"type": "postback", "title":"Strawberry", "payload":"flavor3"}
        ]
    },
    {
        "title": "Cones and tubs",
        "subtitle": "Wider choice of flavors",
        "image_url": "https://free-images.com/sm/6472/ice_cream_ice_cream_0.jpg",
        "buttons": [ 
            {"type": "postback", "title":"Ice creams", "payload":"type1"},
            {"type": "postback", "title":"Sorbets", "payload":"type2"},
            {"type": "postback", "title":"Frozen yogurt", "payload":"type3"}
        ]
    }
]

There's more information about this in JSON format for cards.

Click OK to save the action.

Step 2: Create the card

Having created the action that defines the card, you are now in a position to create the card itself.

Result of step 2

Result of Step 2

To create the card:

Drag a Carousel interaction on to the canvas.
Enter the Name of Interaction. For example survey.
Leave Intent and When the User Says empty. You do not need to enter anything here because the Card will be displayed as the result of the user selecting a button (that you will create later).
Select Get Cards By Action.
Link the Card to the action you created earlier, by selecting getSurveyCards from the Action for list of cards dropdown.
Enter the Variable containing the list, which will return the list of cards. For example, surveyCards if you are following the example.
Click OK to save the Card.

Step 3: Create a message with a delay

This message will appear before the card is displayed. It provides some introductory information so that the user knows what to expect from the survey. The short delay gives the user time to read the message before the card is shown.

Result of step 3

Result of Step 3

To add a message with a delay:

Drag a Message interaction on to the canvas.
Name the message. For example about survey.
Leave the Intent and When the User Says fields empty because this message is only displayed when the user selects the previous button (not yet created).
In Respond to user, enter the information that you want the user to see before the card is shown.For example This survey is about the type of ice cream that people prefer.
Link the message to the Card, with a short delay before the Card appears:
In Run Action, select the Card. For example getSurveyCards.
Click OK.

Step 4: Create a question with two buttons

Create a question interaction that will ask the user whether they can take part in the survey. It provides two button responses:

Result of step 4

Result of Step 4

To create the question interaction:

Drag a question interaction into the canvas.
In the Name of Interaction field, enter the question's name. This is the label that displays in the canvas. For example enter time for survey.
In the When the User Says field, enter the text that will trigger the interaction to run. For example enter start.
In the Respond to user field, enter the text that will be sent to the user. For example enter Do you have time for a quick survey?
The next step is to define the two buttons. Click the Answers tab.
Select the answer format Set up Button/Quick Reply Answer.
Define the first button:
1. Click + Answer to add a button.
2. In Display, enter the label for the button, such as Yes, 2 minutes.
3. In Next, select the about survey message. Selecting this button will show the message created earlier.
Define the second button:
1. Click + Answer to add a button.
2. In Display, enter the label for the button, such as Not right now.

Step 5: Create the closing message

This step creates a message that is shown whenever anyone clicks any of the buttons in the survey. The Message interaction is not directly linked to any of the other interactions on the canvas.

Result of step 5

Result of Step 5

To create the closing message:

Drag a Message interaction on to the canvas.
Give it a meaningful name. For example thank you.
In When the User Says, enter the values that will trigger this interaction to appear. These values could be the display names of the buttons on the Card (the title attribute) or the payload values (the payload attribute). For example enter the payload values: flavor1, flavor2, flavor3, type1, type2, type3
In Response Text, enter the message that you want to show to the user after they click one of the buttons in the survey.