> For the complete documentation index, see [llms.txt](https://docs.imbee.me/imbee-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.imbee.me/imbee-docs/autobots/elementos/carousel.md). # Carousel ### Estructura El carousel está compuesto por una o mas cards o tarjetas. Cada card se compone de: * msg: Mensaje que se quiera mostrar por pantalla. Debe ser del tipo string. * buttons: Declaración de los botones que se mostrarán en pantalla. Debe ser del tipo array de diccionarios. Cada card puede tener uno o mas botones. * label: La etiqueta del botón que se mostrará en pantalla. Debe ser del tipo string. * payload: Es el valor asociado al botón. Este valor no se mostrará en pantalla. Debe ser del tipo string. * sub\_msg: Dejar vacío por el momento -- FIX -- * image\_url: Url de la imágen a mostrar en el card. Si no se quiere incluir imágen dejar este campo vacío. ```yaml { "msg": "Maravilloso hotel en Filipinas", "buttons": [ { "label": "Reservar", "payload": "hotel_1" }, { "label": "Mas información", "payload": "hotel_1_extra_info" } ], "sub_msg": "", "image_url": "https://i0.wp.com/multisport.ph/wp-content/uploads/2017/10/578140_10150984881636474_2066820904_n.jpg?w=640&ssl=1" } ``` * type: Tipo de elemento. Debe ser del tipo string. * cards: Conjunto de tarjetas a mostrar. Debe ser del tipo array de diccionarios. ```yaml { "type": "carousel", "cards": [ { "msg": "Maravilloso hotel en Filipinas", "buttons": [ { "label": "Reservar", "payload": "hotel_1", "@location": "Filipinas" }, { "label": "Mas información", "payload": "hotel_1_extra_info", "@comodidades": "Piscina, recepción 24 horas y restaurante internacional" } ], "sub_msg": "", "image_url": "https://i0.wp.com/multisport.ph/wp-content/uploads/2017/10/578140_10150984881636474_2066820904_n.jpg?w=640&ssl=1" }, { "msg": "Bonito hotel en Barcelona", "buttons": [ { "label": "Reservar", "payload": "hotel_2", "@location": "Barcelona" }, { "label": "Mas información", "payload": "hotel_2_extra_info", "@comodidades": "Piscina, recepción 24 horas y restaurante internacional" } ], "sub_msg": "", "image_url": "https://www.spain.info/export/sites/spaininfo/comun/carrusel-recursos/cataluna/barcelona-000037111798-istock.jpg_369272544.jpg" }, { "msg": "Excepcional hotel en New York ", "buttons": [ { "label": "Reservar", "payload": "hotel_3", "@location": "New York" }, { "label": "Mas información", "payload": "hotel_3_extra_info", "@comodidades": "Piscina, recepción 24 horas y restaurante internacional" } ], "sub_msg": "", "image_url": "https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" } ] } ``` ### Guardado de variables Este elemento permite guardar datos en variables que estarán disponibles en cualquier punto del flujo del bot. Es posible declarar variables en el apartado *variables* o en cada botón. Para declarar una variable se utiliza @ como clave y el valor se referencia utilizando &. Es posible guardar tanto el payload como el label del botón. En el ejemplo se ve como se está guardando el label en la variable @book\_hotel\_label y el payload en la variable @book\_hotel\_payload. A su vez es posible declarar variables con un valor definido por el usuario, este valor debe ser del tipo string. {% hint style="info" %} Las variables declaradas en los botones solo se guardarán una vez el usuario pulse el botón. Las variables declaradas en el apartado variables se guardaran sin considerar que botón haya sido pulsado. {% endhint %} ```yaml { "name": "hotels", "tags": null, "actions": [ { "type": "carousel", "cards": [ { "msg": "Maravilloso hotel en Filipinas", "buttons": [ { "label": "Reservar", "payload": "hotel_1", "@location": "Filipinas" }, { "label": "Mas información", "payload": "hotel_1_extra_info", "@comodidades": "Piscina, recepción 24 horas y restaurante internacional" } ], "sub_msg": "", "image_url": "https://i0.wp.com/multisport.ph/wp-content/uploads/2017/10/578140_10150984881636474_2066820904_n.jpg?w=640&ssl=1" }, { "msg": "Bonito hotel en Barcelona", "buttons": [ { "label": "Reservar", "payload": "hotel_2", "@location": "Barcelona" }, { "label": "Mas información", "payload": "hotel_2_extra_info", "@comodidades": "Piscina, recepción 24 horas y restaurante internacional" } ], "sub_msg": "", "image_url": "https://www.spain.info/export/sites/spaininfo/comun/carrusel-recursos/cataluna/barcelona-000037111798-istock.jpg_369272544.jpg" }, { "msg": "Excepcional hotel en New York ", "buttons": [ { "label": "Reservar", "payload": "hotel_3", "@location": "New York" }, { "label": "Mas información", "payload": "hotel_3_extra_info", "@comodidades": "Piscina, recepción 24 horas y restaurante internacional" } ], "sub_msg": "", "image_url": "https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" } ] } ], "next_step": [ "if @book_hotel_payload == 'hotel_1' or @book_hotel_payload == 'hotel_2' or @book_hotel_payload == 'hotel_3' : return book_hotel", "if @book_hotel_payload == 'hotel_1_extra_info' or @book_hotel_payload == 'hotel_2_extra_info' or @book_hotel_payload == 'hotel_3_extra_info' : return show_hotel_info" ], "variables": { "@book_hotel_label": "&label", "@book_hotel_payload": "&payload" } } ``` {% hint style="warning" %} Los steps solo admiten un elemento de tipo carousel por acción. Es decir, cada elemento de tipo carousel tiene que tener su propio step. {% endhint %} ### Next step El campo next\_step es indispensable para el flujo del bot, en el caso de los elementos del tipo [input](/imbee-docs/autobots/elementos/inputs.md), [quickReplies](/imbee-docs/autobots/elementos/quick-replies.md), [buttonMessage](/imbee-docs/autobots/elementos/button-message.md), [carousel](/imbee-docs/autobots/elementos/carousel.md) y [webservice](/imbee-docs/autobots/elementos/webservice.md) puede ser del tipo string o un array de strings con condicionales. Si solo se indica un string el bot irá al próximo step sin importar el botón que se haya pulsado ```yaml "next_step": "your_step_name_here" ``` En cambio, es posible variar el flujo del bot dependiendo de la interacción del usuario. Para esto es necesario declarar el valor del next\_step como un array de strings de uno o mas elementos. La estructura del condicional debe ser: **if nombre\_de\_la\_variable == 'valor\_a\_comparar' : return nombre\_del\_step** ```yaml "next_step" : [ "if @book_hotel_payload == 'hotel_1' or @book_hotel_payload == 'hotel_2' or @book_hotel_payload == 'hotel_3' : return book_hotel", "if @book_hotel_payload == 'hotel_1_extra_info' or @book_hotel_payload == 'hotel_2_extra_info' or @book_hotel_payload == 'hotel_3_extra_info' : return show_hotel_info" ] ``` En este caso el label de los botones es el mismo, por lo tanto se utiliza el payload para realizar la evaluación. Las condiciones lógicas admitidas son: * \== : Igual a * != : Distinto a * and == Y * or == O {% hint style="warning" %} Si el valor a comparar es un string se deberán incluir comillas simples **if nombre\_de\_la\_variable == 'valor\_a\_comparar\_string' : return nombre\_del\_step** En cambio si el valor a comparar es un integer NO se deberán incluir comillas simples i**f nombre\_de\_la\_variable == 10 : return nombre\_del\_step** {% endhint %} ### Ejemplo de uso ```yaml { "steps": [ { "name": "welcome", "tags": [ "init" ], "actions": [ { "msg": "Bienvenido al bot de **Imbee**. Por favor selecciona un hotel", "type": "text" } ], "next_step": "hotels" }, { "name": "hotels", "tags": null, "actions": [ { "type": "carousel", "cards": [ { "msg": "Maravilloso hotel en Filipinas", "buttons": [ { "label": "Reservar", "payload": "hotel_1", "@location": "Filipinas" }, { "label": "Mas información", "payload": "hotel_1_extra_info", "@comodidades": "Piscina, recepción 24 horas y restaurante internacional" } ], "sub_msg": "", "image_url": "https://i0.wp.com/multisport.ph/wp-content/uploads/2017/10/578140_10150984881636474_2066820904_n.jpg?w=640&ssl=1" }, { "msg": "Bonito hotel en Barcelona", "buttons": [ { "label": "Reservar", "payload": "hotel_2", "@location": "Barcelona" }, { "label": "Mas información", "payload": "hotel_2_extra_info", "@comodidades": "Piscina, recepción 24 horas y restaurante internacional" } ], "sub_msg": "", "image_url": "https://www.spain.info/export/sites/spaininfo/comun/carrusel-recursos/cataluna/barcelona-000037111798-istock.jpg_369272544.jpg" }, { "msg": "Excepcional hotel en New York ", "buttons": [ { "label": "Reservar", "payload": "hotel_3", "@location": "New York" }, { "label": "Mas información", "payload": "hotel_3_extra_info", "@comodidades": "Piscina, recepción 24 horas y restaurante internacional" } ], "sub_msg": "", "image_url": "https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" } ] } ], "variables": { "@book_hotel_label": "&label", "@book_hotel_payload": "&payload" }, "next_step": [ "if @book_hotel_payload == 'hotel_1' or @book_hotel_payload == 'hotel_2' or @book_hotel_payload == 'hotel_3' : return book_hotel", "if @book_hotel_payload == 'hotel_1_extra_info' or @book_hotel_payload == 'hotel_2_extra_info' or @book_hotel_payload == 'hotel_3_extra_info' : return show_hotel_info" ] }, { "name": "book_hotel", "tags": null, "actions": [ { "msg": "Perfecto, ahora comenzaremos con la reserva de tu hotel en **@location**", "type": "text" } ], "next_step": "goodbye" }, { "name": "show_hotel_info", "tags": null, "actions": [ { "msg": "Este hotel cuenta con las siguientes comodidades: **@comodidades**", "type": "text" } ], "next_step": "goodbye" }, { "name": "goodbye", "tags": [ "finish" ], "actions": [ { "msg": "Gracias por tu reserva, que disfrutes del viaje!", "type": "text" } ], "next_step": null } ], "restart_on_refresh": true } ``` ![Resultado del ejemplo de uso al pulsar el botón "Reservar" del card "New York"](/files/-Ljv7s-dS-jPe0aao-RP) ![Resultado del ejemplo de uso al pulsar el botón "Mas Información" del card "Barcelona"](/files/-Ljv85bI9VcqEL_nblRj) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.imbee.me/imbee-docs/autobots/elementos/carousel.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.