Table of Contents

Buttons block

Anna P Updated by Anna P

For Landbot (Web)

If there's something that makes Landbot special it is how you can use Buttons to create efficient, engaging, and easy-to-follow experiences.

Buttons are elements your users can click to move on to the next block in the conversation.

Buttons Setup

To create a Buttons type block, drag and drop the green dot and select Buttons:

Then, you can add more messages to the question by clicking on the "+" symbol and create buttons by typing in anything within the pink rectangles.

Press Enter to add more Buttons and drag them to change their position.

If you click on the three dots at the top right of the block you'll open the full Buttons block configurator, which looks like this:

You'll see a bunch of things to configure here, but let's go step by step!

Note: The text of the buttons has a maximum limit of 100 characters

Advanced Buttons Editor: Here you can add content (cogwheel), re-arrange (dots columned), and delete (bin icon) buttons. Click on the cogwheel to configure each button:

Button Style

Choose what type of media you want to add to your buttons: plain text, an icon, an emoji, or an image.

Final view in Landbot 3:

(a) Plain text

(b) Icon

(c) Emoji

(d) Image

If you want to redirect your users to an external URL whenever they click a button, enter it here! Check out this article to see more about how this feature works.

Warning: the URL must be an HTTPS:// otherwise you will get an error that will not allow you to save changes.

Final view in Landbot 3:

Buttons options (advanced):
Advanced options are currently available for web bots only
Buttons alignment

When you have several buttons, you may want to change their alignment from horizontal to vertical. Try the style that looks better!

Final view in Landbot 3:

(a) Horizontal

(b) Vertical

Randomize order

You can set a randomized order of the Buttons option

  • Builder:
  • Final view in Landbot 3:
Note: This option is only available in bots Web v3.
Searchable options

When you provide +10 options, turn this feature on so users can start typing and filter among all the Buttons showed!

Final View in Landbot 3:

Multiple choices

Let your users select more than one option by clicking on the toggle.

When using this option, make sure to Connect the Default output to the next block to make sure that the bot flow will continue.

Check out this article to read more about the Default output and use it correctly.

Also, in the Multiple Choice, you can Set min/ max options:

When using the Multiple Choice and you want your users to choose more than one option, but you want to save their choices as an Array in a Google Sheet, you can achieve this by using a Formulas block right before the Google Spreadsheet block:

Replace(Replace(Replace(@checkbox,"[",""),"]",""),"'","")

You can also check this article with more information on how to build a list out of an array.

Note: This option is only available in bots Web v3.
Variables in the Multiple Choice option

You can save the variables in Array so you can reuse the information saved in Dynamic data and show it in Buttons or cards.

But keep in mind that if you click on "Save output as Array" you have to save the variable of the Button in Array as well

Custom system message of the Multiple Choice option (Set min/ max)

You can also customize the "Choose the min and max" in the next example "Choose at least 1 and up to 4" according to your settings:

To change it you have to do it through Custom System messages following these steps:

  • Settings
  • Custom system messages
  • Help texts
  • Multi-option range help

Example:

Final view in Landbot 3

  • minimum of 3 options:

Save answers in the field

As in any other block, the answer (click[s]) will be stored in a variable. Set it up here!

You can save the variable of the Buttons in these formats:

  • String
  • Array
Note: if you click on "Save output as Array" in the Multiple choice you have to save the variable of the Button in Array as well
How to display variables as the button text

It's possible to use variables as button text if you want it to be dynamic, instead of a fixed value. The variable must be added in the following format:

@{name_of_variable}

For WhatsApp

Is not possible to use the Buttons block on WhatsApp because those will be displayed as a numbered list of choices, so the valid answer to this type of question will be typing the number corresponding to your choice.

The variable that you create in the Buttons block saved the number and not the option of the text.

Builder:

WhatsApp chat:

If you want to select Yes add to the cart 🛒 , you need to type 1 on your WhatsApp chat.

