The “Carousel” component allows grouping information in cards and enables users to navigate between them to make choices.
Each card can present an image, title, description, and buttons, as the example shows:
To add a “Carousel” 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 Carousel 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.
-
Cards [6]: Each card will present the following options:
- “Image Url” [8]: Enter the URL of the image you will be adding to the web chat.
- “Title” [9]: Add the title of the card.
- “Description” [10]: Optionally, add a description of the card.
Add cards (maximum of 10) by clicking the Add card button (+) [7]. You will need to fill in the “Image URL”, “Title” and “Description” fields for each of the cards you add. You can also switch their order by dragging the card and dropping it in the preferred position.
- Label [11]: 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 [12]: 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 button is clicked. 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.
Click Add button [13] and add up to 3 buttons. When doing it, you can define the settings as desired.
- Wait for contact answer [14]: When set to its “ON” position, this toggle will require a response provided by the user to continue the interaction on the webchat’s interface.
-
- Store in a variable [15]: In this field, 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 [16].
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.