Lustige und interaktive Konferenzstände mit Vonage und WhatsApp

Einführung

Suchen Sie nach einzigartigen und lustigen Ideen für Konferenzstände? Auf der CityJS India 2024 haben wir "interaktive Stände auf Konferenzen" mit einem WhatsApp-gestützten Scharadenspiel auf die Spitze getrieben. Unser Stand war so konzipiert, dass er die Konferenzbesucher ansprach und unterhielt. Gleichzeitig wurden sie in unsere Community eingebunden und auf unsere Plattformangebote aufmerksam gemacht.

Das interaktive Erlebnis begann damit, dass die Teilnehmer an unserem Stand einen QR-Code scannten und einen WhatsApp Conversational AI-Agenten auf ihrem Telefon starteten. Der Agent führte die Teilnehmer durch ein Scharadenspiel mit Kategorien wie "Coding", "Developer Life" und "Communications". Nachdem sie ihre Hinweise gespielt hatten, reichten die Teilnehmer Fotos ein, die in die Vonage Entwickler-Community Slack zur Abstimmung hochgeladen wurden. Der Beitrag mit den meisten Herz-Emojis gewann einen trendigen LED-Leuchtrucksack, der Spaß mit freundlichem Wettbewerb verband.

WhatsApp Charade Game
Durch die Kombination von unterhaltsamen Ideen für Konferenzstände mit modernster Technologie haben wir einen ansprechenden, einprägsamen und eindrucksvollen Messestand geschaffen. Diese Demo verdeutlichte das Potenzial interaktiver Ideen für Konferenzstände, um ein sinnvolles Engagement zu fördern und sich in einer geschäftigen Veranstaltungsumgebung abzuheben. In diesem Artikel erfahren Sie, wie wir unser eigenes Spiel für den Konferenzstand mit WhatsApp und der Low-Code-Plattform AI Studio von Vonage entwickelt haben.

The Charades Game Beat Our Conference Goals

Voraussetzungen

• Vonage API Account (Link unten)

• Mieten Sie eine virtuelle Vonage-Telefonnummer

• WhatsApp Business Account

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Wie man einen Inbound WhatsApp Chatbot einrichtet

Zunächst haben wir einen WhatsApp-Agenten für eingehende Anrufe erstellt. Um einen Agenten zu erstellen, folgen Sie den Anweisungen in der AI Studio Dokumentation. Es gibt drei wichtige Optionen für unseren Agenten:

• Typ: WhatsApp

• Vorlage: Von Grund auf neu beginnen

• Veranstaltung: Inbound

Dann brauchten wir nur noch zwei Knotenpunkte, um loszulegen:

• Eingabeknoten sammeln

• Bedingungen Knoten

Unser Collect Input-Knoten dient als Willkommensnachricht und fragt unsere Nutzer, was sie tun möchten. Da wir nur 3 Optionen haben, können wir Antwortschaltflächen verwenden, um die UX zu vereinfachen und zu verbessern. Hier setzen wir die Werte der Schaltflächen auf Ihre 3 Aktionen: Scharade, Regeln, Gratis-Kredit. Speichern Sie den Wert in einem Parameter namens Aktion.

Unser Bedingungsknoten überprüft dann unsere Aktion Parameter mit diesen 3 Werten verglichen und 3 Ausstiegspunkte erstellt, die mit unseren 3 möglichen Flüssen korrelieren. Schauen wir uns den Hauptfluss an, unser Spiel!

WhatsApp Welcome Message

Wie man ein interaktives WhatsApp-Spiel erstellt

Schritt eins: Bedingungen und Konditionen

Bei allen Gewinnspielen und Wettbewerben ist unsere Rechtsabteilung immer sehr streng mit unseren Allgemeinen Geschäftsbedingungen. Wir konnten unsere juristischen Kollegen auf ziemlich einfache Weise zufriedenstellen, ohne unsere Nutzer zu verärgern, indem wir einen weiteren Collect Input Node und Conditions Node verwendet haben. Der Collect Input Node verlinkt zu den offiziellen AGBs. Wir haben die Ausgabe in einem Parameter gespeichert $CHARADE_CONSENT. Wenn der Benutzer zustimmt, fährt er mit dem Spiel fort. Ist dies nicht der Fall, erhält er eine Meldung "Das ist in Ordnung" und wird dann zum Fluss "Kostenloses API-Guthaben" weitergeleitet.

Simple and Effective Terms and Conditions

Schritt zwei: Bestätigen Sie die Details

