Ya hemos debatido en otras ocasiones sobre cómo los chatbots pueden ser o no las nuevas apps, cómo Facebook se está inspirando en Telegram y WeChat para su estrategia de comercio conversacional y bots, de qué alcance podría tener la tendencia en un futuro cercano y nos hemos puesto prácticos explicando cómo crear tu bot en Telegram, aunque no sepas programar (si quieres seguirnos por Telegram haz clic aquí, nuestro bot es muy majo). Y ahora toca aprender cómo crear un bot para Facebook Messenger sin programar.

Como era de esperar, Facebook anunció el pasado 12 de abril su apuesta por los bots (entre otras muchas cosas, también se abrieron los Instant Articles, que ya usamos en 2geeks1city, por cierto).

Y hace unas pocas semanas que ChatFuel, (herramienta para crear bots de origen ruso que pretende posicionarse como la herramienta por defecto para crear bots para todos los que no sabemos programar), ya permite crear tu propio bot para Facebook Messenger.

Sobre ChatFuel hay que decir que la plataforma ha evolucionado mucho desde que la empezamos a usar con Telegram. Han hecho un gran trabajo. Se merecen nuestros aplausos (aunque sigan rechazando respondernos a una entrevista, no les guardamos rencor).

Esto no quiere decir que estén solos, hay otras plataformas como Botsify o Api.AI que buscan cosas parecidas. Apenas las hemos probado, pero hay otros que lo han hecho y escrito algunos mini-tutoriales.

Y ahora, vamos a ver paso a paso cómo crear un bot para Facebook Messenger con Chatfuel. Y sí, sin saber programar.

¿Para qué puedes usar tu bot de Facebook Messenger?

Algunas ideas:

• Una versión ligera de tu web (no es la idea más ambiciosa del mundo, pero por algo se empieza).
• Enviar el menú del día a tus clientes.
• Construir una novela interactiva o una aventura «conversacional» sencilla.
• Hacer minijuegos / concursos interactuando con tus usuarios, tu bot y web.
• Construir un asistente de ventas.
• Enviar las noticias de tu web, canales sociales y otras novedades.
• …

Si esta u otras opciones te parecen interesantes, sigue leyendo.

Antes de empezar

Aquí sólo vamos a cubrir la parte «técnica» de la creación del bot. Pero en realidad hay una parte muy importante que nos vamos a saltar: pensar para qué queremos hacer este bot, cómo lo vamos a usar y cómo podrá usarlo nuestro usuario o cliente.

Aunque sea la parte por la que deberíamos empezar no lo haremos, principalmente por dos razones:

• Cada caso es único y debe ser analizado por separado. Algunos querrán tener un bot que republique las noticias de su web, otros una «web ligera» de su tienda, otros querrán hacer una novela interactiva como iniciativa de branded content…
• La barrera de entrada de creación de un bot para Facebook Messenger con Chatfuel es tan baja que nos podemos permitir experimentar por el mero placer de hacerlo. No vamos a gastar un duro, vamos a trastear y, con suerte, al conocer las posibilidades de la plataforma se nos ocurra (o no) alguna idea.

Entiendo el rollo de «la estrategia primero» (y generalmente soy el primero en promoverlo), pero tiene sentido sobre todo cuando vamos a invertir algo. Aquí sólo será un poco de tiempo, que sí, es un bien muy preciado, pero de verdad, que será muy poco.

Damos por hecho que tenéis Facebook Messenger y, como no, cuenta de Facebook

El que no, que se abra una cuenta en Facebook (hace mucho tiempo que no conozco a nadie que se haya tenido que abrir una) y se descargue Facebook Messenger (en realidad no es necesario descargarlo, pero tiene más gracia para las pruebas).

El dashboard de Chatfuel

Home de Chatfuel

Vamos a Chatfuel.com y entramos en Dashboard, en la esquina superior derecha. Hay que verificar el login / registro mediante Facebook.

El dashboard es donde tenemos guardados nuestros bots ya creados o podemos crear nuevos.

Crear un bot para Facebook Messenger

Tenemos 3 opciones:

