Cómo crear y probar WhatsApp Flows visuales en Meta Playground
En este artículo, aprenderás cómo usar la pestaña Meta Playground para crear y probar prototipos visuales de WhatsApp Flows, sin necesidad de escribir código o integrar la API de WhatsApp. Esta herramienta es ideal para equipos que buscan iterar rápidamente en diseños o flujos antes de implementarlos en producción.
¿Qué es Meta Playground?
Meta Playground es una herramienta proporcionada por Meta que permite a los desarrolladores, diseñadores y equipos de negocio crear y visualizar flujos de mensajes de WhatsApp de manera intuitiva, utilizando una interfaz gráfica en lugar de código.
Con esta herramienta puedes:
- Diseñar flujos de conversación interactivos.
- Probar la experiencia del usuario directamente en el entorno de diseño.
- Exportar los flujos para usarlos en una implementación futura.
Enlace a la herramienta Meta Playground
Beneficios de usar Meta Playground
- Sin necesidad de código o APIs: Perfecto para usuarios sin conocimientos técnicos.
- Iteración rápida: Prueba y ajusta tus flujos en minutos.
- Prototipos realistas: Visualiza cómo se verán y funcionarán tus flujos en WhatsApp antes de lanzarlos.
- Colaboración facilitada: Comparte tus prototipos con otros equipos para recibir retroalimentación.
¿Cómo funciona Meta Playground?
La interfaz de diseño se divide en tres secciones principales:
Pantallas
Aquí se deben agregar y crear todas las pantallas en el orden que tendrá el Flow. Se puede cambiar el órden de las pantallas haciendo clic y arrastrando las mismas del icono de seis puntos.
Editar Contenido
Aquí se crea y modifica el contenido de las pantallas.
Se pueden agregar varios tipos de contenido:
- Texto
- Encabezado grande.
- Encabezado pequeño.
- Pie de foto o vídeo.
- Cuerpo.
- Contenido Multimedia
- Imagen
- Respuesta de Texto
- Respuesta breve.
- Párrafo.
- Selector de fechas.
- Selección
- Opción única.
- Opción múltiple.
- Lista desplegable.
- Activar.
Vista Previa
En esta sección se puede visualizar cada pantalla del WhatsApp Flow, interactuar y probar los textos y botones de las mismas, así como cambiar la configuración visual.
Para probar el Flow funcionando, se debe activar la opción de “Modo Interactivo”.
Nota: se puede configurar visualmente el Flow dependiendo de la interfaz del sistema operativo (Android o iOS) y el tema de fondo (Claro o Oscuro).
¿Cómo exportar el diseño de WhatsApp Flows a Botmaker?
Puedes exportar el prototipo y utilizarlo dentro de la sección WhatsApp Flows en Botmaker.
Luego de crear y finalizar el modelo de WhatsApp Flows:
- Selecciona la opción “Copy Flow JSON”.
- Abre el Editor de Código del WhatsApp Flow en Botmaker.
- Selecciona todo el código existente y eliminalo.
- Presiona Ctrl+V o Clic derecho y “Pegar” para pegar el código de tu diseño.
Nota: considera que esto se trata de un código generado automáticamente por la aplicación y, por ende, no será del todo legible ni amigable a la vista en caso de querer realizar modificaciones a mano sobre dicho código.
Preguntas frecuentes
¿Es necesario tener conocimientos técnicos para usar Meta Playground?No, Meta Playground está diseñado para ser usado por cualquier persona, independientemente de su experiencia técnica.
¿Se puede usar este prototipo directamente en producción?No, Meta Playground es una herramienta para crear y probar prototipos. Los flujos exportados deberán integrarse correctamente con la API oficial de WhatsApp para funcionar en producción.