The “Button” component can be used in your automation to communicate actions that users can take and to help them make choices while interacting with an Autopilot on your web chat, as shown in this example:
To add a “Button” component to your flow, please follow the steps below:
1. Click on a Autopilot model and select Automation designer [1].
2. You will be taken to the “Automation Designer” tab inside the “Builder app”, where the flow configuration will take place.
3. Under “Digital components”, select the Button component [2] and then drag it to a canvas on your right side [3].
4. Double-click the component. Then, the component settings panel [4] will appear.
5. Enter the required details of the component:
- Component name [5]: The name of the component.
- Message [6]: A message to be conveyed to the user on the chatbot’s interface.
- Label [7]: The name of the button. Since the user will use this button to express a decision, it is convenient that the label's name is sufficiently clear to get the message across.
-
Action Type [8]: Reflects actions in the form of a message or value taken by the webpage, and passed on to the chatbot when the user clicks the button. Depending on the option you select, additional options will be displayed:
- Postback: This option will enable the “Postback message” field, in which the user can enter the message that will be displayed on the screen after the user clicks the button. This message is shown as if the user had typed it and can be used to trigger flows. It can also be used to store responses in a variable, through the activation of the “Wait for contact answer” option. Please see the relevant section below for more information.
- Open URL: When the user selects this option, the “URL” field will be displayed, so that you can enter a URL that the user can click to be redirected to a webpage.
- Call to number: If you wish to provide users with a phone number on the interface of the chatbot, you can select this option and then add the number to the “Number” field that will follow.
You can use up to 10 buttons by clicking Add button [9] and defining the settings as desired.
- Wait for contact answer [10]: when set to its “ON” position, this toggle will require that an answer is provided by the user to continue the interaction on the webchat's interface. In it, you should create a variable that will represent and store a value and an action associated with the button selected in the “Buttons” section.
6. Click Save [11].
After the component is created, you can connect it with another component. Keep in mind that if the component is not directly or indirectly connected to a “Flow Trigger” component, it will be ignored when the flow is executed.
When finished configuring the component and the flow, you can use the Simulator to have a preview of how the interaction will be carried out in your web chat.