Creación de chatbot

• Un bot «en blanco».
• Un bot tutorial, creado para que entendamos cómo se crean.
• Un bot complejo de ejemplo, que simula un restaurante.

Aunque aquí explicamos todo el proceso, es buena idea trastear un poco. Los bots estarán en modo borrador, por lo que no vamos a romper nada. Os recomendamos crear un bot de cada tipo (en blanco, tutorial y complejo), con nombres fácilmente reconocibles, como «bot en blanco» o «bot complejo». Nos referiremos a ellos a lo largo de este tutorial.

Podéis probar en cualquier momento estos bot de ejemplo entrando en ellos y haciendo clic en «Send to Messenger».

Una vez creados podemos editar el nombre, borrarlos o moverlos dentro de otros bots pulsando en los puntos suspensivos:

Editar bots para Facebook Messenger

Los estados de un bot

Tenemos 4 estados en un bot que hayamos creado con Chatfuel:

• Borrador (los que acabamos de crear para el ejemplo están en ese estado). En el primer estado, «borrador» es en el que trabajaremos a lo largo de este post. Aquí nadie puede interactuar con nuestro bot, aunque podemos probarlo en cualquier momento pulsando en «Send to Messenger», como decíamos hace nada.
• Conectado a la página de Facebook y la aplicación de Facebook. Podemos probar el bot con testers (a los que tendremos que dar de alta en la aplicación de Facebook que creemos para conectar con nuestro bot).
• Aplicación pendiente de revisión. Estás esperando a que Facebook revise tu bot. No deberías hacer cambios importantes (quieren asegurarse de revisar la última versión).
• Producción: cuando ya tenemos el bot conectado a la página de Facebook a través de nuestra aplicación. Aquí, al fin, los usuarios podrán interactuar con nuestro bot.

Aclaración: un bot de Facebook es una extensión de las funcionalidades de tu página. Cada bot tiene que estar enlazado a una página: es como si los usuarios chatearan con tu página. Y, además, cada bot debe ser manejado por una Facebook App.

Más información sobre los estados del bot y lo que permite cada uno en este enlace.

Entendiendo el proceso de creación del bot para Facebook Messenger

Bot de Facebook Messenger en Chatfuel

Los bots de Chatfuel tienen 5 partes principales y una sección de ayuda:

• Estructura: aquí es dónde «construimos» y damos forma a la mayor parte del bot. Sería algo parecido a un árbol de navegación en webs o de pantallas en una app. La parte más importante de todas.
• Emisión: donde se programan mensajes o se envían en el momento a los usuarios, como si de una página se tratara.
• Inteligencia Artificial: aunque quizá sea un poco ambicioso referirse a esto como «AI», en este apartado podemos crear reglas de respuesta según las palabras que escriba el usuario.
• Promoción: esta parte se activa cuando ya tenemos el bot listo y publicado (después de testarlo, claro)
• Ajustes: aquí configuramos la zona horaria, conectamos nuestra página de Facebook o conectamos el bot a una app propia de Facebook (que primero habría que crear, explican el proceso paso a paso en la propia sección).

Lo realmente imprescindible será definir la estructura, aunque si el bot está pensado para un blog o un medio de comunicación, la parte de emisión (broadcasting) será igual de importante.

La parte de «inteligencia artificial» puede dar mucho juego, pero hay que dejar claro que en realidad se basa en reconocer expresiones similares a las que definas y ofrecer respuestas preprogramadas, no vamos aquí a preparar un HAL 9000, aunque puede dar juego.

Empecemos por la estructura.

Definiendo la estructura de tu bot en Facebook Messenger

Aquí vamos a crear tarjetas («cards», de distintos tipos y que son los elementos más sencillos con los que vamos construyendo todo), bloques (que pueden tener una o más tarjetas) y grupos (que agrupan varios bloques) interrelacionados.

La jerarquía sería algo así:

Grupos > bloques > tarjetas > elementos de la tarjeta

Teniendo en cuenta que cada bloque puede estar en uno o más grupos, pero las tarjetas son propias de cada bloque.