Nevertheless, we have these solutions:

  • Reply buttons block (WhatsApp)
  • Keyword options
  • Set a variable block
Example with Reply Buttons block (WhatsApp)

Before using the Reply Buttons block, please keep in mind that:

  1. You can only add 3 buttons.
  2. Hyperlinks are not allowed
  3. Users cannot select more than one option at the same time from the button message, but they can go back and re-open a previous message.

Bot builder:

Chat:

The Header and the Footer are optional, but the Text is mandatory. You can find more information in the Reply Buttons Block Article.
Example with Keyword Options

Before creating the Keywords, please keep in mind that:

  1. It works with single words (one word for each field, like in the picture above) and emojis ✅
  2. Keywords are not recognized if the user types the Keyword + punctuation to the word ❌
    If the user types a keyword, but he adds some punctuation (, . ! ?) with no space between, the keyword won’t be recognized.
    For Example, the keyword is yes
    User input: Yes I do ✅
    User input: Yes, I do ❌
  3. It Doesn't work with phrases or 2 or more words in the same field ❌
  4. It Doesn't work with variables ❌

Bot builder:

WhatsApp chat:

For more information related to Keyword Options, please click on this article.
Example with Set a Variable block:

Builder:

If you want to save the text (Button option) in a variable, you have to add a Set variable block on each option to give it the value (text).

To do it you need to create a variable and use the same variable on each Set variable block:

Builder:

WhatsApp chat:

For more information about the Set a Variable block, click on this article.

For Facebook Messenger

Limitations Buttons block in the Messenger bots:

  • The Buttons will only be displayed horizontally.
  • Buttons block in Messenger bots are not compatible with Searchable option, Multiple Choices, Alignment options or randomize options.
  • The Buttons block in Messenger is only compatible in the Text Button format.
    That means Icons, Emojis, Images, and Hyperlinks are not compatible with Messenger bots.

How it looks in the builder:

How it looks in Messenger:

  • Despite the restriction mentioned in the item above, it's possible to Manually insert emojis in the buttons, instead of using the option built-in the Buttons block.
NOTE: For a list of all the types of content you can use in Messenger bots, please see this article.

To insert emojis, there are two options:

1. In case you are using a MAC device you can use the native emoji picker from Apple. To activate it you need to use the combination of the keyboard: Control + Cmd + Space 🚀​

2. In case you are using a non- MAC device on a Chrome Browser you can install a virtual emoji keyboard in the Chrome Store. With the emoji keyboard, you can introduce any emoji you want into your text. 

Please also keep in mind that depending on the device your user is using the emoji you choose could appear differently 😅

This is how it looks in the builder:

How it looks in Messenger

  • The Buttons block in Messenger bots has a limitation of up to 14 buttons (default button included).
    If not all the buttons fit on the screen, you can click on the arrow pointing to the right to see more options.
Warning: If you add more than 14 buttons to the Buttons block, it will not work.

The block will not be triggered, and the bot will stop at this point of the flow.

This is how it looks in the builder:

And this is how it looks, Messenger:

  • The Buttons block has a limitation of 20 characters per button. If the text inside the button exceeds this limitation, it will be cut off.

How it looks in the builder:

(within 20 characters)

(More than 20 characters)

How it looks in Messenger:

(within 20 characters)

(More than 20 characters)

Tip: Always connect the Default button to the next block. Please check out this article to see how to use the Default output correctly!

If the user does not choose a button, and types anything instead, the bot will stop.

Connecting the Default button will prevent this from happening, by allowing the bot to continue. You can even send the user back to that block if you prefer.


Adding images/media to the buttons block text bubble (before showing buttons):

You can add an image to the buttons block in the message bubble, however it will display or show as a link:

It will show as an image if there's text between the image and the buttons, however If the image is added right before the buttons, it'll display the link (messenger limitation):

-To display images in sequence, we suggest using media/message blocks instead:

How did we do?

Reply Buttons block (WhatsApp)

Contact