Small component surface
Your React component only needs to render the iframe, size it, and optionally manage event handlers.
React game widget
React game widget for browser games
React teams do not need to build a game from scratch to add a playable widget. Render a GamesIKnow iframe inside a React component, pass the frame URL, and listen for postMessage events when the parent app needs game state.
Iframe component
React message listener
Responsive wrapper
Signed completion support
Short answer
Use a frame route, then add page context.
In React, create a small iframe component for /embed/{gameSlug}/frame/, pass tenantId as a URL parameter, and attach a message listener for GamesIKnow events.
Try the React-friendly game widget
The demo shows the iframe and the parent-page events your React app can subscribe to.
React developers adding a game embed
Why React teams use an iframe widget
An iframe keeps the game runtime separate from your app while still allowing event-based integration.
No game engine bundle
The game does not increase your React application bundle with board logic, assets, or real-time code.
Clear integration boundary
The parent app can react to events without coupling directly to game internals.
Setup flow
How to embed a game widget in React
Wrap the iframe in a component, memoize the frame URL if needed, and clean up message listeners on unmount.
Step 1
Create a GameWidget component
Render an iframe with width 100%, a stable height, allow="fullscreen", and the GamesIKnow frame URL.
Step 2
Pass tenant configuration
Build the src with your tenantId and optional campaignId so your dashboard data stays organized.
Step 3
Listen in useEffect
Attach window.addEventListener("message", handler) and filter messages where data.source is gamesiknow.
Step 4
Verify before rewards
If the React app unlocks rewards, call your backend and verify signed results before granting anything.
Implementation
React implementation notes
Keep the iframe component boring. Most bugs come from unstable sizing, duplicate listeners, or trusting browser messages too much.
Use a stable key
Do not remount the iframe on every parent render. Keep src stable unless the game or tenant settings change.
Clean up listeners
Return a cleanup function from useEffect so React development mode does not leave duplicate event handlers.
Separate UI from verification
React can show the result quickly, but prize or credit decisions should happen on your server.
Available games
Choose the game that fits the page
Tic Tac Toe
Embed for same-screen play on your site, or send players to GamesIKnow 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
FAQ
Common questions about React game widget
What is the difference between /embed/{gameSlug}/ and /embed/{gameSlug}/frame/?
Use /embed/{gameSlug}/frame/ as the iframe src. That route is the lightweight game frame built for website embeds and postMessage events. The /embed/{gameSlug}/ route is the public preview and SEO page for people, not the route to place inside an iframe.
Do visitors need to download an app or create an account?
No. Visitors can play inside the browser iframe on phone, tablet, laptop, or desktop. A partner account is only needed by the website owner who installs the embed.
Can I restrict the embed to my own domain?
Yes. GamesIKnow embeds are designed around registered websites and domain-restricted tenant settings, so copied iframe code cannot be freely reused on unauthorized sites.
Which GamesIKnow titles are currently embeddable?
Tic Tac Toe, Four in a Row, Bingo, and I Know are available as embeddable browser games. The embed documentation uses the same event model across supported games.
Is GamesIKnow a React package?
No. GamesIKnow embeds are iframe-based. That keeps setup framework-agnostic while still working cleanly inside React components.
Ready to add a browser game?
Create a partner account, register your domain, and generate a domain-restricted iframe for your website.