Para ver un ejemplo, podemos cargar el bot complejo que venía de prueba y compararlo con el bot en blanco:

Estructura de un bot en Facebook Messenger con Chatfuel

La «prueba compleja», que no es más que el bot que venía de ejemplo simulando un restaurante, tiene varios grupos de bloques y distintos bloques dentro de cada uno de ellos.

Pero ambos tienen algo en común, una especie de «introducción«: una respuesta por defecto y un mensaje de bienvenida.

Por hacer una analogía, sería algo parecido a la home de una web: el punto de entrada del usuario (que sí, que ya sé que en realidad muy pocos usuarios entran directamente por la home, pero para que se entienda).

Con el mensaje de bienvenida y la respuesta por defecto estamos haciendo algo muy importante: definiendo cómo será la interacción con nuestro bot: más o menos transaccional, informativa, interactiva…
Aquí es donde la falta de planificación de la que alardeábamos al principio del post nos pasará factura: no hay nada más horrible que tener que llenar una página en blanco cuando no sabemos qué contar.

¿Qué estructura vamos a dar a esto si no sabemos ni lo que queremos hacer? ¿Cómo va «a hablar» nuestro bot si no hemos pensado el tono de voz que queremos que tenga? En fin, dudas que cada uno tendrá que resolver por su parte (aunque nos podéis contar vuestro caso en los comentarios y trataremos de ayudaros) y que aquí vamos a simplificar mucho: vamos a desarrollar paso a paso un ejemplo que nos muestre las opciones de las que disponemos, sin ningún propósito en especial.

El bot de nuestro ejemplo:

• Nos mostrará un mensaje de bienvenida y nos dará un enlace a un menú.
• Nos dará una respuesta (siempre la misma) cuando intentemos interactuar con él.
• Cuando entremos en el menú podremos ver 3 enlaces a nuestra web con los mejores posts.
• Hará una pregunta al usuario y nos enviará el resultado por mail.
• Mandará una foto al usuario.
• Mostrará nuestro último tweet
• Le dirá en un texto quiénes somos.

Como veis, con lo de arriba cubrimos una casuística que sirve para casi cualquier web «ligera», una serie de opciones que le expliquen a alguien qué hacemos y que les permita contactarnos por otro canal. No es la cosa más original del mundo, pero es un comienzo.

Empecemos eligiendo «Welcome message» en el menú de arriba a la izquierda, donde pone «Built-in blocks».

• Este es el mensaje de bienvenida que pondremos: «Hola, soy un bot de prueba y no puedes esperar mucho de mí. Pero te iré enseñando todo lo que puedo hacer. Puedes llamarme FaneBot». Sí, podéis poner el nombre que queráis.
• Después creamos un botón que se llame «Menú».

Ahora añadiremos una respuesta por defecto. La respuesta por defecto sirve para guiar al usuario y gestionar sus expectativas. Un mal ejemplo sería hacerle creer que nuestro bot «piensa» (dejémoslo en que reacciona de distintas formas a distintas expresiones) cuando en realidad no lo hace y como, al menos de momento, no vamos a añadir Inteligencia Artificial dejaremos esto claro.

Este es el mensaje por defecto que puedes definir en «Built-in Blocks», pulsando en «default message»:

Hola, todavía no me han puesto Inteligencia Artificial.
Mi creador es un vago. Así que de momento, sólo puedes darle al menú y ver opciones. O puedes comentar en este enlace para presionar a mis creadores: https://www.2geeks1city.com/es/crear-bot-facebook-messenger-sin-programar/

Debajo añadiremos otro botón «Menú». Que de momento, no hace nada.

En breve nos ocuparemos de eso.

Añadiendo grupos, bloques y tarjetas

Como decíamos, tenemos grupos, bloques y tarjetas:

• Tarjetas (cards): son los elementos «básicos» de construcción. Como veremos en el próximo punto, puede haber de varios tipos (foto, formulario…) y según el tipo, pueden contener varios elementos y botones que las enlacen con bloques.
• Bloques: en un bloque podemos incluir varias tarjetas para formar un flujo de navegación.
• Grupos: son agrupaciones de bloques que nos permiten organizar todo de forma coherente.Los grupos no son del todo necesarios, pero nos servirán mucho para no perdernos.

