シェア:
){kind=small}
Benjamin AronovはVonageの開発者支援者です。彼はRuby on Railsのバックグラウンドを持つ実績のあるコミュニティ・ビルダーです。Benjaminは故郷であるテルアビブのビーチを楽しんでいる。テルアビブを拠点に、世界最高のスタートアップの創設者たちと出会い、学ぶことができる。技術以外では、完璧なパン・オ・ショコラを求めて世界中を旅するのが好き。
VonageとWhatsAppを使った楽しくインタラクティブな会議ブース
所要時間：1 分
ユニークで楽しいカンファレンスブースのアイデアをお探しですか？CityJS India 2024で、私たちはWhatsAppを利用したゲームを通して、「カンファレンスでのインタラクティブブース」をさらに進化させました。参加者を惹きつけ、楽しませるようにデザインされた私たちのブースは、カンファレンスの参加者を私たちのコミュニティへと活性化させ、私たちのプラットフォーム提供へと導くと同時に、必ず訪れなければならない場所となりました。
参加者はブースでQRコードをスキャンし、WhatsAppの会話AIエージェントを起動。エージェントは参加者を「コーディング」、「デベロッパーライフ」、「コミュニケーション」などのカテゴリに分け、ゲーム形式で案内しました。 Vonage開発者コミュニティSlackにアップロードされました。最も多くのハートの絵文字を持つエントリは、トレンディなLEDライトアップバックパックを獲得し、楽しさと切磋琢磨を組み合わせました。
WhatsApp Charade Game
楽しい会議ブースのアクティビティアイデアと最先端のテクノロジーを融合させることで、魅力的で記憶に残る、インパクトのあるブース体験を実現しました。このデモでは、インタラクティブなカンファレンスブースのアイディアが、忙しいイベント環境において、有意義なエンゲージメントを促進し、注目を集める可能性を強調しました。この記事では、VonageのAI Studioローコードプラットフォームを使用して、WhatsAppを使用した独自の会議ブースゲームを構築した方法をご紹介します。
The Charades Game Beat Our Conference Goals
Vonage API Account (下記リンク)
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.
まず、WhatsApp エージェントを作成します。 エージェントの作成方法は AI Studio ドキュメント.エージェントには3つの重要なオプションがあります：
タイプ WhatsApp
テンプレート ゼロから始める
イベント インバウンド
そうなると、必要なのは2つのノードだけということになる：
Collect Inputノードはウェルカムメッセージを兼ねており、ユーザーに何をしたいかを尋ねます。選択肢は3つだけなので、UXを単純化して改善するために返信ボタンを使うことができます。ここでは、ボタンの値を3つのアクションに設定します： チャレード, ルール, フリークレジット.というパラメータに値を保存します。 アクション.
次に、条件ノードが アクションパラメータをこれらの3つの値と照合し、3つの可能なフローと相関する3つの出口を作成します。メインフローであるゲームを見てみよう！
WhatsApp Welcome Message
ラッフルやコンペティションでは、当社の法務部門は常に利用規約ポリシーに非常に厳しいです。私たちは、Collect Input NodeとConditions Nodeを使用することで、ユーザーに迷惑をかけることなく、非常にシンプルな方法で法務担当者を満足させることができました。collect入力ノードは公式T&Cにリンクしています。出力をパラメータ charade_consent.ユーザーが同意すれば、ゲームに進む。同意しない場合は、"that's ok "メッセージが表示され、"Free API Credit "フローにリダイレクトされる。
Simple and Effective Terms and Conditions
ユーザーにゲームをプレイしてもらう前に、最後の準備段階がありました。WhatsAppの情報が正しいこと、そしてプレイヤーがバックパックを獲得した際に連絡を取る最適な方法を確認する必要がありました。 BEST_NUMBER.これは$BEST_NUMBERというパラメータに格納されます。 システムパラメータがあるので、私たちはすでにユーザー プロファイル名と 送信者電話番号.
Collect Input Nodeの出力を以下のパラメータに保存しました。 というパラメータに保存しました。.ユーザが「はい」と答えた場合は パラメータ設定ノードを使用して BEST_NUMBERを 送信者電話番号.そうでない場合は、別のCollect Input Nodeを使用して正しい番号を取得します。
User Details Confirmation
さて、いよいよユーザーがゲームをプレイすることになった！チャレードのプロンプトのために、ユーザーにいくつかの異なる選択肢を与えるのはいいことだと思った。
最初は、「Javascriptの基礎」や「Javascriptのフレームワーク」といったコーディングのカテゴリーだけを作りました。しかし、プロンプトはかなり具体的で難しかったです。そこで、より一般的なものにしました：「コーディングの概念」、「開発者の生活」、「コミュニケーション」です。Communicationsのカテゴリーは楽しいヒントのためでしたが、VonageはConversation APIを販売しているため、カンファレンスの参加者と会話を始めるいいきっかけになりました。ヒントの例としては、「知らない番号から電話を受ける」というものがあった。
Users Select a Charade Topic
これらのプロンプトをGoogleシートに保存し idを使用して取得します。ユーザがどのカテゴリーを選択したかに応じて、別の条件ノードを使用した。
Charade Prompts Stored in Google Sheets
これらのフローはそれぞれ カスタム・コード・ノード.カスタム・コード・ノードは、ランダムな を出力する。この番号はGoogle Sheetsに保存されているcharadeプロンプトのidと関連している。例えば、"Coding Concepts "は1番から45番までのチャレードなので、カスタムコードノードで以下のコードを使い、以下のように出力します。 チャレード番号.
function getRandomInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var randomNum = getRandomInRange(1, 45);
return randomNum;これで、$CHARADE_NUMBERを使ってGoogleシート上のプロンプトを検索できるようになった。あとは ウェブフックノードを使うだけです。Webhookの設定：
方法GET
URLGoogle AppsスクリプトのURL。例 https://script.google.com/a/macros/vonage.com/s/AKfycbyQ0gJ5YjK-r6F7ipYfVHbKsW0Riphw4w3IpmoQxoa8X7kZ1iRk_RU6OaqY8V5JVxwysg/exec
クエリ・パラメータ
id ： 文字数
レスポンス・マッピング
オブジェクト・パス：[0]["charade_prompt"], パラメータ: $CHARADE_PROMPT
具体的な方法は Googleシート用のGETリクエストエンドポイントの作成方法.
一旦 を取得したらを Google シートへの GET リクエストルックアップから取得したら、それをユーザーに出力して投稿を待ちます。ここでは、Collect Input ノードでメッセージタイプが写真であることを指定し、そうでない場合はエラーメッセージを表示して再試行を求めました。入力は CHARADE_PHOTO.
Users Respond with Charade Photos
次のステップは、そのサブミッションをSlackに送信することだ。別のWebhook Nodeを以下のように使用した：
メソッドPOST
リクエストURL私たちの Slack着信Webhook URL.このURLは#cityjs-charadesというイベント用に作成した特定のチャンネルに設定されています。
本文です：メッセージに書式を追加して、少しすっきりさせました。
{ "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" }]
}SlackアプリとIncoming Webhookのセットアップ方法は、以下をご覧ください。 Slackアプリのセットアップ方法.
そして、これがSlackに投稿されたときの様子だ！
Submissions are Automatically Added to Slack
カンファレンス参加者をSlackコミュニティで活性化させることに加えて、私たちはより多くのソーシャルメディア・アクティビティを得ることを目標としていました。そこで、Collect Inputノードを1つ追加し、ユーザーがツイートするオプションと、ツイートする場合はTwitterのハンドルネームを追加してタグ付けできるようにしました。
Users Can Opt-In For Twitter Submissions
ユーザーがツイートに同意したかどうかに関わらず、すべての情報は別のWebhook Nodeを使ってGoogle Sheetに保存された。今回のPOSTリクエストは、各投稿に対して以下の情報を送信した：WhatsApp名、電話番号、Twitter同意、Twitterハンドル、チャレード写真へのリンク、ユーザが反応したチャレードプロンプト。以下はその例である。 Google SheetsへのPOSTリクエストにPOSTリクエストを作成する方法をご覧ください。
このGoogleシートは、同僚がすべての関連情報を簡単にツイートできるようにし、また、必要であれば後でバックアップを取ることもできるようにした。また、このシートは大会の最後に優勝者に連絡するのにも使いました。
最終的に16のツイートが投稿されました。このようなコミュニティ主導の投稿は、私たちのタイムラインを揺るがすとても楽しいものでした！
We had 16 Awesome Charade Tweets
ユーザーがゲームを終えると、メインメニューに戻るかどうかを尋ねました。これは、無料 API クレジットのフローに再度アクセスできるようにするためです。他のエージェントでは、ユーザを開発者ブログ、特定のドキュメント、または求人情報のような他の開発者コミュニティにプッシュするフローがありました。どのように ループとサブフローの作成 を参照してください。
Add Looping and a Friendly Goodbye Message
このチャレード・ゲームは大成功だった！何人かの参加者は、自分たちがどうだったかを知るために何度も私たちのブースに戻ってきてくれたし、より多くの票を得るために会議外の友人とSlackのリンクを共有した人もいた。
Our Competition and Backpack Winner
しかし、次回に向けていくつかの改善点があった。まず、私たちのブースには数種類のQRコードを用意しました。ブースでは、数秒間しか相手の注意を引けないかもしれないので、できるだけシンプルにすることが重要です。遊び方」と「無料APIクレジット」のフローを削除することで、体験をシンプルにできるかもしれません。作ったときはいいアイデアのように思えたのですが、実際にやってみると、これらをクリックする人はほとんどいませんでした。
同じように、私はチャレードのプロンプトをもっとシンプルにすると思う。作っている時、私は選手が同じ繰り返しのプロンプトを得ることを恐れていた。現実には、85のプロンプトを作ったものの、その多くが写真で演じるには難しすぎた。
以前の会議では、AI Studioのエージェントを使って、さまざまな参加者をペアにするデジタル「スピードデート」を行った。今回、私は、チャレズゲームを作りました。しかし、これはほんの始まりに過ぎません！私はすでに、会議のブースでもっとインタラクティブで遊び心のある体験をしようと考えています！あなたのアイデアは何ですか？
楽しいWhatsAppカンファレンスブースのエンゲージメントを構築したい場合、または単にNo-Code/Low-Codeでクールなものを構築したい場合は、私に声をかけてください。 VonageコミュニティSlack.フォローしてください VonageDevをフォローしてください。