Este articulo veremos como crear y usar un flow en textit..
IMPORTANTE: Algo a tener en cuenta es tener algunos conocimientos previos en Textit. También en APIs y peticiones HTTP.
¿Qué es un flow?
Un flow es como será la interacción de nuestro "chatbot" con un usuario. Esto se puede ubicar en diferentes aplicativos como Whatsapp o telegram, o por SMS.
Crear un flow
En el apartado FLOWS seleccionamos 'Create flows'.
Entonces ahora, escribimos un nombre, seleccionamos en tipo 'Messaging', la keyword no pondremos nada, y seleccionamos el idioma...
Variables
Las variables nos ayudan para guardar datos que necesitemos manejar.
Variables que no se necesitan
Este campo es para el caso de que en una ventana no vamos a usar la variable, pero es obligatorio usar en la ventana.
Entonces usamos un nombre como NULL o Null o también Not o VOID o cualquier nombre que de a entender que no se usara y el valor no nos importa; pero en la ventana 'call webhook' usaremos el nombre conexión para que al momento de probar podamos entender el resultado de la acción. Esto es el caso de las obligatorias, en las demás no pondremos nada.
Variables propias
Para crear una variable solo hay que, por ejemplo: en la ventana 'wait for response' escribiremos el nombre de nuestra variable, como: resNombre...
Ahora para usarla debemos seguir el patrón de Textit. Entonces queremos mostrar el nombre en un ultimo mensaje entonces escribimos: @results.nombreVariable ejemplo visual:
Y así con cualquier variable creada por nosotros, importante recordar esto. También recordar que estas variables solo vivirán en el flow y no se usaran por fuera de el.
Variables de textit
Trae variables propias, estas también son usadas al importar grupos (los grupos es un tema fuera de este articulo) y se escriben siguiendo el patrón. @contact.nombreApartado así podemos acceder a la variable.
También podemos crearlas, eso lo hacemos en la ventana 'update the contact', en la parte donde elegimos la variable, solo tenemos que escribirla en vez de elegirla, y además aparecerá una opción de 'create contact field' y listo...
Estas variables son. digamos, "globales" se pueden usar en otros flows, y esto va de la mano con los grupos.
Variables de call webhook
Cuando usamos una ventana de petición http lo que se obtiene se guarda en un nuevo tipo de variables, y se hace así: seguimos el mismo patrón, @(webhook.records[0].fields.nombre) entonces se necesita una explicación:
Webhook: es la variable en donde se guarda lo que se obtiene en la petición.
Records: es la lista de los valores, recordemos que lo mas probable es que obtengamos muchos. Entonces si queremos acceder al objeto uno pues usamos records[0]. Se pueden mostrar toda la lista así: @(webhook.records) pero eso si. no sale muy bonito, ilegible para el usuario.
Records[1]: este es el objeto 2 de la lista y tiene tres componentes (se puede mostrar toda la información de ese objeto en especifico, asi: @(webhook.records[1]) eso si no sale muy bonito):
Algo a mencionar es que si se obtiene solo un dato, records deja de existir y se pasa directo a fields, ejemplo: @(webhook.filds.nombre).
CreatedTime: la fecha y hora exacta de su creación.
fields: donde están los apartados que nosotros creamos.
Id: el identificador único del objeto.
Fields: aquí están nuestros datos, nombres, teléfonos, direcciones, etc... Entonces para poder acceder a algo en especifico usamos: @(webhook.records[0].fields.apartadoEspecifico). También podemos mostrar todo de golpe (eso si se muestra como una lista) así: @(webhook.records[7].fields).
Hay que mencionar que si usamos de nuevo otra petición http esta variable se actualiza, entonces para no perder la información hay que guardarla o volverla a pedir. Se debe usar los paréntesis para que funcione, ya que es una "operación" y tienen que ir asi para mostrar el valor deseado.
Ventanas del flow
• 'Send message'
Esta ventana envía un mensaje al usuario.
Las partes mínimas son: el tipo de ventana y su mensaje.
• 'Wait for response'
Esta ventana espera una respuesta del usuario para dirigir el camino adecuado para el usuario.
Las partes mínimas para su función son: el tipo de ventana, las respuestas y la variable.
Las respuestas es: que vamos a recibir del usuario, en el ejemplo (para actualizar) permitimos recibir: | a | o | actualizar | (podemos agregar mas, las que necesitemos, eso si tienen que estar separadas por un espacio) también se puede elegir que vamos a recibir, si son letras, numero etcétera.
La categoría es el como la llamaremos, la categoría es la que se mostrara en el flow.
La variable guardara lo que haya escrito.
Al anterior imagen es como se ve en el flow, como podemos denotar, las categorías son las que se ven, también aparece otra opción de manera automática 'Other' esta opción es para los errores, es cuando lo que digite el usuario no esta dentro de las opciones.
• 'Call Webhook'
Esta es una de las ventanas mas importantes. Se trata de una ventana que opera de manera similar a las peticiones HTTP.
Los campos mínimos son: el tipo de ventana, el tipo de petición http, la url de una API, y la variable, HTTP headers y body.
La imagen anterior es como se ve en el flow, entonces hay dos opciones, 'sucess' es cuando el proceso se logra satisfactoriamente. 'Failure' es cuando falla, podemos dar algún mensaje o repetir el procedimiento, según nuestra necesidad-
Para GET:
GET es para obtener datos...
Seleccionamos en el tipo de petición GET, y agregamos la URL de nuestra API, ahora la variable guardara la respuesta del código de estado del procedimiento, por ejemplo, si es 200 es un correcto. Les recomiendo llamar esta variable conexión ya que normalmente no se usa, si la usaras... Cambiar el nombre a uno único.
En HTTP headers: pondremos los encabezados, según su API pondremos la clave de la API para poder usarla en 'Authorization'. Agregamos 'Content-Type' para definir el tipo de contenido: y escribimos 'application/json' para definirlo como JSON.
En GET body: no pondremos nada ya que es un GET.
Para POST:
POST es para crear...
Seleccionamos en el tipo de petición POST, y agregamos la URL de nuestra API, ahora la variable guardara la respuesta del código de estado del procedimiento.
En HTTP headers: pondremos los encabezados, según su API pondremos la clave de la API para poder usarla en 'Authorization'. Agregamos 'Content-Type' para definir el tipo de contenido: y escribimos 'application/json' para definirlo como JSON.
En POST body: aquí usaremos un formato JSON de AIRTABLE (es el sistema api que esta en todos los ejemplos, puede que la forma de escribir jsons cambie)...
{ "fields": {
"Nombre": "@results.resNombre",
"Edad": @results.resEdad,
"Direccion": "@results.resDireccion"
} }
Entonces para crear un nuevo, en esta caso cliente, necesitamos usar campo 'fields' que es para definir los componentes del cliente, luego pondremos según los campos en nuestra API, en el ejemplo hay tres: nombre (texto), edad (numero), dirección (texto). En cada casilla pondremos el valor dependiendo del valor, entre comillas van los tipo texto, y los tipo numero van sin comillas.
Para PATCH y PUT
PATCH es para actualizar parcialmente, es decir solo los campos editados. PUT es para actualizar borrando y recreando todo el objeto.
Seleccionamos en el tipo de petición PATCH o PUT, y agregamos la URL de nuestra API, ahora la variable guardara la respuesta del código de estado del procedimiento.
En HTTP headers: pondremos los encabezados, según su API pondremos la clave de la API para poder usarla en 'Authorization'. Agregamos 'Content-Type' para definir el tipo de contenido: y escribimos 'application/json' para definirlo como JSON.
Algo a mencionar es que, si logran denotar, en la url esta un id... Este id se obtiene por un GET y lo guardamos en una variable. La pasamos por la URL para obtener exclusivamente ese objeto.
En PATCH body: usaremos el formato JSON y de igual manera que en el POST editaremos.
{ "fields": {
"Nombre": "@results.resNombre",
"Edad": @results.resEdad,
"Direccion": "@results.resDireccion"
} }
Entonces para editar, en esta caso cliente, necesitamos usar campo 'fields' que es para definir los componentes del cliente, luego pondremos según los campos en nuestra API, en el ejemplo hay tres: nombre (texto), edad (numero), dirección (texto). En cada casilla pondremos el valor que queremos editar.
Para DELETE
DELETE es borrar un objeto...
Seleccionamos en el tipo de petición DELETE, y agregamos la URL de nuestra API, ahora la variable guardara la respuesta del código de estado del procedimiento.
En HTTP headers: pondremos los encabezados, según su API pondremos la clave de la API para poder usarla en 'Authorization'. Agregamos 'Content-Type' para definir el tipo de contenido: y escribimos 'application/json' para definirlo como JSON.
En la URL también necesitamos el id del objeto, esto se logra por haber hecho un GET anteriormente.
En DELETE body: no tenemos que escribir nada.
• 'Enter de flow'
Esta ventana hace que otro FLOW se ejecute, por ejemplo, uno de soporte.
• 'Update the contact'
Esta ventana actualiza variables que ya vienen en textit entonces tomamos una variable precreada (nosotros también podemos agregar nuestras variables en este apartado) y le guardamos el valor de otra variable temporal.
• 'Save flow results'
Esta ventana ayuda a actualizar variables del tipo 'results' esto cuando queramos cambiar un resultado manualmente u otra cosa.
Entonces en el campo Result seleccionamos la variable (la variable esta solo las que creamos dentro del flow, no las de contacto).
En el campo Value es lo que vamos a guardar, por ejemplo un texto: No selecciono.
Otra cosa importante: es que podemos poner todo un json para se mas dinámicos y hacer mas fácil el proceso de uso de la ventana call webhook.
• 'Send email'
• Otras ventanas
Las ventanas vistas anteriormente podemos hacer bastante con ellas, próximamente el articulo se actualizará para añadir otras ventanas.
Pruebas dentro de Textit
La plataforma nos da una herramienta para poder probar nuestro chatbot. A la derecha hay un botón verde con un icono de celular.
Al darle clic aparecerá un teléfono móvil y ejecutara nuestro flow automáticamente.
Para reiniciar le damos al botón central del móvil en la parte inferior.
Además, si vemos la imagen anterior tendremos una especie de caja de texto, ahí escribiremos las respuestas u otra cosa que necesitemos hacer. Además hay un clip que este permitirá enviar otro tipo de respuesta. Como imágenes, videos, etc...
Si ya fueron de curiosos... Se habrán dado cuenta de una arroba en la derecha, si le dan clic, aparecerá todas los tipos de variables y demás que maneja textit.
Subir una imagen
