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.
{"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.
{"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.
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.
{"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" }}
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.
Next step
El campo next_step es indispensable para el flujo del bot, en el caso de los elementos del tipo input, quickReplies, buttonMessage, carousel y webservice 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
"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
"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
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
if nombre_de_la_variable == 10 : return nombre_del_step
Ejemplo de uso
{"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}