Las tarjetas son el elemento básico más importante. Veamos sus tipos.

Tipos de tarjetas

Hay 5 tipos de tarjetas:

Tipos de tarjetas en un bot de Facebook Messenger

• Galería. Nos permite una serie de «mensajes» con título, subtítulo, imagen y una url.
• Texto. Hasta 320 caracteres de texto.
• Imagen. El bot devuelve una imagen, sin más.
• Formulario. Una de las funciones más interesantes: el usuario puede interactuar y enviarnos información, ya sea por mail o por otros métodos.
• Plugin. Ahora mismo, tiene integración con IFTT, para Twitter, Youtube, Instagram y RSS.

Las tipo galería y texto pueden incluir hasta 3 botones.

Construimos un menú paso a paso y algunas funciones básicas

Volviendo a nuestro bot, vamos a crear el «Menú«, que servirá para guiar las acciones del usuario.

Tendrá estas opciones:

• Accede a la lista de los mejores posts.
• Quiénes somos.
• Ver la foto preferida del creador de este bot.
• Deja tu opinión.
• Ver la última publicación de Twitter.

En tres pasos:

1. Para crear el menú creamos un «Grupo» pulsando en el botón «+Add Menu» de la barra de la izquierda, con el nombre cada uno quiera.
2. Después creamos un «bloque», pulsando en el + de dentro de nuestro grupo. Igualmente, el nombre es optativo, pero algo como «Menú Principal» es fácilmente recordable.
3. Finalmente añadimos una «tarjeta» (card) tipo «Gallery» y escribimos las opciones una a una, poniendo subtítulos (e imágenes si queremos, no lo he hecho por no alargar más el ejemplo) y añadiendo a cada una un botón al final.

Debería quedaros algo así:

El Menú Principal de nuestro bot de prueba en Facebook Messenger

¿Recordáis ese botón que llamamos «Menú» en el mensaje de bienvenida que definimos al principio? Pues lo enlazaremos a este bloque, de manera que cuando alguien vea el mensaje de bienvenida y pulse el botón venga a este menú.

Para ello, volvemos a seleccionar la caja de «Welcome» en el menú de la izquierda (arriba del todo) y seleccionamos el botón de «Menú» y pulsamos en el símbolo que está a su derecha, al lado del símbolo del enlace. Al hacerlo podremos elegir el bloque de menú que acabamos de crear.

Ahora toca crear cada uno de los bloques

Las 3 primeras opciones del menú son tan sencillas que no necesitan demasiada explicación.

Cómo crear la selección de mejores posts o de enlaces

Para la opción 1, la selección de mejores posts, bastaría hacer otro bloque y elegir una tarjeta  tipo «Gallery«, ahí podríamos añadir cualquier tipo de enlaces (también externos) con imágenes, títulos y subtítulos.

Cómo crear un «quiénes somos» con una tarjeta de texto

El «quiénes somos» sería un bloque con una tarjeta tipo «Texto», algo que no tiene ninguna complicación.

Cómo enviar una foto al usuario desde nuestro bot

Para enviar una foto, basta con definir un bloque con una tarjeta tipo «Imagen» y subir la foto que nos apetezca, sin más.

Eso sí, recordad que es importante no olvidar poner siempre botones que devuelvan al mensaje de bienvenida o a otro bloque.

Las otras dos funciones tienen un poco más de «misterio», así que las explicamos aparte.

Cómo recibir información de los usuarios de nuestro bot: tarjetas tipo «Form»

Para el «déjanos un mensaje» usaremos un bloque con una tarjeta «form«.

En ella tenemos varias opciones, usaremos el correo electrónico por ser la más sencilla: con esto, recibiremos las respuestas del usuario en el email que definamos.

En tres pasos:

