SEO page stays indexable
Your page can include headings, copy, links, FAQs, and schema around the game frame.
Next.js game widget
Next.js game widget for websites
Next.js sites can add a playable game without shipping a game engine in the app bundle. Use an indexable page for the content, render the GamesIKnow frame for play, and handle events in a client component when needed.
App Router friendly
Indexable page copy
Client event handling
Framework-safe iframe
Short answer
Use a frame route, then add page context.
For Next.js, keep SEO metadata and page copy in the route, then render the GamesIKnow iframe in a client-safe component with /embed/{gameSlug}/frame/ as the src.
Try the Next.js-friendly game widget
The live demo shows the frame route and the event log a Next.js client component can consume.
Next.js teams adding an iframe game
Why this works well in Next.js
Next.js is strongest when the page content and metadata are server-rendered while browser-only behavior stays in focused client components.
No hydration-heavy game logic
The game lives inside the iframe, so your Next.js route stays simpler and faster to maintain.
Clean client boundary
Only the event listener and iframe controls need client-side behavior.
Setup flow
How to add a game widget in Next.js
Create an indexable route, place the iframe in the content, and use a client component only for event handling.
Step 1
Create the route page
Add metadata, canonical URL, page copy, and links for the intent you want the page to serve.
Step 2
Render the iframe
Use the GamesIKnow frame URL with your tenantId inside the page body or a small component.
Step 3
Handle browser events
In a client component, listen for message events and filter on data.source === "gamesiknow".
Step 4
Keep rewards server-side
Use an API route or backend service to verify signed results before granting rewards.
Implementation
Next.js implementation notes
Separate crawler-friendly content from browser-only message handling so the page is useful to both humans and AI search systems.
Use route metadata
Set title, description, canonical, Open Graph tags, and FAQ schema on the public page that hosts the widget.
Do not iframe the landing page
The public /embed/{gameSlug}/ page is indexable content. The iframe should use /embed/{gameSlug}/frame/.
Avoid layout shift
Reserve a fixed game height so the iframe does not push content around after load.
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 Next.js 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.
Should the iframe component be a client component in Next.js?
The iframe markup can be rendered from a server component, but any postMessage listener or fullscreen state should live in a client component.
Ready to add a browser game?
Create a partner account, register your domain, and generate a domain-restricted iframe for your website.