Table of Contents

Buttons block

Elisa Updated by Elisa

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.

For Web bots

Buttons Setup

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

Once you add the Buttons block, the configuration tab will open on the left side of your screen.

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 255 characters

Write a message

Here you will be able to add the text that will introduce the user to the buttons.

You have the text options available to click such as bold, italic, emojis, html, header, number and bots, links and more...

You can also add different messages blocks, which will show in different lines as well es Media (photos, gifs or videos). You can read more about the Media block here.

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.

Plain text

Icon

Emoji

Image

Button styles options are currently available for web bots only

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.

External link option is currently available for web bots only
Buttons options (advanced):
Buttons alignment

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

Horizontal

Vertical

Randomize order

You can set a randomized order of the Buttons option

For example, this is the order that you have set up on your bot's flow

And this is how it will show in random order when the user interacts with it:

Searchable options

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

Multiple choices

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

When using this option, make sure to Any of the above output to the the block you want the user to see next, otherwise the bot will stop there.

Check out this article to read more about Any of the above output to 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.

Advanced options (buttons alignment, randomize order, searchable options and multiple choices) are currently available for web bots only
Fields in the Multiple Choice option

You can save the fields 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" text in the next example "Choose at least 1 and up to 4" according to your settings:

To change this text to your own language, as it's automatically set in English, you have to do it through Custom System messages following these steps on the Settings of your bot:

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

Save answers in the field

As in any other block, the answers will be stored in the field you assign to the Buttons block.

The fields can be saved as:

  • Text
  • Boolean
  • Date
  • Number
  • Multi Choice (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 fields 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 field must be added in the following format:

For example let's say our field is @name_of_variable, then we will display it like this:

@{name_of_variable}

For WhatsApp

The Buttons block on WhatsApp will not be displayed the same way as in Web bots, because on WhatsApp there are no buttons, instead 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 field that you create in the Buttons block saves the number and not the option of the text.

Let's look at this example

This is how the Buttons block is set up in your bot's builder:

How it wil appear on the WhatsApp chat:

If you want to select Yes add to the cart ๐Ÿ›’ , you need to type 1 on your WhatsApp chat.

We suggest using these blocks instead on WhatsApp as they do show buttons as part of their display:

  • Reply buttons block (WhatsApp)
  • List buttons block (WhatsApp)

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:

How it will display the Reply buttons on WhatsApp:

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 List buttons block

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

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

Bot builder:

How it will display the Reply buttons on WhatsApp:

The Header and the Footer are optional, but the Text and List Header / CTA is mandatory. You can find more information in the Reply Buttons Block Article.

For Facebook Messenger

The Buttons block works on FB MSN bots but here are some limitationswe need to consider:

  • The Buttons will only be displayed horizontally.
  • The Searchable option, Multiple Choices, Alignment options or randomize options is not available.
  • Buttons can only be created as 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 ๐Ÿ˜…

Bot builder:

How is will display on Messenger:

  • The Buttons block in Messenger bots has a limitation of up to 14 buttons (Any of the above output 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 on 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.

Let's look at what will happen If you enter more than 20 characters on a button

Builder:

How it will be displayed on Messenger:

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

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

Connecting the Any of the above 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 (This is a FB Messenger limitation):

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

Was this article helpful?

Ask for a Name block

Contact