El componente "Carrusel" permite agrupar la información en cards y que los usuarios naveguen entre ellas para elegir.
Cada card puede presentar una imagen, un título, una descripción y unos botones, como muestra el ejemplo:
Para añadir un componente "Carousel" a su flujo, siga los siguientes pasos:
1. Haga clic en un modelo de Autopilot y seleccione Automation Designer [1].
2. Accederá a la pestaña "Automation Designer" dentro de la "Builder app", donde se realizará la configuración del flujo.
3. En "Digital components", seleccione el componente Carousel [2] y arrástrelo hasta un canvas situado a su derecha [3].
4. Haga doble clic en el componente. Luego, aparecerá el panel de configuración de componentes [4].
5. Introduzca los datos necesarios del componente:
- Component name [5]: El nombre del componente.
- Cards [6]: Cada card presentará las siguientes opciones:
- "Imagen URL" [8]: Introduzca la URL de la imagen que va a añadir al WebChat.
- "Title" [9]: Añada el título de la card.
- "Description" [10]: Opcionalmente, añada una descripción para la card.
Añada tantos cards como sea necesario haciendo clic en el botón Add card (+) [7]. Deberá rellenar los campos "Image URL", "Title" y "Description" en cada una de las cards que añada. También puede cambiar el orden arrastrando la card y soltándola en la posición que quiera.
- Label [11]: El nombre del botón. Dado que el usuario utilizará este botón para expresar una decisión, es conveniente que el nombre de la etiqueta sea lo suficientemente claro como para transmitir el mensaje.
- Action Type [12]: Refleja acciones en forma de mensaje o valor tomadas por la página web y transmitidas al chatbot cuando el usuario hace clic en el botón. Según la opción que seleccione, aparecerán opciones adicionales:
- Postback: Esta opción habilitará el campo "Postback message", en el que el usuario podrá introducir el mensaje que se mostrará en la pantalla después de que se haga clic en el botón. Este mensaje se muestra como si el usuario lo hubiera escrito y puede utilizarse para activar flujos. También puede utilizarse para almacenar respuestas en una variable, mediante la activación de la opción "Wait for contact answer". Para más información, consulte la sección correspondiente.
- Open URL: Cuando el usuario seleccione esta opción, aparecerá el campo "URL", así que aquí pueda introducir una URL en la que el usuario pueda hacer clic para ser redirigido a una página web.
- Call to number: Si desea facilitarles a los usuarios un número de teléfono en la interfaz del chatbot, puede seleccionar esta opción y, posteriormente, añadir el número al campo "Number" que aparecerá a continuación.
Puede utilizar tantos botones como sea necesario haciendo clic en Add button [13]. Al hacerlo, puede definir los ajustes como desee.
- Wait for contact answer [14]: Cuando este toggle está en la posición "ON", requerirá una respuesta del usuario para continuar la interacción en la interfaz del WebChat.
- Store in a variable [15]: En este campo debe crear una variable que representará y almacenará un valor y una acción asociados al botón seleccionado en la sección "Buttons".
6. Haga clic en Save [16].
Una vez creado el componente, puede conectarlo con otro componente. Tenga en cuenta que si el componente no está conectado directa o indirectamente a un componente "Flow Trigger", se ignorará cuando se ejecute el flujo.
Cuando termine de configurar el componente y el flujo, puede utilizar el Simulator para previsualizar cómo se llevará a cabo la interacción en su web chat.