Looking for unique and fun conference booth ideas? At CityJS India 2024, we took "interactive booths at conferences" up a notch with a WhatsApp-powered charades game. Designed to engage and entertain, our booth became a must-visit destination while activating conferencegoers into our community and guiding them to our platform offerings.
The interactive experience started with attendees scanning a QR code at our booth, and launching a WhatsApp Conversational AI agent on their phones. The agent guided participants through a game of charades with categories like "Coding," "Developer Life," and "Communications." After acting out their clues, attendees submitted photos, which were uploaded to the Vonage Developer Community Slack for voting. The entry with the most heart emojis won a trendy LED light-up backpack, combining fun with friendly competition.
WhatsApp Charade Game
By blending fun conference booth activity ideas with cutting-edge technology, we created an engaging, memorable, and impactful booth experience. This demo highlighted the potential of interactive conference booth ideas to drive meaningful engagement and stand out in a busy event environment. In this article, you’ll learn how we built our own conference booth game with WhatsApp using Vonage's AI Studio low-code platform.
The Charades Game Beat Our Conference Goals
Vonage API Account (link below)
To complete this tutorial, you will need a DT 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 DT API Dashboard.
First, we created an inbound WhatsApp agent. To create an agent, follow the instructions found in the AI Studio documentation. There are three important options for our agent:
Type: WhatsApp
Template: Start From Scratch
Event: Inbound
Then we needed just two nodes to get started:
Our Collect Input node doubles as a welcome message and asks our users what they would like to do. Since we have just 3 options, we can use reply buttons to simplify and improve the UX. Here we set the values of the buttons to your 3 actions: charades, rules, free-credit. Save the value to a parameter called action.
Our conditions node then checked our action parameter against these 3 values and created 3 exit points that correlated with our 3 possible flows. Let’s check out the main flow, our game!
WhatsApp Welcome Message
With any raffle or competition, our legal department is always quite strict with our Terms and Conditions policy. We were able to satisfy our legal colleagues in a pretty simple way, without annoying our users by using another Collect Input Node and Conditions Node. The collect input node links to the official T&Cs. We saved the output to a parameter $CHARADE_CONSENT. If the user agreed, they would continue to the game. If not, they would get a “that’s ok” message and then be redirected to the “Free API Credit” flow.
Simple and Effective Terms and Conditions
We had one last step of housekeeping before letting our users play the game. We needed to make sure that the information in WhatsApp was correct and the best way to contact players in case they won the backpack, which we will store in a parameter called $BEST_NUMBER. The cool thing is that because we have System Parameters, we already have access to the users $PROFILE_NAME and $SENDER_PHONE_NUMBER.
We saved the output of the Collect Input Node to a parameter called $BEST_NUMBER_CONFRIM. If the user says yes, then we used a Set Parameter Node to update our $BEST_NUMBER to the $SENDER_PHONE_NUMBER. If not, then we used another Collect Input Node to get the correct number.
User Details Confirmation
Now finally the users were playing the game! I thought it would be nice to give users a few different options for their charade prompt.
At first, I created only coding categories like “Javascript Basics” and “Javascript Frameworks”. However, the prompts were quite specific and difficult. So I made them more general: “Coding Concepts”, “Developer Life”, and “Communications”. The communications category was for fun clues but because Vonage sells Communications APIs, it was a nice segway to starting conversations with conference goers. An example of a clue was, “Receiving a phone call from an unknown number”.
Users Select a Charade Topic
We stored these prompts in a Google Sheet and then used the id to retrieve them. We used another Conditions Node depending on which category the user selected.
Charade Prompts Stored in Google Sheets
Each one of these flows led to a Custom Code Node. The custom code node outputs a random $CHARADE_NUMBER.This number correlates to the id of the charade prompt that is stored in Google Sheets. For example, “Coding Concepts” was charades number 1 to 45, so we used the following code in the custom code node and output to $CHARADE_NUMBER.
function getRandomInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var randomNum = getRandomInRange(1, 45);
return randomNum;We could now use our $CHARADE_NUMBER to look up the prompt on the Google Sheet. We just needed to use a Webhook Node using a GET request to the Google Sheet. The Webhook Configuration:
Method: GET
URL: Google Apps Scripts URL. For example https://script.google.com/a/macros/vonage.com/s/AKfycbyQ0gJ5YjK-r6F7ipYfVHbKsW0Riphw4w3IpmoQxoa8X7kZ1iRk_RU6OaqY8V5JVxwysg/exec
Query Parameter:
id : $CHARADE_NUMBER
Response Mapping
Object path: [0][“charade_prompt”], Parameter: $CHARADE_PROMPT
You can see exactly how to do this in How to Create a GET Request Endpoint for Google Sheets.
Once we got back our $CHARADE_PROMPT from our GET request lookup to our Google Sheet, we then output it to our user and wait for their submission. Here we specified in the Collect Input node that the message type should be a photo, otherwise, we gave them an error message and asked them to try again. We stored the input in a parameter called $CHARADE_PHOTO.
Users Respond with Charade Photos
The next step was to send that submission to Slack. We used another Webhook Node with the following:
Method: POST
Request URL: Our Slack Incoming Webhook URL. This URL was set for a specific channel we created for the event called #cityjs-charades.
Body: We added some formatting to our message to make it a bit nicer.
{ "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" }]
}You can see step-by-step how to setup your Slack App and Incoming Webhook in How to Setup a Slack App.
And this is how it looked when a submission was posted to Slack!
Submissions are Automatically Added to Slack
In addition to getting conference goers activated with our Slack community, we had a goal to try and get more social media activity. So we simply added one more Collect Input node and gave users the option to be tweeted and if so to add their Twitter handle to tag them.
Users Can Opt-In For Twitter Submissions
Whether or not users agreed to Tweets, all of the information was then stored in a Google Sheet using another Webhook Node. This time a POST request sent the following information for each submission: WhatsApp Name, phone number, Twitter consent, Twitter handle, link to the charade photo, and the charade prompt that the user was responding to. You can see how to create a POST request to Google Sheets to pass this information from AI Studio.
This Google Sheet made it easy for a colleague to Tweet all the relevant information and also to have backups for later if need be. We also used this sheet to reach out to the winner at the end of the conference.
We ended up getting 16 submissions for Tweets. These community-driven posts were really fun to shake up our timeline!
We had 16 Awesome Charade Tweets
When users finished the game, we asked if they wanted to return to the main menu. This was to allow them another chance at the Free API Credit flow. In other agents, we’ve had flows that push users to our developer blog, specific documentation, or other developer community offerings like job listings. You can see how to create loops and subflows to better organize your agent.
Add Looping and a Friendly Goodbye Message
The charades game was a huge success! We had several participants who kept coming back to our booth to find out how they were doing and some even shared the Slack link with friends outside the conference to get more votes.
Our Competition and Backpack Winner
However, there were some improvements for next time. First, we had a few different QR codes on our booth. It’s important to remember that on the booth, you might only have someone’s attention for a few seconds so things must be as simple as possible. I might simplify the experience by removing the “How To Play” and “Free API Credit” Flows. When building, it seemed like a good idea but in real life, almost nobody clicked these, instead, they just clicked play and figured it out or asked us in person.
In the same vein, I would make the charade prompts much simpler. When I was building I feared that players would get the same repetitive prompts. In reality, it was much worse that I created 85 prompts but many were way too difficult to act out in photos.
At a previous conference, I used an AI Studio agent to do digital “speed dating” which paired different attendees. This time I created a charades game. But this is just the start! I am already thinking about more interactive, playful experiences for our conference booths! What is your idea?
If you want to build a fun WhatsApp conference booth engagement or simply want to build something cool with No-Code/Low-Code, give me a shout on the Vonage Community Slack. You can also follow us at VonageDev on X to find us at our next conference booth.
){kind=small}
Benjamin Aronov is a developer advocate at Vonage. He is a proven community builder with a background in Ruby on Rails. Benjamin enjoys the beaches of Tel Aviv which he calls home. His Tel Aviv base allows him to meet and learn from some of the world's best startup founders. Outside of tech, Benjamin loves traveling the world in search of the perfect pain au chocolat.