1. Escribimos el mensaje que dará nuestro bot al usuario y a su lado definimos la variable donde se almacenará la respuesta del mismo.
2. En resultado elegimos «Email» y escribimos la dirección donde queremos recibir las respuestas (mejor que sea un email que funcione, obviamente),
3. Añadimos un mensaje de agradecimiento (abajo del todo) y un botón que devuelva al usuario al menú.

Como veréis en «Result» hay otras opciones disponibles además del email. Son:

• Enviar al usuario a una URL con los resultados como un parámetro de la query. Habrá que preparar nuestra web para que lo reconozca y devuelva un mensaje apropiado.
• Callback, para enviar los datos vía JSON (aquí ya se me va de las manos, y si no eres desarrollador seguramente te pierdas también).

Cómo republicar el contenido de canales sociales en el bot de Facebook Messenger: tarjetas tipo Plugin

Para la última opción de nuestro bot, mostrar la última publicación de nuestra cuenta de Twitter tendremos que crear una tarjeta tipo «Plugin«: como hasta ahora, creamos un bloque y dentro del mismo añadimos una tarjeta nueva, eligiendo esta vez el tipo «Plugin».

De momento sólo se puede integrar con YouTube, Instagram, Twitter y RSS. Que no es poco. Se hace vía IFTT, por lo que es esperable que se añadan más recetas a lo largo del tiempo y que haya más integraciones.

Para poder usar esto primero hay que crear una cuenta en IFTT (suponiendo que no tengamos) y luego activar la receta siguiendo las (fáciles) instrucciones.

Integración del Bot en Facebook Messenger con Twitter

Básicamente es seguir los pasos uno a uno:

1. Crear cuenta en IFTT.
2. Copiar el enlace que nos dan.
3. Hacer clic en el enlace «Twitter recipe» y pegar el enlace que nos habían dado en el paso 2.

Y casi listo…

Hasta aquí hay que recordar que sólo hemos tocado uno de los pilares de la herramienta. Todavía nos quedaría por explorar la Inteligencia Artificial y la parte de Broadcasting, que combinadas con lo anterior puede dar mucho juego.

Las veremos por encima.

Envía tu mensaje: broadcasting

Una funcionalidad clave y básica es poder enviar mensajes a los «suscriptores» (o amigos) del bot.

Se pueden mandar mensajes en el momento o programarlos (en general, más cómodo). Los mensajes pueden ser texto, galerías o plugins con las actualizaciones de redes sociales. Cualquier tipo de tarjeta, menos el «Form». Para enviar un form tendrás que mandar un mensaje «normal» con un botón enlazando al formulario.

Enviar mensajes con un bot de Facebook Messenger

Dale alma a tu bot en Facebook Messenger con «algo» de Inteligencia Artificial

Y finalmente, una de las funciones que más juego puede dar. Como ya hemos dicho varias veces, llamar «IA» es exagerar un poco, pero no deja de ser interesante. Podemos crear frases y bloques de palabras a los que ofrecer determinadas respuestas. Por ejemplo, si alguien escribe «horario» podemos enseñarle el horario de la tienda.

Inteligencia Artificial en un bot de Facebook Messenger

Y todo esto, sin salir del borrador

Con todo lo que llevamos hecho y… Todavía nadie puede usar nuestro bot. De momento es sólo un borrador que nosotros podemos probar para ver cómo funciona. Pero es eso, un borrador.

¿Qué nos faltaría?

• Pulsar (después de haber revisado que todo funciona) «send to Facebook».
• Crear (si no lo hemos hecho) una aplicación de Facebook.
• Seguir paso por paso el asistente de Chatfuel para conectarlo.

Aquí lo explican con más detalle, pero ChatFuel te guía bien por los pasos necesarios.

Ten en cuenta que tendrás que esperar unos días hasta que Facebook apruebe la aplicación (entre 2 y 7 días).

Si quieres que cubramos más en profundidad alguna de las partes déjanos un comentario, comparte este post por redes sociales o pídelo en el formulario de contacto.

Más información:

• wwwhatsnew.
• Cómo crear un bot en Telegram sin programar con Chatfuel.
• Sección de ayuda de Chatfuel.
• Política de Facebook Messenger.

Imagen: Pixabay.

Also published on Medium.