Wir hatten noch einen letzten Schritt zu erledigen, bevor wir unsere Nutzer das Spiel spielen lassen konnten. Wir mussten sicherstellen, dass die Informationen in WhatsApp korrekt waren und dass wir die Spieler am besten kontaktieren konnten, falls sie den Rucksack gewonnen hatten. $BEST_NUMBER. Das Tolle daran ist, dass wir mit den System-Parameterhaben wir bereits Zugriff auf die Benutzer $PROFILE_NAME und $ABSENDER_TELEFONNUMMER.

Wir haben die Ausgabe des Collect Input Node in einem Parameter namens $BEST_NUMBER_CONFRIM. Wenn der Benutzer ja sagt, dann haben wir einen Parameter-Knoten setzen zur Aktualisierung unserer $BEST_NUMBER auf die $ABSENDER_TELEFONNUMMER. Falls nicht, haben wir einen anderen Collect Input Node verwendet, um die richtige Nummer zu erhalten.

User Details Confirmation

Dritter Schritt: Charade-Thema sammeln

Jetzt spielten die Benutzer endlich das Spiel! Ich dachte, es wäre schön, den Nutzern ein paar verschiedene Optionen für ihre Aufforderung zur Scharade zu geben.

Zunächst habe ich nur Codierungskategorien wie "Javascript Grundlagen" und "Javascript Frameworks" erstellt. Die Aufforderungen waren jedoch ziemlich spezifisch und schwierig. Also habe ich sie allgemeiner gehalten: "Coding Concepts", "Developer Life" und "Communications". Die Kategorie "Kommunikation" war für lustige Hinweise gedacht, aber da Vonage Kommunikations-APIs verkauft, war es eine gute Überleitung, um mit den Konferenzbesuchern ins Gespräch zu kommen. Ein Beispiel für einen Hinweis war: "Einen Telefonanruf von einer unbekannten Number erhalten".

Users Select a Charade Topic

Wir haben diese Prompts in einem Google Sheet gespeichert und dann die id um sie abzurufen. Wir haben einen anderen Bedingungsknoten verwendet, je nachdem, welche Kategorie der Benutzer ausgewählt hat.

Charade Prompts Stored in Google Sheets

Jeder dieser Abläufe führte zu einem benutzerdefinierten Code-Knoten. Der benutzerdefinierte Code-Knoten gibt eine zufällige $SCHARADE_ZAHLDiese Nummer entspricht der ID der Scharadeaufforderung, die in Google Sheets gespeichert ist. Zum Beispiel, "Coding Concepts" war die Scharade Nummer 1 bis 45, so dass wir den folgenden Code in den benutzerdefinierten Code-Knoten und die Ausgabe zu verwenden $SCHARADEN_NUMMER.

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

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

Wir konnten nun unsere $CHARADE_NUMBER verwenden, um die Eingabeaufforderung im Google Sheet nachzuschlagen. Wir mussten nur einen Webhook-Knoten mit einer GET-Anfrage an das Google Sheet. Die Webhook-Konfiguration:

• Methode: GET

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

• Abfrage-Parameter:

  • id : $CHARADE_NUMBER

• Antwort-Mapping

• Objekt-Pfad: [0]["charade_prompt"], Parameter: $CHARADE_PROMPT

Wie das genau geht, erfahren Sie in Wie man einen GET-Anfrage-Endpunkt für Google Sheets erstellt.

Vierter Schritt: Aufforderung zur Scharade anzeigen und Einsendung sammeln

Sobald wir wieder unsere $CHARADE_PROMPT von unserer GET-Anfrage in unserem Google Sheet erhalten haben, geben wir es an unseren Nutzer aus und warten auf seine Eingabe. Hier haben wir im Knoten Collect Input angegeben, dass der Nachrichtentyp ein Foto sein sollte, andernfalls haben wir eine Fehlermeldung ausgegeben und den Nutzer gebeten, es erneut zu versuchen. Wir speicherten die Eingabe in einem Parameter namens $CHARADE_PHOTO.

Users Respond with Charade Photos

Schritt Fünf: Einreichung an Slack senden

Der nächste Schritt bestand darin, diese Übermittlung an Slack zu senden. Wir verwendeten einen weiteren Webhook-Knoten mit dem folgenden:

• Methode: POST

• URL anfordern: Unsere Slack Eingehende Webhook-URL. Diese URL wurde für einen speziellen Kanal festgelegt, den wir für die Veranstaltung namens #cityjs-charades erstellt haben.

• Körper: Wir haben unsere Nachricht etwas formatiert, um sie schöner zu gestalten.

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

Eine Schritt-für-Schritt-Anleitung zur Einrichtung Ihrer Slack-App und des eingehenden Webhooks finden Sie unter Einrichten einer Slack-App.

Und so sah es aus, als ein Beitrag auf Slack gepostet wurde!

