How to create, configure, and send postback buttons to Telegram?

This article demonstrates how to create, configure, and send postback buttons to a Telegram bot using Quickwork. 

What you'll need:

Skill level: Intermediate

Time required: 8 minutes

• Journeys:
  1. 1. To send the postback buttons
     2. To define the block and the logic
• Triggers:
  1. 1.  Telegram - Get new message: To trigger the first journey
     2.  Slack - New button clicked: To create a block and execute the logic 
• Actions:
  1. 1. Telegram - Send button: To send buttons to a Telegram bot 
     2. Alpha Vantage - Get quote: To fetch the stock market data
     3. Telegram - Send message: To send information when a button is clicked
• Telegram Android/iOS app
• A bot in Telegram
• A block to call the actions upon clicking the postback buttons

What is a postback button?

A postback button, when tapped, invokes the actions configured in the other journey. It then performs the complete execution as per the logic defined within the actions of that journey.

Usecase

Display the stock market information of Apple, IBM, and Amazon whenever a user clicks the associated postback buttons sent to a Telegram bot. 

Creating the first journey

Let's create the following three postback buttons clicking which the user gets the appropriate information:

1. AAPL
2. IBM
3. AMZN

Configuring the trigger

1. Under the Event section, choose the Telegram app from the drop-down menu in the Apps field present right below the New Trigger button.
2. Select the trigger event, Get new message, from the drop-down menu in the Triggers list.
3. Click the Link an account button to connect to a bot on Telegram. Click here to know how to connect.
4. The Allowed message types input field will open when the connection gets established successfully. Select All Message Types as an input to this field:

Note: Ensure you start the Telegram bot that you have connected with Quickwork otherwise the journey won't be able to send the messages:

Configuring the action

1. Under the Steps section, click on the Simple Action button, and choose the Telegram app from the drop-down menu in the Apps list.
2. Select the Send button action from the drop-down menu in the Actions list.
3. The above Telegram bot will get connected automatically with Quickwork and the associated input fields will open.
4. In the Message field, enter the message you want to send to the bot. E.g., Click to get the stock related stats:
5. In the Chat ID input field, drag and drop the Id data pill under the Chat object from the Data Tree Output:
   
   
   
6. Now, let's start adding the postback buttons. To do this, scroll down to the Button section. In the Title field under the Item object, enter AAPL. This is the name of the button.
7. In the Callback data field, enter AAPL. This field will extract all the information related to Apple's stock price.
8. In the Block name field, select the name of the block that the postback button should call once clicked. Currently, this will be empty as we are yet to create the block:
   
   
   
   
9. Now, click the Add New Item button to create the postback button for IBM stock. The Item 2 block will appear. In the Title field under the Item 2 block, enter IBM. This is the name of the button.
10. In the Callback data field, enter IBM. This field will extract all the information related to IBM's stock price.
11. In the Block name field, select the name of the block that the postback button should call once clicked. Currently, this will be empty as we are yet to create the block:
    
    
    
    
12. Now, click the Add New Item button to create the postback button for Amazon stock. The Item 3 block will appear. In the Title field under the Item 3 block, enter AMZN. This is the name of the button.
13. In the Callback data field, enter AMZN. This field will extract all the information related to Amazon's stock price.
14. In the Block name field, select the name of the block that the postback button should call once clicked. Currently, this will be empty as we are yet to create the block:
    
    
    

In this way, we have successfully configured the first journey with three postback buttons. Save the changes. However, we are yet to define the block name.

Note: Use accurate abbreviations of the stocks in the Callback data input field. Misspelled stock names give an error during the execution. 

Configuring the second journey

Now, let's create a second journey to configure the block name and build logic that should be called when any of the postback buttons is clicked.

Configuring the trigger

1. Under the Event section, choose the Telegram app from the drop-down menu in the Apps list present right below the New Trigger button.
2. Select the trigger event, New button clicked, from the drop-down menu in the Triggers list.
3. Select the existing Telegram bot to establish the connection. Then, click the Link account button.
4. Enter the name of the block in the Block Name field. E.g., Postback buttons for stock market:
   
   

Configuring the Get quote action

1. Under the Steps section, click on the Simple Action button and choose the Alpha Vantage app from the drop-down menu in the Apps field.
2. Select the action, Get quote, from the drop-down menu in the Action field.
3. Click the Link an account button. The Connect to Alpha Vantage window will appear. Enter the API key to get connected. Click here to know how to connect.
4. Upon successful connection, the symbol input field will open. In this input field, the name of the equity has to be called. Since we have defined all the three equity buttons under the Callback data input field in the previous journey, simply drag and drop the Callback Data data pill from the trigger response of Telegram | New button clicked under Data Tree Output:
   
   

Configuring the Send message action

1. Click the Add a step button (+ icon), click on the Simple Action button and choose the Telegram app from the drop-down menu in the Apps field.
2. Select the Send message action from the drop-down menu in the Actions field.
3. The same Telegram bot account will get connected automatically. Upon successful connection establishment, the input fields will open.
4. In the Chat ID input field, drag and drop the Id data pill under the Chat object from the Telegram | New button clicked Trigger under Data Tree Output:
   
   
   
   
5. Now, let's configure to display appropriate messages on Telegram when a user clicks any on the postback buttons. To do so, drag and drop the following data pills from the Alpha Vantage | Get quote under Data Tree Output:
   
   1. Symbol
   2. Open
   3. Low
   4. High
   5. Volume
      
      
      
      
6. Format appropriately as shown in the above screenshot.
7. Select None in the Parse Mode field.
8. Now save the changes and start this journey:

Selecting the block name

Now, return to the Send button action of the first journey. Scroll down to the Block name input field. You can now see the block name in the drop-down menu:

Select the same for all three postback buttons and start this journey:

Note: To get the block name in the drop-down menu, the associated block name journey must be in the execution state else no name will be reflected.

Executing the journey

Send a message to the Telegram bot, say Hello. The three postback buttons will pop up. Tapping them will give you the stock market information. Refer to the following GIF for a better understanding of journeys' execution:

In this way, you can create numerous postback buttons of your choice and associate them with logic as per your business requirement. 

Hence, we have successfully implemented the function of the postback buttons in a Telegram bot.