This article demonstrates how to use the quick replies buttons with postback in Facebook Messenger using Quickwork.

What you'll need:

Skill level: Intermediate

Time required: 12 minutes

• Facebook Page for connecting to Quickwork
• Facebook Messenger to send a message to the connected Facebook Page

Use case

Let's create a small bot on Facebook Messenger where the users can see a list of Formula One teams. Clicking on a specific team will return its details along with the brand logo. To build this use case, we will create 2 journeys as follows:

1. The first journey will be triggered whenever the user sends a new text message. The journey will enlist the Formula One teams as the quick reply buttons.
2. The second journey will be triggered when the user clicks a specific Formula One team. The execution will be transferred to the journey containing the postback block. This block will provide additional information about the selected Formula one team.

The first journey

Let’s start building the journeys that will trigger whenever a new text message arrives.

Configuring the trigger

1. Create a new journey named New message on Facebook Page.
2. Under the Event section, choose the Facebook Messenger app from the drop-down menu present in the Apps field located right below the New Trigger button.
3. Select the trigger event, New text message, from the drop-down menu in the Triggers field.
4. Now to connect your Facebook Page, you can either create a new connection by following the instructions given here or choose an existing connection from the dropdown if you have previously connected your Facebook Page. For instance, I have connected the Facebook Page called Couch Scripter and will be using it throughout all the postback journeys. 
5. Your configured trigger should look like this:

Configuring the action

1. Under the Steps section, click on the Simple Action button and choose the Facebook Messenger app from the drop-down menu present in the Apps list.
2. Select the Send quick replies with postback action from the Actions list.
3. There is no need to create a new connection as a connection for the same app is already present in the same journey.
4. Drag and drop the Sender Id data pill from the Data Tree Output of the trigger to the Recipient field.
5. In the Message text field, specify the text you want to send to the user and the quick replies. E.g., Welcome to the Sports World. Select your favorite Formula One team from the given options:
   
   
   
   
6. Now, fill in the details for the Text quick replies block. The Text quick replies block contains four input fields:
   1. Title: The title of the postback button. Specify the name of the Formula One teams here as per our use case. E.g., Red Bull Racing.
   2. Post-back payload: You can add data about the postback button you are configuring. This field supports string and JSON objects. Let’s add the description for the Red Bull Racing team. 
   3. Image URL: Add publicly available image URL of the Red Bull Racing team. E.g., https://images-na.ssl-images-amazon.com/images/I/61Gx5sD-hSL._AC_SL1500_.jpg. It must be in the .jpg, or .png format and must be a small URL else the journey execution will result in an error.
   4. Block name: The block name drop-down menu won't show any names yet. The second journey that we are going to create has the provision to create the block name. Those names appear here as an item. For now, let’s keep this field untouched. Your first quick reply item shall look like this:
      
      
      
      
7. Now click on the Add New Item button. Another block will open in which you can add a new quick reply button for McLaren. Specify the following data in the input fields:
   
   

   Input fields	Data
   Title	McLaren
   Post-back payload	McLaren Racing Limited is a British motor racing team based at the McLaren Technology Centre in Woking, Surrey, England. McLaren is best known as a Formula One constructor and is the second oldest active team, and second most successful Formula One team after Ferrari, having won 182 races, 12 Drivers' Championships, and 8 Constructors' Championships. Visit https://en.wikipedia.org/wiki/McLaren for more information. Send Back to return to the main menu.
   Image URL	https://hyperpix.net/wp-content/uploads/2020/06/mclaren-logo-font-free-download-856x484.jpg
   Block name	The second journey that we are going to create has the provision to create the block name. Until then let's keep this field empty.

8.  The second quick reply button will look like this:
   
   
   
   
9. You can configure more quick reply buttons for the Formula One teams in a similar way.
10. Now click on the Save Changes button to save the journey. 

The second journey

Now let’s build the second journey which will send the postback payload to Facebook Messenger as per the option selected by the user.

Configuring the trigger

1. Create a new journey named Postback Payload via Facebook Messenger.
2. Under the Event section, choose the Facebook Messenger app from the drop-down menu present in the Apps field located right below the New Trigger button.
3. Select the trigger event, New Postback message, from the drop-down menu present in the Triggers field.
4. Now, connect to the same Facebook Page that we connected to in the previous journey.
5. Once connected, the Enter Block Name field will appear. Specify the name of Formula one teams here. Your trigger shall now look like this:

Configuring the action

1. Under the Steps section, click on the Business Logic button and choose the If Condition option.
2. In the Left Value field, drag and drop the Title of Button data pill from the Facebook Messenger | New Postback message trigger under the Data Tree Output.
3. Choose the condition as Equals.
4. Now in the Right Value field, let's write the title of the first quick reply button we configured in the previous journey i.e., Red Bull Racing. With this field, we have completed configuring If Condition:
   
   
   
   
5. Now let’s configure two actions for this quick reply button; one for sending brand logo image and another for sending the quick reply button data we configured in the first journey.
6. To do so, choose Facebook Messenger as the app from the drop-down and choose the action as Send an attachment. The app will get connected to Quickwork.
7. Select the Attachment type as Image and Attachment source as URL.
8. Drag and drop the Sender Id data pill from the Data Tree Output of the Facebook Messenger | New Postback message trigger to the Recipient field.
9. Specify the image URL of the brand logo in the Attachment URL field. The action under the IF Condition will look like this:
   
   
   
   
10. Now, let's configure the second action under the If Condition. To do so, clone the above action we just configured and change the action to Send message.  
11. Select the Message type as Response.
12. Drag and drop the Sender Id data pill from the Data Tree Output of the Facebook Messenger | New Postback message trigger to the Recipient field.
13. Similarly, drag and drop the Data data pill from the Data Tree Output of the Facebook Messenger | New Postback message trigger to the Message Text field. The action will look like this:
    
    
    
    
14. Ensure both the actions are indented under the If Condition. In this way, we have completed configuring the If Condition and associated data for our first quick reply button, Red Bull Racing.
15. Similarly, configure the If Condition and two actions under it for McLaren. After successful configuration, the complete journey structure will look like this:
    
    
    
    
16. Save this journey and click the Save & Start button.

Note: Configure the postback data for each quick reply button you wish to create. If you wish to create 5 quick reply buttons in the first journey, then 5 postback data must be configured in the second journey with proper IF Condition and intended actions.

Connecting the postback block

This is the crucial part of our use case. We need to select the block name in the first journey that we configured in our second journey:

1. Go back to the New message on Facebook Page journey and open the Send quick replies with Postback action present under the Steps section.
2. Scroll and find the Block name field present in the first and second quick reply items. Toggle the drop-down and select the postback block that we created in the second journey i.e., Formula one teams:
   
   
   
   
3. Do the same for the second quick reply item as well.
4. Now click the Save Changes button and start the journey by clicking the Save & Start button:

Execution

Open Facebook Messenger and then open the page with which you have linked your connections while creating journeys in your Quickwork account. Send Hi to begin the conversation. Refer to the following image and see the complete execution: