Oberfläche kleiner Bauteile
Ihre React-Komponente muss lediglich das iframe rendern, dessen Größe festlegen und optional Ereignisbehandler verwalten.
React-Spiel-Widget
React-Spiel-Widget für Browserspiele
React-Teams müssen kein Spiel von Grund auf neu entwickeln, um ein spielbares Widget hinzuzufügen. Rendern Sie ein Games I Know iframe innerhalb einer React-Komponente, übergeben Sie die Frame-URL und reagieren Sie auf postMessage-Ereignisse, wenn die übergeordnete Anwendung den Spielstatus benötigt.
Iframe-Komponente
React-Nachrichten-Listener
Responsiver Wrapper
Unterzeichnete Abschlussbestätigung
Kurzantwort
Verwenden Sie eine Frame-Route und fügen Sie anschließend den Seitenkontext hinzu.
Erstellen Sie in React eine kleine iframe-Komponente für /embed/{gameSlug}/frame/, übergeben Sie tenantId als URL-Parameter und fügen Sie einen Message-Listener für Games I Know-Ereignisse hinzu.
Probieren Sie das React-kompatible Spiel-Widget aus.
Die Demo zeigt das iframe und die übergeordneten Seitenereignisse, die Ihre React-App abonnieren kann.
React-Entwickler fügen ein Spiel hinzu embed
Warum React-Teams ein iframe-Widget verwenden
Ein iframe hält die Spiellaufzeitumgebung von Ihrer App getrennt und ermöglicht gleichzeitig eine ereignisbasierte Integration.
Kein Game-Engine-Bundle
Das Spiel vergrößert Ihr React-Anwendungsbundle nicht um Spiellogik, Assets oder Echtzeitcode.
Klare Integrationsgrenze
Die übergeordnete App kann auf Ereignisse reagieren, ohne direkt an die internen Abläufe des Spiels gekoppelt zu sein.
Ablauf einrichten
Wie man ein Spiel-Widget in React mit embed erstellt
Binden Sie iframe in eine Komponente ein, speichern Sie bei Bedarf die Frame-URL zwischen und löschen Sie die Message-Listener beim Unmount.
Schritt 1
Erstellen Sie eine GameWidget-Komponente
Rendern Sie ein iframe mit einer Breite von 100 %, einer festen Höhe, allow="fullscreen", und der Games I Know Frame-URL.
Schritt 2
Mandantenkonfiguration übergeben
Erstellen Sie die Quelle mit Ihrer Mandanten-ID und optional Ihrer Kampagnen-ID, damit Ihre Dashboard-Daten übersichtlich bleiben.
Schritt 3
Hören Sie in useEffect
Füge window.addEventListener("message", handler) hinzu und filtere Nachrichten, bei denen data.source gamesiknow ist.
Schritt 4
Vor der Prämienvergabe überprüfen.
Wenn die React-App Belohnungen freischaltet, rufen Sie Ihr Backend auf und überprüfen Sie die signierten Ergebnisse, bevor Sie etwas gewähren.
Durchführung
React-Implementierungshinweise
Die iframe-Komponente sollte möglichst unauffällig bleiben. Die meisten Fehler entstehen durch instabile Dimensionierung, doppelte Listener oder zu großes Vertrauen in Browsermeldungen.
Verwenden Sie einen stabilen Schlüssel
iframe sollte nicht bei jedem Rendern des übergeordneten Elements neu eingebunden werden. Die Quelldatei sollte stabil bleiben, es sei denn, die Spiel- oder Mandanteneinstellungen ändern sich.
Zuhörer aufräumen
Gibt von useEffect eine Aufräumfunktion zurück, damit der React-Entwicklungsmodus keine doppelten Ereignisbehandler hinterlässt.
Benutzeroberfläche und Verifizierung trennen
React kann das Ergebnis schnell anzeigen, aber Preis- oder Gutschriftsentscheidungen sollten auf Ihrem Server getroffen werden.
Verfügbare Spiele
Wähle das Spiel aus, das zur Seite passt.
Tic Tac Toe
Embed for same-screen play on your site, or send players to Games I Know to challenge a friend remotely with a room link.
Embed Setup
Four in a Row
Embed for local two-player drops on one screen, or link friends to play Four in a Row online from anywhere.
Embed Setup
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed Setup
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed Setup
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed Setup
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed Setup
Häufig gestellte Fragen
Häufig gestellte Fragen zu React-Spiel-Widget
Was ist der Unterschied zwischen /embed/{gameSlug}/ und /embed/{gameSlug}/frame/?
Verwenden Sie /embed/{gameSlug}/frame/ als iframe-Quelle. Diese Route ist der schlanke Spiel-Frame, der für Website-embed- und postMessage-Ereignisse erstellt wurde. Die Route /embed/{gameSlug}/ ist die öffentliche Vorschau- und SEO-Seite für Benutzer und nicht die Route, die in einem iframe platziert werden soll.
Müssen Besucher eine App herunterladen oder ein Konto erstellen?
Nein. Besucher können direkt im Browser auf ihrem Smartphone, Tablet, Laptop oder Desktop-Computer spielen. Ein Partnerkonto wird nur vom Website-Betreiber benötigt, der die Anwendung installiert.
Kann ich embed auf meine eigene Domäne beschränken?
Ja. Games I Know und embed sind für registrierte Websites und domainbeschränkte Mandanteneinstellungen konzipiert, daher kann kopierter iframe-Code nicht frei auf nicht autorisierten Websites wiederverwendet werden.
Welche Games I Know Titel sind derzeit embeddbar?
Tic Tac Toe, Four in a Row, Bingo und I Know sind als embed-fähige Browserspiele verfügbar. Die embed-Dokumentation verwendet für alle unterstützten Spiele dasselbe Ereignismodell.
Ist Games I Know ein React-Paket?
Nein. Games I Know und embed basieren auf iframe. Dadurch bleibt die Einrichtung frameworkunabhängig und funktioniert gleichzeitig einwandfrei innerhalb von React-Komponenten.
Bereit, ein Browserspiel hinzuzufügen?
Erstellen Sie ein Partnerkonto, registrieren Sie Ihre Domain und generieren Sie eine domainbeschränkte iframe für Ihre Website.