Partager:
){kind=small}
Benjamin Aronov est un défenseur des développeurs chez Vonage. C'est un bâtisseur de communauté qui a fait ses preuves, avec une formation en Ruby on Rails. Benjamin apprécie les plages de Tel Aviv, où il vit. Sa base à Tel Aviv lui permet de rencontrer et d'apprendre de certains des meilleurs fondateurs de startups du monde. En dehors de la technologie, Benjamin aime voyager à travers le monde à la recherche du parfait pain au chocolat.
Des stands de conférence amusants et interactifs grâce à Vonage et WhatsApp
Temps de lecture : 8 minutes
Vous cherchez des idées de stands de conférence uniques et amusants ? Lors de la conférence CityJS India 2024, nous avons fait monter d'un cran les "stands interactifs" avec un jeu de charades alimenté par WhatsApp. Conçu pour engager et divertir, notre stand est devenu une destination incontournable tout en activant les participants à la conférence dans notre communauté et en les guidant vers les offres de notre plateforme.
L'expérience interactive a commencé lorsque les participants ont scanné un code QR sur notre stand et ont lancé un agent WhatsApp Conversational AI sur leur téléphone. L'agent a guidé les participants dans un jeu de charades avec des catégories telles que " Coding ", " Developer Life " et " Communications " Après avoir joué leurs indices, les participants ont soumis des photos, qui ont été téléchargées sur le Slack de la communauté des développeurs de Vonage. Slack de la communauté des développeurs de Vonage de la communauté des développeurs de Vonage. La photo qui contenait le plus d'émojis en forme de cœur a gagné un sac à dos lumineux à LED, alliant plaisir et compétition amicale.
WhatsApp Charade Game
En associant des idées d'activités amusantes pour les stands de conférence à une technologie de pointe, nous avons créé une expérience de stand engageante, mémorable et percutante. Cette démonstration a mis en évidence le potentiel des idées de stands de conférence interactifs pour susciter un engagement significatif et se démarquer dans un environnement événementiel très fréquenté. Dans cet article, vous apprendrez comment nous avons créé notre propre jeu de stand de conférence avec WhatsApp en utilisant la plateforme low-code AI Studio de Vonage.
The Charades Game Beat Our Conference Goals
Compte API Vonage (lien ci-dessous)
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.
Tout d'abord, nous avons créé un agent WhatsApp entrant. Pour créer un agent, suivez les instructions figurant dans la documentation de documentation d'AI Studio. Il existe trois options importantes pour notre agent :
Type : WhatsApp
Modèle : Partir de zéro
Événement : Inbound
Nous n'avions donc besoin que de deux nœuds pour commencer :
Notre nœud Collect Input sert également de message de bienvenue et demande aux utilisateurs ce qu'ils souhaitent faire. Comme nous n'avons que 3 options, nous pouvons utiliser des boutons de réponse pour simplifier et améliorer l'UX. Ici, nous définissons les valeurs des boutons à vos 3 actions : charades, règles, crédit gratuit. Enregistrez la valeur dans un paramètre appelé action.
Notre nœud de conditions vérifie ensuite notre action par rapport à ces 3 valeurs et a créé 3 points de sortie en corrélation avec nos 3 flux possibles. Voyons maintenant le flux principal, notre jeu !
WhatsApp Welcome Message
Lors d'une tombola ou d'un concours, notre service juridique est toujours très strict en ce qui concerne les conditions générales d'utilisation. Nous avons pu satisfaire nos collègues juristes d'une manière assez simple, sans ennuyer nos utilisateurs, en utilisant un nœud d'entrée "collecte" et un nœud "conditions". Le nœud d'entrée "collect" renvoie aux conditions générales de vente officielles. Nous avons enregistré la sortie dans un paramètre $CHARADE_CONSENT. Si l'utilisateur est d'accord, il continue le jeu. Dans le cas contraire, il reçoit un message "c'est bon" et est redirigé vers le flux "Crédit API gratuit".
Simple and Effective Terms and Conditions
Il nous restait une dernière étape à franchir avant de laisser nos utilisateurs jouer au jeu. Nous devions nous assurer que les informations contenues dans WhatsApp étaient correctes et que la meilleure façon de contacter les joueurs au cas où ils gagneraient le sac à dos, que nous stockerons dans un paramètre appelé $BEST_NUMBER. Ce qui est génial, c'est que nous avons des Paramètres du systèmenous avons déjà accès aux utilisateurs $PROFILE_NAME et au $NUMÉRO_DE_TÉLÉPHONE_DE_L'EXPÉDITEUR.
Nous avons enregistré la sortie du nœud d'entrée Collect dans un paramètre appelé $BEST_NUMBER_CONFRIM. Si l'utilisateur répond par l'affirmative, nous avons utilisé un nœud de paramétrage de type nœud Set Parameter pour mettre à jour notre paramètre $BEST_NUMBER en NUMÉRO DE TÉLÉPHONE DE L'EXPÉDITEUR. Si ce n'est pas le cas, nous avons utilisé un autre nœud d'entrée de collecte pour obtenir le bon numéro.
User Details Confirmation
Enfin, les utilisateurs ont joué le jeu ! J'ai pensé qu'il serait intéressant de donner aux utilisateurs quelques options différentes pour leur charade.
Au début, je n'ai créé que des catégories de codage telles que "Javascript Basics" et "Javascript Frameworks". Cependant, les questions étaient assez spécifiques et difficiles. Je les ai donc rendues plus générales : "Concepts de codage", "Vie du développeur" et "Communications". La catégorie des communications était destinée à des indices amusants, mais comme Vonage vend des API de communication, c'était un bon moyen d'entamer des conversations avec les participants à la conférence. Un exemple d'indice était "Recevoir un appel téléphonique d'un numéro inconnu".
Users Select a Charade Topic
Nous avons stocké ces invites dans une feuille Google, puis nous avons utilisé la fonction id pour les récupérer. Nous avons utilisé un autre nœud de conditions en fonction de la catégorie sélectionnée par l'utilisateur.
Charade Prompts Stored in Google Sheets
Chacun de ces flux a conduit à un nœud de code personnalisé. Le nœud de code personnalisé produit un nombre aléatoire de NUMÉRO_CHARADECe numéro correspond à l'identifiant de l'invite à la charade qui est stocké dans Google Sheets. Par exemple, "Coding Concepts" correspondait aux charades 1 à 45. Nous avons donc utilisé le code suivant dans le nœud de code personnalisé et l'avons généré sous la forme suivante NUMÉRO_CHARADE.
function getRandomInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var randomNum = getRandomInRange(1, 45);
return randomNum;Nous pouvons maintenant utiliser notre $CHARADE_NUMBER pour rechercher l'invite sur la feuille Google. Il nous suffit d'utiliser un nœud nœud Webhook à l'aide d'une requête GET vers la feuille Google. La configuration du Webhook :
Méthode : GET
URL : URL des scripts Google Apps. Par exemple https://script.google.com/a/macros/vonage.com/s/AKfycbyQ0gJ5YjK-r6F7ipYfVHbKsW0Riphw4w3IpmoQxoa8X7kZ1iRk_RU6OaqY8V5JVxwysg/exec
Paramètre d'interrogation :
id : $CHARADE_NUMBER
Cartographie des réponses
Chemin d'accès à l'objet : [0]["charade_prompt"], Paramètre : $CHARADE_PROMPT
Vous pouvez voir exactement comment procéder dans Comment créer un point de terminaison de requête GET pour Google Sheets.
Une fois que nous avons récupéré notre INVITE_CHARADE de notre requête GET vers notre Google Sheet, nous l'envoyons à notre utilisateur et attendons qu'il la soumette. Ici, nous avons spécifié dans le nœud Collect Input que le type de message devait être une photo, sinon, nous leur avons donné un message d'erreur et leur avons demandé de réessayer. Nous avons stocké l'entrée dans un paramètre appelé $CHARADE_PHOTO.
Users Respond with Charade Photos
L'étape suivante consiste à envoyer cette soumission à Slack. Nous avons utilisé un autre nœud Webhook avec ce qui suit :
Méthode : POST
Demande d'URL : Notre URL du Webhook entrant de Slack. Cette URL a été définie pour un canal spécifique que nous avons créé pour l'événement appelé #cityjs-charades.
Corps : Nous avons ajouté des éléments de formatage à notre message pour le rendre un peu plus agréable.
{ "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" }]
}Vous pouvez voir étape par étape comment configurer votre application Slack et votre Webhook entrant dans la rubrique Comment configurer une application Slack.
Et voici à quoi cela ressemblait lorsqu'une soumission était postée sur Slack !
Submissions are Automatically Added to Slack
En plus d'activer les participants à la conférence avec notre communauté Slack, nous avions pour objectif d'essayer d'augmenter l'activité des médias sociaux. Nous avons donc simplement ajouté un nœud Collect Input et donné aux utilisateurs la possibilité de se faire tweeter et, le cas échéant, d'ajouter leur adresse Twitter pour les marquer.
Users Can Opt-In For Twitter Submissions
Que les utilisateurs aient ou non accepté les tweets, toutes les informations ont ensuite été stockées dans une feuille Google à l'aide d'un autre nœud Webhook. Cette fois, une requête POST a envoyé les informations suivantes pour chaque soumission : Nom WhatsApp, numéro de téléphone, consentement Twitter, poignée Twitter, lien vers la photo de charade et l'invite de charade à laquelle l'utilisateur répondait. Vous pouvez voir comment créer une requête POST vers Google Sheets pour transmettre ces informations depuis AI Studio.
Cette feuille Google a permis à un collègue de tweeter facilement toutes les informations pertinentes et d'avoir des sauvegardes pour plus tard, si nécessaire. Nous avons également utilisé cette feuille pour contacter le gagnant à la fin de la conférence.
Nous avons reçu 16 propositions de Tweets. Ces messages émanant de la communauté ont été très amusants pour animer notre ligne du temps !
We had 16 Awesome Charade Tweets
Lorsque les utilisateurs ont terminé le jeu, nous leur avons demandé s'ils souhaitaient revenir au menu principal. Cela leur permettait d'avoir une autre chance d'accéder au flux de crédits API gratuits. Pour d'autres agents, nous avons eu des flux qui poussaient les utilisateurs vers notre blog de développeur, une documentation spécifique ou d'autres offres de la communauté des développeurs, comme des offres d'emploi. Vous pouvez voir comment créer des boucles et des sous-flux pour mieux organiser votre agent.
Add Looping and a Friendly Goodbye Message
Le jeu de charades a connu un énorme succès ! Plusieurs participants n'ont cessé de revenir à notre stand pour savoir comment ils s'en sortaient et certains ont même partagé le lien Slack avec des amis en dehors de la conférence pour obtenir davantage de votes.
Our Competition and Backpack Winner
Cependant, nous avons apporté quelques améliorations pour la prochaine fois. Tout d'abord, nous avions plusieurs codes QR différents sur notre stand. Il est important de se rappeler que sur le stand, vous n'avez l'attention de quelqu'un que pendant quelques secondes et que les choses doivent donc être aussi simples que possible. Je pourrais simplifier l'expérience en supprimant les flux "Comment jouer" et "Crédit API gratuit". Lors de la construction, cela semblait être une bonne idée, mais dans la réalité, presque personne n'a cliqué sur ces flux, au lieu de cela, ils ont simplement cliqué sur " Play " et ont trouvé la solution ou nous ont demandé en personne.
Dans le même ordre d'idées, je simplifierais les messages de charade. Lorsque j'ai construit le jeu, j'ai craint que les joueurs ne reçoivent les mêmes messages répétitifs. En réalité, c'était bien pire : j'ai créé 85 messages, mais beaucoup d'entre eux étaient beaucoup trop difficiles à reproduire en photo.
Lors d'une conférence précédente, j'ai utilisé un agent d'AI Studio pour faire du "speed dating" numérique qui mettait en relation différents participants. Cette fois-ci, j'ai créé un jeu de charades. Mais ce n'est qu'un début ! Je pense déjà à des expériences plus interactives et ludiques pour nos stands de conférence ! Quelle est votre idée ?
Si vous voulez construire un stand de conférence WhatsApp amusant ou si vous voulez simplement construire quelque chose de cool avec No-Code/Low-Code, faites-moi signe sur le Slack de la communauté Vonage. Communauté Vonage Slack. Vous pouvez également nous suivre sur VonageDev sur X pour nous trouver à notre prochain stand de conférence.
Partager:
Benjamin Aronov est un défenseur des développeurs chez Vonage. C'est un bâtisseur de communauté qui a fait ses preuves, avec une formation en Ruby on Rails. Benjamin apprécie les plages de Tel Aviv, où il vit. Sa base à Tel Aviv lui permet de rencontrer et d'apprendre de certains des meilleurs fondateurs de startups du monde. En dehors de la technologie, Benjamin aime voyager à travers le monde à la recherche du parfait pain au chocolat.