Compartir:
){kind=small}
Benjamin Aronov es desarrollador de Vonage. Es un constructor de comunidades con experiencia en Ruby on Rails. Benjamin disfruta de las playas de Tel Aviv, a la que llama hogar. Su base en Tel Aviv le permite conocer y aprender de algunos de los mejores fundadores de startups del mundo. Fuera de la tecnología, a Benjamin le encanta viajar por el mundo en busca del perfecto pain au chocolat.
Cabinas de conferencias divertidas e interactivas con Vonage y WhatsApp
Tiempo de lectura: 7 minutos
¿Busca ideas únicas y divertidas para su stand de conferencias? En CityJS India 2024, llevamos los "stands interactivos en conferencias" a un nivel superior con un juego de charadas impulsado por WhatsApp. Diseñado para captar la atención y entretener, nuestro stand se convirtió en un destino de visita obligada al tiempo que activaba a los asistentes a la conferencia en nuestra comunidad y les guiaba hacia las ofertas de nuestra plataforma.
La experiencia interactiva comenzó cuando los asistentes escanearon un código QR en nuestro stand y activaron un agente de IA conversacional de WhatsApp en sus teléfonos. El agente guió a los participantes a través de un juego de adivinanzas con categorías como "Codificación", "Vida de desarrollador" y "Comunicaciones" Después de interpretar sus pistas, los asistentes enviaron fotos, que se subieron a la comunidad de desarrolladores de Slack de la comunidad de desarrolladores de Vonage para la votación. La entrada con más emojis de corazón ganó una moderna mochila LED iluminada, combinando la diversión con una competición amistosa.
WhatsApp Charade Game
Combinando ideas divertidas para las cabinas de conferencias con tecnología punta, creamos una experiencia atractiva, memorable e impactante. Esta demostración puso de manifiesto el potencial de las ideas interactivas para cabinas de conferencias para impulsar una participación significativa y destacar en el ajetreado entorno de un evento. En este artículo, aprenderás cómo creamos nuestro propio juego de cabina de conferencia con WhatsApp usando la plataforma de código bajo AI Studio de Vonage.
The Charades Game Beat Our Conference Goals
Cuenta API de Vonage (enlace a continuación)
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
En primer lugar, creamos un agente de WhatsApp entrante. Para crear un agente, siga las instrucciones que se encuentran en la documentación de AI Studio. Hay tres opciones importantes para nuestro agente:
Tipo: WhatsApp
Plantilla: Empezar de cero
Evento: Entrada
Entonces sólo necesitábamos dos nodos para empezar:
Nuestro nodo Collect Input hace las veces de mensaje de bienvenida y pregunta a nuestros usuarios qué les gustaría hacer. Como sólo tenemos 3 opciones, podemos utilizar botones de respuesta para simplificar y mejorar la UX. Aquí establecemos los valores de los botones a sus 3 acciones: charadas, reglas, crédito gratis. Guarda el valor en un parámetro llamado acción.
A continuación, nuestro nodo de condiciones comprobó nuestra acción contra estos 3 valores y creó 3 puntos de salida que se correlacionaban con nuestros 3 posibles flujos. Veamos el flujo principal, ¡nuestro juego!
WhatsApp Welcome Message
Con cualquier sorteo o concurso, nuestro departamento legal es siempre bastante estricto con nuestra política de Términos y Condiciones. Hemos sido capaces de satisfacer a nuestros colegas legales de una manera bastante simple, sin molestar a nuestros usuarios mediante el uso de otro Nodo de Entrada Recoger y Nodo de Condiciones. El nodo de entrada collect enlaza con los T&C oficiales. Guardamos la salida en un parámetro $CHARADE_CONSENT. Si el usuario estaba de acuerdo, continuaba con el juego. Si no, recibirían un mensaje de "no pasa nada" y serían redirigidos al flujo "Crédito API gratuito".
Simple and Effective Terms and Conditions
Teníamos un último paso de limpieza antes de dejar jugar a nuestros usuarios. Necesitábamos asegurarnos de que la información en WhatsApp era correcta y la mejor manera de contactar con los jugadores en caso de que ganaran la mochila, que almacenaremos en un parámetro llamado $NÚMERO_MÁXIMO. Lo bueno es que como tenemos Parámetros del sistemaya tenemos acceso a los usuarios $NOMBRE_DE_PERFIL y $NÚMERO_TELÉFONO_DEL_REMITENTE.
Guardamos la salida del Nodo de Entrada Recopilar en un parámetro llamado $MEJOR_NUMERO_CONFRIMO. Si el usuario dice que sí, entonces usamos un Nodo Establecer Parámetro para actualizar nuestro $NÚMERO_MEJOR al $NÚMERO_TELÉFONO_DEL_REMITENTE. Si no, entonces usamos otro Nodo de Entrada de Recolección para obtener el número correcto.
User Details Confirmation
¡Por fin los usuarios estaban jugando! Pensé que sería bueno dar a los usuarios algunas opciones diferentes para su charada.
Al principio, sólo creé categorías de codificación como "Conceptos básicos de Javascript" y "Frameworks de Javascript". Sin embargo, las preguntas eran bastante específicas y difíciles. Así que las hice más generales: "Coding Concepts", "Developer Life" y "Communications". La categoría de comunicaciones era para divertirnos con las pistas, pero como Vonage vende API de comunicaciones, era una buena forma de iniciar conversaciones con los asistentes a la conferencia. Un ejemplo de pista era "Recibir una llamada telefónica de un número desconocido".
Users Select a Charade Topic
Almacenamos estas indicaciones en una hoja de Google y luego utilizamos la función id para recuperarlos. Usamos otro Nodo de Condiciones dependiendo de la categoría seleccionada por el usuario.
Charade Prompts Stored in Google Sheets
Cada uno de estos flujos conducía a un Nodo de código personalizado. El nodo de código personalizado emite un NÚMERO_CHARADAEste número se correlaciona con el id de la charada que se almacena en Google Sheets. Por ejemplo, "Coding Concepts" era la charada número 1 a 45, así que usamos el siguiente código en el nodo de código personalizado y la salida a $NÚMERO_CHARADA.
function getRandomInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var randomNum = getRandomInRange(1, 45);
return randomNum;Ahora podíamos utilizar nuestro $CHARADE_NUMBER para buscar la solicitud en la hoja de Google. Sólo teníamos que utilizar un Nodo Webhook usando una petición GET a la Hoja de Google. La configuración de Webhook:
Método: GET
URL: URL de scripts de Google Apps. Por ejemplo https://script.google.com/a/macros/vonage.com/s/AKfycbyQ0gJ5YjK-r6F7ipYfVHbKsW0Riphw4w3IpmoQxoa8X7kZ1iRk_RU6OaqY8V5JVxwysg/exec
Parámetro de consulta:
id : $NÚMERO_CARADA
Mapa de respuestas
Ruta del objeto: [0]["charade_prompt"], Parámetro: $CHARADE_PROMPT
Puedes ver exactamente cómo hacerlo en Cómo crear un punto final de solicitud GET para Google Sheets.
Una vez que recuperamos nuestro $CHARADE_PROMPT de nuestra petición GET a nuestra hoja de cálculo de Google, la enviamos a nuestro usuario y esperamos a que la envíe. Aquí especificamos en el nodo Collect Input que el tipo de mensaje debe ser una foto, de lo contrario, les damos un mensaje de error y les pedimos que lo intenten de nuevo. Almacenamos la entrada en un parámetro llamado $CHARADE_PHOTO.
Users Respond with Charade Photos
El siguiente paso fue enviar ese envío a Slack. Usamos otro nodo Webhook con lo siguiente:
Método POST
Solicitar URL: Nuestra URL del Webhook entrante de Slack. Esta URL se estableció para un canal específico que creamos para el evento llamado #cityjs-charades.
Cuerpo: Hemos añadido algo de formato a nuestro mensaje para hacerlo un poco más agradable.
{ "text": "New submission from $PROFILE_NAME! \nCharade prompt: $CHARADE_PROMPT \n Charade category: $CHARADE_TYPE",
"attachments": [
{ "title": "$PROFILE_NAME submission",
"image_url": "$CHARADE_PHOTO",
"alt_text": "$PROFILE_NAME submission" }]
}Puedes ver paso a paso cómo configurar tu Slack App y Incoming Webhook en Cómo configurar una aplicación Slack.
Y así es como se veía cuando se publicaba un envío en Slack.
Submissions are Automatically Added to Slack
Además de conseguir que los asistentes a la conferencia se activaran con nuestra comunidad de Slack, teníamos el objetivo de intentar conseguir más actividad en las redes sociales. Así que simplemente añadimos un nodo más de Collect Input y dimos a los usuarios la opción de ser tuiteados y, en caso afirmativo, de añadir su cuenta de Twitter para etiquetarlos.
Users Can Opt-In For Twitter Submissions
Tanto si los usuarios aceptaban los tweets como si no, toda la información se almacenaba en una hoja de Google mediante otro nodo Webhook. Esta vez una solicitud POST envió la siguiente información para cada envío: Nombre de WhatsApp, número de teléfono, consentimiento de Twitter, manija de Twitter, enlace a la foto de la farsa y la indicación de la farsa a la que el usuario estaba respondiendo. Puedes ver cómo crear una solicitud POST a Google Sheets para pasar esta información desde AI Studio.
Esta hoja de Google facilitó a un colega la tarea de tuitear toda la información pertinente y también de tener copias de seguridad para más adelante si fuera necesario. También utilizamos esta hoja para comunicarnos con el ganador al final de la conferencia.
Acabamos recibiendo 16 propuestas de Tweets. Estas publicaciones impulsadas por la comunidad han sido muy divertidas y han animado nuestra cronología.
We had 16 Awesome Charade Tweets
Cuando los usuarios terminaban el juego, les preguntábamos si querían volver al menú principal. El objetivo era darles otra oportunidad de acceder al flujo de crédito gratuito de la API. En otros agentes, hemos tenido flujos que llevan a los usuarios a nuestro blog de desarrolladores, a documentación específica o a otras ofertas de la comunidad de desarrolladores, como ofertas de empleo. Puede ver cómo crear bucles y subflujos para organizar mejor su agente.
Add Looping and a Friendly Goodbye Message
El juego de charadas fue todo un éxito. Tuvimos varios participantes que no paraban de volver a nuestro stand para saber cómo les iba y algunos incluso compartieron el enlace de Slack con amigos de fuera de la conferencia para conseguir más votos.
Our Competition and Backpack Winner
Sin embargo, hubo algunas mejoras para la próxima vez. En primer lugar, teníamos varios códigos QR diferentes en nuestro stand. Es importante recordar que, en el stand, es posible que solo tengas la atención de alguien durante unos segundos, así que las cosas deben ser lo más sencillas posible. Yo simplificaría la experiencia eliminando los flujos "Cómo jugar" y "Crédito API gratuito". Durante la construcción, me pareció una buena idea, pero en la vida real, casi nadie hizo clic en ellos, sino que se limitaron a hacer clic en "Jugar" y lo descubrieron o nos preguntaron en persona.
En la misma línea, yo simplificaría mucho las instrucciones para las charadas. Cuando lo estaba construyendo, temía que los jugadores recibieran las mismas instrucciones repetitivas. En realidad, fue mucho peor: creé 85 instrucciones, pero muchas eran demasiado difíciles de representar en fotos.
En una conferencia anterior, utilicé un agente de AI Studio para hacer "citas rápidas" digitales que emparejaban a distintos asistentes. Esta vez he creado un juego de charadas. Pero esto no ha hecho más que empezar. Ya estoy pensando en más experiencias interactivas y lúdicas para nuestras cabinas de conferencias. ¿Cuál es tu idea?
Si quieres crear una divertida cabina de WhatsApp para conferencias o simplemente quieres crear algo interesante con No-Code/Low-Code, dame un toque en la sección de Slack de la comunidad de Vonage. También puedes seguirnos en VonageDev en X para encontrarnos en nuestro próximo stand de conferencias.
Compartir:
Benjamin Aronov es desarrollador de Vonage. Es un constructor de comunidades con experiencia en Ruby on Rails. Benjamin disfruta de las playas de Tel Aviv, a la que llama hogar. Su base en Tel Aviv le permite conocer y aprender de algunos de los mejores fundadores de startups del mundo. Fuera de la tecnología, a Benjamin le encanta viajar por el mundo en busca del perfecto pain au chocolat.