Estandes de conferência divertidos e interativos com o Vonage e o WhatsApp

Introdução

Procurando ideias originais e divertidas para estandes de conferências? Na CityJS Índia 2024, levamos os “estandes interativos em conferências” a um novo patamar com um jogo de charadas baseado no WhatsApp. Concebido para envolver e entreter, nosso estande se tornou um destino imperdível, ao mesmo tempo em que atraiu os participantes da conferência para nossa comunidade e os orientou sobre as ofertas da nossa plataforma. 

A experiência interativa começou com os participantes escaneando um código QR em nosso estande e abrindo um agente de IA conversacional do WhatsApp em seus celulares. O agente guiou os participantes por um jogo de charadas com categorias como “Programação”, “Vida do desenvolvedor” e “Comunicação”. Depois de representar as pistas, os participantes enviaram fotos, que foram carregadas no Slack da Comunidade de Desenvolvedores da Vonage para votação. A participação com mais emojis de coração ganhou uma mochila LED iluminada, que está na moda, combinando diversão com uma competição amigável.

WhatsApp Charade Game
Ao combinar ideias divertidas para atividades em estandes de conferências com tecnologia de ponta, criamos uma experiência envolvente, memorável e impactante no estande. Essa demonstração destacou o potencial das ideias interativas para estandes de conferências em promover um engajamento significativo e se destacar em um ambiente de evento movimentado. Neste artigo, você aprenderá como criamos nosso próprio jogo para estandes de conferências com o WhatsApp, utilizando a plataforma low-code AI Studio da Vonage.

The Charades Game Beat Our Conference Goals

Pré-requisitos

• Account da API da Vonage (link abaixo)

• Alugue um número de telefone virtual da Vonage

• Account do WhatsApp Business

Como configurar um chatbot do WhatsApp para atendimento de entrada

Primeiro, criamos um agente de atendimento para o WhatsApp. Para criar um agente, siga as instruções encontradas na documentação do AI Studio. Existem três opções importantes para o nosso agente:

• Tipo: WhatsApp

• Modelo: Começar do zero

• Evento: Inbound

Então, precisávamos de apenas dois nós para começar:

• Nó de coleta de entrada

• Nó de condições

Nosso nó “Collect Input” funciona também como uma mensagem de boas-vindas e pergunta aos usuários o que eles gostariam de fazer. Como temos apenas três opções, podemos usar botões de resposta para simplificar e melhorar a experiência do usuário. Aqui, definimos os valores dos botões para as três ações: charadas, regras, crédito-grátis. Salve o valor em um parâmetro chamado action.

Nosso nó de condições verificou então nossa parâmetro de ação em relação a esses três valores e criou três pontos de saída que se correlacionavam com nossos três fluxos possíveis. Vamos conferir o fluxo principal, o nosso jogo!

WhatsApp Welcome Message

Como criar um jogo interativo no WhatsApp

Primeiro passo: Termos e Condições

Em qualquer sorteio ou concurso, nosso departamento jurídico é sempre bastante rigoroso com nossa política de Termos e Condições. Conseguimos atender aos nossos colegas do departamento jurídico de uma maneira bastante simples, sem incomodar nossos usuários, utilizando outro nó “Collect Input” e outro nó “Conditions”. O nó “Collect Input” direciona para os Termos e Condições oficiais. Salvamos a saída em um parâmetro $CHARADE_CONSENT. Se o usuário concordasse, ele seguiria para o jogo. Caso contrário, receberia uma mensagem do tipo “tudo bem” e seria redirecionado para o fluxo “Crédito de API Grátis”.

Simple and Effective Terms and Conditions

Passo 2: Confirmar os detalhes

Tínhamos uma última etapa de ajustes a fazer antes de permitir que nossos usuários jogassem. Precisávamos garantir que as informações no WhatsApp estivessem corretas e qual seria a melhor forma de entrar em contato com os jogadores caso ganhassem a mochila, o que vamos armazenar em um parâmetro chamado $BEST_NUMBER. O legal é que, como temos Parâmetros do Sistema, já temos acesso aos $PROFILE_NAME e $SENDER_PHONE_NUMBER. 

