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.
{
"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.
{
"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
}
Last updated