The button block is a type of choice block that presents users with one or more options in the form of buttons. This block enhances user interaction by allowing them to select their preferred option from a predefined list of options.
The button block includes various types, making it versatile for different scenarios, such as:
- Text
- URL
- Image
- Video
- Audio
- Smiley
- Feedback
Selecting the required type ensures that the chosen option is displayed to the user and simplifies the process of building the conversational flow
By allowing users to select one or more options from a predefined list presented as buttons, it ensures clear communication. For example, for an online shopping chatbot where users are prompted to select their preferred payment method, the button block can display buttons labeled with different payment options like "Credit Card," "PayPal," and "Bank Transfer," making the selection process straightforward and user-friendly.
Examples of the output from GC for the Feedback and Smiley button blocks:
1. To add the Button block to the flow, click on the add block icon (+).
2. Choose Button under the Choice Cards section.
If you try to close the block listing without saving the button block, all the unsaved changes will be lost permanently.
3. Choose your preferred button type from the Button Type dropdown.
(To showcase the creation of this block, we have chosen the Image type button)
4. Add the Question in the question field.
5. Choose the Button Selection Type.
- Select the Single Button option if you require the user to select any one option from the given button list.
- Select the Multiple Button option if you require the user to select single or multiple options from the given button list.
6. Add a name for the button in the Button Name field.
Button name can include alphabets, numbers, and all the available symbols in a standard keyboard.
Image size cannot exceed 14 MB
For WhatsApp, Telegram, and Facebook Messenger, the image size cannot exceed 10 MB
7. Either Drag and drop or Browse for the required image.
8. Click Add Button to add as many buttons as you require.
Limitations:
The button count cannot exceed the limit of 75.
The button name character cannot exceed the limit of 200.
9. Add a unique name for your block in the Block name field.
If you enter the name of an existing block for another block, the below error will be displayed.
10. Input variable will auto-populate according to the added block name. You can change it if needed.
11. Adjust the existing Validation Error Message to fit the context of your button block.
12. Click on the Preview block option to see how the block will be displayed to the user.
13. If you are satisfied with the output, click Save and Publish.
Block options:
- If this block is not mandatory for your user to answer, toggle on the option to Skip Block. This option is not available for flows of WhatsApp, Telegram, and Facebook Messenger channels.
- If you want to keep this block as the end of your conversational flow, toggle on the End block option.
Limitations:
The limit for Video, Image, and Audio is 14 MB.
For WhatsApp, Telegram, and Facebook Messenger, the image size cannot exceed 10 MB
- You can duplicate existing buttons.
- Every button name should be unique.
- When duplicating an existing button, all of its content will be copied. You must edit the button's name and change it before publishing the flow.
- This option allows you to delete a button individually.
- Deleting the original button will also delete any duplicates automatically.
- You can rearrange the display order of the buttons.
You can edit a button block whenever required, even after the flow is published or in the drafts section, by following these steps:
1. Open the flow and click Edit.
2. Click on the Button Block, which you may have named differently.
3. Select Edit Block from the displayed options.
4. Make the required changes to the block, then click Save.
5. Publish the flow.
Points to note when editing a button block:
- If you edit a block while an end user is engaged in a live session with the bot, the previous version of the flow will be rendered until they restart the conversation.
- After making changes, you need to republish the flow for those changes to be reflected in an end user's session.
- If a change is made to an input variable, it will be automatically updated across all flows where the variable is used.
The Copy Block option can be used when you need to reuse a block that you previously created. You can copy that block and add it to your flow as it is or edit it according to your needs.
1. Click the Button Block you need to copy.
2. Choose the Copy Block option. The block will be pasted on the clipboard.
3. When you need to paste that block, click the Add block icon (+).
The pasted block will appear on the block listing section and be stated as From Clipboard. 4. Edit the block if required, or simply click Paste.
Points to note when copying a button block:
- The copied button block can be pasted multiple times. If you no longer need to paste it, you can clear the clipboard by clicking on the close icon corresponding to the clipboard option.
- When copying an existing button block, all of its content, including variables, if any, will be copied as it is. You can edit it as required before adding it to the flow. Since the names of each block must be unique, the word '_copy' will be added to the copied blocks automatically; this can be changed if required.
- If you have copied a block and it is in the clipboard, deleting the copied block later will also remove it from the clipboard.
1. Open the flow and click Edit.
2. Click the Button Block, which you may have named differently.
3. Select Delete Block from the displayed options.
4. Confirm deleting the selected block by clicking Yes, Delete it.
5. Save and Publish the flow.
You can use the undo option to restore a deleted block as your following action, but not otherwise.
Points to note when deleting a button block:
- If you delete a block while an end user is engaged in a live session with the bot, the previous version of the flow will be rendered until they restart the conversation.
- After making changes, it is necessary to re-publish the flow for those changes to be reflected in an end user's session.
If the deleted block has dependencies, such as given below, errors will be displayed.
If the deleted block was used to jump to a different flow:
Use Case
A customer visits an electronics website and interacts with the chatbot to inquire about product support. The bot presents a series of buttons, such as "Track Order," "Return Product," and "Warranty Information." By clicking on these buttons, the customer can quickly navigate to the relevant section and receive the information or assistance they need.
Bot input:
Please choose one of the options to get started:
<Track Delivery>
<Return Order>
<Warranty Information>
Input given in the builder:
GC widget's output:
After the user chooses the required service:
Supported channels
The button block is supported in the following channels:
A total of 500 blocks can be added in a flow. If you reach that count, you can use the jump block to create a new flow or delete unnecessary flows.