Salvamos a saída do nó “Collect Input” em um parâmetro chamado $BEST_NUMBER_CONFIRM. Se o usuário responder que sim, usamos um nó “Set Parameter” para atualizar nosso $BEST_NUMBER para o $SENDER_PHONE_NUMBER. Caso contrário, usamos outro nó “Coletar Entrada” para obter o número correto.

User Details Confirmation

Terceiro passo: Escolher o tema do jogo de charadas

Finalmente, os usuários estavam jogando! Achei que seria legal oferecer a eles algumas opções diferentes para a sugestão do jogo de charadas. 

No início, criei apenas categorias relacionadas à programação, como “Noções básicas de JavaScript” e “Frameworks de JavaScript”. No entanto, as sugestões eram bastante específicas e difíceis. Por isso, tornei-as mais gerais: “Concepts de programação”, “Vida do desenvolvedor” e “Comunicações”. A categoria “Comunicações” era para pistas divertidas, mas, como a Vonage vende APIs de comunicação, foi uma boa maneira de puxar conversa com os participantes da conferência. Um exemplo de pista era: “Receber uma ligação de um número desconhecido”.

Users Select a Charade Topic

Armazenamos essas sugestões em uma planilha do Google Sheets e, em seguida, usamos o ID para recuperá-las. Utilizamos outro nó “Condições” dependendo da categoria selecionada pelo usuário.

Charade Prompts Stored in Google Sheets

Cada um desses fluxos levou a um Nó de Código Personalizado. O nó de código personalizado gera um $CHARADE_NUMBER. Esse número corresponde ao ID da sugestão de charada armazenada no Google Sheets. Por exemplo, “Concepts de Programação” correspondia às charadas de número 1 a 45; portanto, usamos o seguinte código no nó de código personalizado e geramos a saída para $CHARADE_NUMBER.

function getRandomInRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var randomNum = getRandomInRange(1, 45);
return randomNum;

Agora poderíamos usar nossa variável $CHARADE_NUMBER para consultar o prompt na planilha do Google Sheets. Bastava usar um Nó de Webhook com uma solicitação GET para a planilha do Google. A configuração do Webhook:

• Método: GET

• URL: URL do Google Apps Scripts. Por exemplo https://script.google.com/a/macros/vonage.com/s/AKfycbyQ0gJ5YjK-r6F7ipYfVHbKsW0Riphw4w3IpmoQxoa8X7kZ1iRk_RU6OaqY8V5JVxwysg/exec

• Parâmetro de consulta:

  • id : $CHARADE_NUMBER

• Mapeamento de respostas

• Caminho do objeto: [0][“charade_prompt”], Parâmetro: $CHARADE_PROMPT

Você pode ver exatamente como fazer isso em Como criar um endpoint de solicitação GET para o Google Sheets.

Passo 4: Exibir a sugestão do jogo de charadas e coletar as respostas

Assim que recuperamos nosso $CHARADE_PROMPT da nossa consulta GET na planilha do Google Sheets, exibimos o resultado para o usuário e aguardamos o envio. Aqui, especificamos no nó “Collect Input” que o tipo de mensagem deveria ser uma foto; caso contrário, exibíamos uma mensagem de erro e pedíamos que tentasse novamente. Armazenamos a entrada em um parâmetro chamado $CHARADE_PHOTO.

Users Respond with Charade Photos

Passo 5: Enviar a submissão para o Slack

O próximo passo foi enviar essa submissão para o Slack. Utilizamos outro Webhook no Node com o seguinte código:

• Método: POST

• URL da solicitação: Nosso URL do Webhook de entrada do Slack. Essa URL foi definida para um canal específico que criamos para o evento, chamado #cityjs-charades.

• Corpo: Adicionamos um pouco de formatação à nossa mensagem para deixá-la um pouco mais agradável.

{ "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" }]
}

Você pode ver, passo a passo, como configurar seu aplicativo do Slack e o Webhook de entrada em Como configurar um aplicativo do Slack.

