Buttons
How to create buttons? How to attach a link to the button? How to add buttons without creating arrows? Read the answers to these questions in the article below.
Buttons are one of the most intuitively easy to use elements of chatbots.
By adding buttons to a message we simplify the task for the user - they can press a button and move to a needed block no matter their answer. If the user doesn’t press a button but sends the same as a written text they still move to the needed block.
First let’s look into messengers that support buttons’ use (Telegram, Viber, Facebook messenger, Instagram, Whatsapp business).
They support two types of buttons: the ones that appear below the chat box (keyboard buttons/reply) and the ones that are inside the text (inline).
How to create buttons
Buttons can be created two different ways - by using the buttons’ settings in the needed block or by using arrows in between blocks. The first one is more functional and convenient in use.
To create buttons from a block you need to open the needed block’s settings where you need to press “Buttons settings”:
Here you’ll see two switches - “Show buttons” and “Show arrows like buttons”. We flip the second switch to ‘off’ and then press “Add button”.
This window will open:
Here in the “Text” section you need to write the text that will be shown on the button.
Next you press “Add” and return to the block where you now have advanced button settings.
Buttons can be ‘Keyboard’ (they disappear after pressing on them or after typing the text of the keyboard) and ‘Buttons in text’ (they don’t disappear after pressing).
The bot reacts to both of these the same way.
Let’s create a new button by pressing the plus ‘+’ icon in settings.
And onto more settings!
Create two more blocks connected to our ‘buttoned-up’ one. You need to click the right mouse button on the arrow to open its settings (or you can hover on top of it and then press the gear). Turn off the “Display like a button” setting.
You can also turn it off in the block's setting "Show arrows like buttons"
Next you move the cursor to the “Condition” section. There you will be offered options that are written down in your buttons:
You can write down the condition yourself or choose from the suggested ones. This is what we have for now:
You can move the buttons and put them in line just by dragging it in place.
How to create a button without arrow extending
Imagine this: you have a menu in your bot and you need two different blocks to have a “Back to the menu” button. So to do that without extending arrows all over the workflow you need to do the following:
open the ‘menu’ block settings and change its type to “Primary condition check”
write in the same block the name of the button that will lead to this block
As you can see, the tab “Condition” has two conditions in it - the block will be triggered by either. You can add several conditions for moving into this block, they just have to be separated by a semicolon (;) symbol e.g. ‘menu;back to the menu;go back to the menu’
In the needed blocks you create a button:
How to create buttons in text
To create them you need to chose in their settings “Buttons in text”:
This is how the buttons look like in Telegram:
Again, you can move them however you’d like by moving them in settings: just drag them to the desired place!
How to create buttons with a link
To create a button with a link you need to add a button and in its settings write the link where, when pressed, it will lead to:
Now when the button is pressed the link will open (and then stay in the chat):
You can also add a variable where the link is situated instead of putting in the link itself.
How to color the button in
If needed, you can color the button in - this works in Viber.
You can use any color in Viber; to choose just press the black square in the button’s settings.
How to create a button ‘Request the phone number’
This works in Telegram and Viber
When creating the button you need to select ‘Request the phone number’
When the button is pressed this window asking to agree to share the number will open up.
When the client agrees to share the number it will be transferred to the bot as a message from the client.
The phone number will automatically be written down in the variable ‘phone’.
How to create a button ‘Request geolocation’
This works in Telegram and Viber
When creating the button you need to select ‘Request geolocation’
After the client agrees to share their location the bot will get a message with their latitude and longitude.
They will automatically be written down in the variables ‘latitude’ and ‘longitude’
How to create a ‘Share’ button
Works only in Telegram
When creating a button, choose ‘Share (Telegram only)’ and fill in all tabs.
When this button is pressed the client chooses who from their contacts they want to share the info with. After selecting their victim the text from the ‘Transmitted information’ tab will be copied. This way any data and link can be transmitted.
How to set up the button to open your Web App
There are three types of buttons for opening your web app:
Button in text
Keyboard button
Button in the bot’s menu
For the first two options you create a button and choose the Telegram Web Application. In the text field paste the text on the button and in the link field - the link to your Web App.
After creating the button, choose what type exactly you want it to be
If you don’t specify the type, then the button becomes the keyboard type automatically. The difference is only in its type, the button works the same way for any of the three types.
Here’s also an example of creating a button through the advanced button settings.
Inline button:
[{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"here is the link to your app"}]
Keyboard button:
[{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"here is the link to your app"}]
The third button type is created in the calculator:
tg_set_chat_menu_button(type, text, web_app_url, platform_id), where:
type - optional parameter, in which you set one of three button types (“default”, “commands”, “web_app”); text - optional parameter; if the type wasn’t chosen, then you paste here the button text; web_app_url - optional parameter; the link to your web app (is used only if you chose type “web_app”); platform_id - optional parameter; it lets you target one specific dialogue with a user if you, for whatever reason, wish to display the button only for a specific person
Here is an example of a button for opening the web app:
tg_set_chat_menu_button('web_app', 'Web app', 'here is the link to your web app')
As a result you get the button next to the input field that is always visible:
The result of pressing any of the three buttons is the launch of the web app through the bot in a separate window.
Don’t forget that your web app needs to be set up in a specific way. You can find recommendations from Telegram developers here: Web Apps for Bots
How to replace buttons in WhatsApp
Let’s now select our greeting green block and press “Buttons settings” in the “Editing a message” settings. A tab “Tooltip in messengers without buttons” will show up
The text added to the “Tooltip in messengers without buttons” tab will show up only in messengers that don’t support buttons, Whatsapp in particular
This is how you use it: let’s type in this field the text that will let the person easily understand what they need to send to move to the desired section and let’s see how this looks in Whatsapp
This is not the whole thing though. To make sure the condition for moving to the next block still works for other messengers we need to put in the numbers with the semicolon symbol between the original condition.
The example above shows that the move to the next block happens with both conditions: either with the phrase, or with the number.
The official Whatsapp Business does support buttons, you can read more on them in this article:
How to configure the buttons manually
Now let’s look into the more difficult way of creating buttons. Everything will happen in the section “Advanced button settings” in the “Editing a message” tab.
Let’s change the white block types to the Primary condition check type and write in their conditions the text that is stored in their buttons. Now let’s delete all the arrows and type the following text in the advanced button settings:
[{"type": "reply", "text": "What services we can provide", "line": 0, "index_in_line": 0}, {"type": "reply", "text": "Payment info", "line": 0, "index_in_line": 1}, {"type": "reply", "text": "Our contact info", "line": 1, "index_in_line": 0}, {"type": "reply", "text": "Leave an application", "line": 1, "index_in_line": 1}, {“type”: “inline”, “text”: “Go back”, “line”: 0, “index_in_line”: 0}]
You’ve now got the same menu but without the arrow connections. If everything is done correctly, then by pressing the button from such a menu you’ll get a message from the right block-answer
All of the possible button settings in this tab
text - the button text (the only mandatory parameter); url - the link through which the move will happen when pressing the button (in TElegram works only as inline - in text buttons); color - the button’s color; line - the line’s number (if its value isn’t mentioned the buttons will stack on top of each other); index_in_line - the button’s position in line; type - this parameter takes value either reply (keyboard button), inline (text button), location (requests location) or phone (requests phone number); one_time - if this parameter takes value of 1 then the keyboard buttons won’t get deleted after the message is sent (works only for reply type buttons).
To create a button with a url you need to mention the parameter url with other settings staying the same with regular buttons:
[{"type": "inline", "text":"google link", "url":"https://google.com"}]
Which limitations exist
Facebook and Instagram
On Facebook and Instagram there is a limited number of buttons you can use: 12 reply-buttons (keyboard) and 3 inline (inside the text).
On Instagram you can place links ONLY in inline-buttons.
Viber
In Viber there is a limited number of buttons you can use: 24 reply-buttons (keyboard) and 7 inline (inside the text).
Both inline and reply
Sometimes, when using both inline and reply buttons in one block, a message saying “Choose a variant” will appear in the chat in Telegram, while other times the buttons won’t work at all. To avoid this from happening, don’t use both button types at the same time.
So, now you know how to easily create buttons in different messengers in different messengers, which lets us to create functional bots.
Last updated