Submissions are Automatically Added to Slack

Sechster Schritt: Optionaler Tweet

Zusätzlich zur Aktivierung der Konferenzbesucher in unserer Slack-Community wollten wir auch die Aktivität in den sozialen Medien erhöhen. Also fügten wir einfach einen weiteren Collect Input-Knoten hinzu und gaben den Nutzern die Möglichkeit, sich tweeten zu lassen und in diesem Fall ihren Twitter-Handle hinzuzufügen, um sie zu markieren.

Users Can Opt-In For Twitter Submissions

Unabhängig davon, ob die Nutzer den Tweets zugestimmt haben oder nicht, wurden alle Informationen mithilfe eines weiteren Webhook-Knotens in einem Google Sheet gespeichert. Dieses Mal wurden mit einer POST-Anfrage die folgenden Informationen für jede Übermittlung gesendet: WhatsApp-Name, Telefonnummer, Twitter-Zustimmung, Twitter-Handle, Link zum Scharade-Foto und die Scharade-Aufforderung, auf die der Nutzer geantwortet hat. Sie können sehen, wie man eine POST-Anfrage an Google Sheets erstellen um diese Informationen von AI Studio zu übermitteln.

Dieses Google Sheet machte es einem Kollegen leicht, alle relevanten Informationen zu twittern und bei Bedarf Sicherungskopien für später zu erstellen. Wir haben dieses Blatt auch verwendet, um die Gewinner am Ende der Konferenz zu benachrichtigen.

Am Ende haben wir 16 Beiträge für Tweets erhalten. Diese von der Community gesteuerten Beiträge haben wirklich Spaß gemacht, unsere Timeline aufzumischen!

We had 16 Awesome Charade Tweets

Schritt Sieben: Schleife und andere Ströme

Wenn die Benutzer das Spiel beendet hatten, fragten wir sie, ob sie zum Hauptmenü zurückkehren wollten. Damit wollten wir ihnen eine weitere Chance geben, das kostenlose API-Guthaben zu nutzen. In anderen Agenten hatten wir Abläufe, die Benutzer zu unserem Entwickler-Blog, spezifischer Dokumentation oder anderen Angeboten der Entwickler-Community, wie z. B. Stellenangeboten, führten. Sie können sehen, wie man Schleifen und Subflows erstellen um Ihren Agenten besser zu organisieren.

Add Looping and a Friendly Goodbye Message

Schlussfolgerung

Das Scharade-Spiel war ein großer Erfolg! Mehrere Teilnehmer kamen immer wieder zu unserem Stand zurück, um zu erfahren, wie sie abgeschnitten hatten, und einige teilten sogar den Slack-Link mit Freunden außerhalb der Konferenz, um mehr Stimmen zu bekommen.

Our Competition and Backpack Winner

Es gab jedoch einige Verbesserungen für das nächste Mal. Erstens hatten wir ein paar verschiedene QR-Codes an unserem Stand. Es ist wichtig, daran zu denken, dass man am Stand vielleicht nur für ein paar Sekunden die Aufmerksamkeit der Leute hat, also müssen die Dinge so einfach wie möglich sein. Ich würde das Erlebnis vielleicht vereinfachen, indem ich die Flows "How To Play" und "Free API Credit" entferne. Bei der Erstellung schien es eine gute Idee zu sein, aber im wirklichen Leben hat fast niemand darauf geklickt, stattdessen klickten sie einfach auf "Play" und fanden es heraus oder fragten uns persönlich.

In diesem Sinne würde ich auch die Aufforderungen zur Scharade viel einfacher gestalten. Bei der Erstellung befürchtete ich, dass die Spieler die gleichen, sich wiederholenden Aufforderungen erhalten würden. In Wirklichkeit war es viel schlimmer: Ich habe 85 Aufforderungen erstellt, aber viele waren viel zu schwierig, um sie auf Fotos darzustellen.

Bei einer früheren Konferenz habe ich mit einem AI Studio-Agenten ein digitales "Speed-Dating" durchgeführt, bei dem verschiedene Teilnehmer zusammengebracht wurden. Dieses Mal habe ich ein Scharade-Spiel entwickelt. Aber das ist erst der Anfang! Ich denke bereits über weitere interaktive, spielerische Erfahrungen für unsere Konferenzstände nach! Was ist Ihre Idee?

Wenn Sie einen lustigen WhatsApp-Konferenzstand bauen wollen oder einfach nur etwas Cooles mit No-Code/Low-Code bauen wollen, melden Sie sich bei mir auf dem Vonage Community Slack. Sie können uns auch folgen unter VonageDev auf X folgen, um uns an unserem nächsten Konferenzstand zu finden.