E era assim que ficava quando uma contribuição era publicada no Slack!

Submissions are Automatically Added to Slack

Passo seis: Tweet opcional

Além de envolver os participantes da conferência por meio da nossa comunidade no Slack, tínhamos o objetivo de tentar aumentar a atividade nas redes sociais. Por isso, simplesmente adicionamos mais um nó “Collect Input” e oferecemos aos usuários a opção de terem suas mensagens publicadas no Twitter e, nesse caso, de adicionarem seu nome de usuário no Twitter para que fossem marcados. 

Users Can Opt-In For Twitter Submissions

Independentemente de os usuários terem concordado ou não com os tweets, todas as informações eram então armazenadas em uma planilha do Google Sheets por meio de outro Webhook Node. Desta vez, uma solicitação POST enviava as seguintes informações para cada envio: nome no WhatsApp, número de telefone, consentimento para o Twitter, nome de usuário no Twitter, link para a foto da charada e a sugestão da charada à qual o usuário estava respondendo. Você pode ver como criar uma solicitação POST para o Google Sheets para enviar essas informações a partir do AI Studio. 

Essa planilha do Google facilitou para que um colega publicasse no Twitter todas as informações relevantes e também serviu como backup para o futuro, caso fosse necessário. Também usamos essa planilha para entrar em contato com o vencedor ao final da conferência.  

Acabamos recebendo 16 contribuições para os tweets. Essas postagens criadas pela comunidade foram muito divertidas e deram um novo fôlego à nossa linha do tempo!

We had 16 Awesome Charade Tweets 

Sétimo passo: Loops e outros fluxos

Quando os usuários terminavam o jogo, perguntávamos se eles queriam voltar ao menu principal. O objetivo era dar a eles outra chance de acessar o fluxo de Créditos de API Grátis. Em outros agentes, já tivemos fluxos que direcionavam os usuários ao nosso blog de desenvolvedores, a documentação específica ou a outras ofertas da comunidade de desenvolvedores, como anúncios de vagas de emprego. Você pode ver como criar loops e subfluxos para organizar melhor seu agente.

Add Looping and a Friendly Goodbye Message

Conclusão

O jogo de charadas foi um grande sucesso! Tivemos vários participantes que voltavam sempre ao nosso estande para saber como estavam se saindo, e alguns até compartilharam o link do Slack com amigos que não estavam na conferência para conseguir mais votos.

Our Competition and Backpack Winner

No entanto, houve alguns pontos a melhorar para a próxima vez. Primeiro, tínhamos alguns códigos QR diferentes em nosso estande. É importante lembrar que, no estande, você pode ter a atenção de alguém por apenas alguns segundos; portanto, tudo deve ser o mais simples possível. Talvez eu simplifique a experiência removendo os fluxos “Como jogar” e “Crédito de API grátis”. Na hora de montar o estande, parecia uma boa ideia, mas, na prática, quase ninguém clicou neles; em vez disso, as pessoas simplesmente clicavam em “jogar” e descobriam sozinhas ou nos perguntavam pessoalmente.

Na mesma linha, eu simplificaria bastante as sugestões para as brincadeiras. Quando estava criando o jogo, eu temia que os jogadores recebessem as mesmas sugestões repetitivas. Na verdade, foi muito pior do que isso: criei 85 sugestões, mas muitas eram difíceis demais de representar nas fotos.

Em uma conferência anterior, usei um agente do AI Studio para realizar um “speed dating” digital que formava pares entre diferentes participantes. Desta vez, criei um jogo de charadas. Mas isso é só o começo! Já estou pensando em experiências mais interativas e divertidas para nossos estandes na conferência! Qual é a sua ideia?

Se você quiser criar uma atividade divertida com um estande de conferência no WhatsApp ou simplesmente quiser desenvolver algo legal usando No-Code/Low-Code, entre em contato comigo na Slack da Comunidade Vonage. Você também pode nos seguir no no VonageDev no X para nos encontrar em nosso próximo estande de conferência.