Thin component layer
Your Angular component only renders the iframe, sets dimensions, and wires optional event outputs.
Angular game widget
Angular game widget for browser games
Angular applications can embed a playable browser game without importing a game engine into the bundle. Render a GamesIKnow iframe in a component, bind the frame URL safely, and subscribe to postMessage events when the host app needs gameplay signals.
Component template
Message listener
Responsive iframe
Signed completion support
Short answer
Use a frame route, then add page context.
In Angular, create a component with an iframe pointing to /embed/{gameSlug}/frame/, pass tenantId in the query string, and listen for window message events where data.source is gamesiknow.
Try the Angular-friendly game widget
The demo shows the iframe and parent-page events your Angular service or component can handle.
Angular developers adding a game embed
Why Angular teams use an iframe widget
An iframe keeps game runtime outside your Angular bundle while still allowing typed event handling in services or components.
No game logic in the app
Board rules, assets, and realtime behavior stay inside the GamesIKnow frame route.
Framework-safe boundary
Use @HostListener or a dedicated message service without coupling to game internals.
Setup flow
How to embed a game widget in Angular
Create a standalone or feature component, bind a stable frame URL, and clean up listeners when the component is destroyed.
Step 1
Create a GameWidgetComponent
Add an iframe with width 100%, a stable height near 640px, allow="fullscreen", and the GamesIKnow frame URL.
Step 2
Build the frame URL
Compose /embed/{gameSlug}/frame/ with tenantId and optional campaignId from environment or runtime config.
Step 3
Listen with @HostListener or a service
Handle window message events and filter on data.source === "gamesiknow" for GAME_STARTED and completion.
Step 4
Verify before rewards
If the Angular app unlocks content, verify signed results on your backend before trusting browser messages.
Implementation
Angular implementation notes
Keep the iframe src stable across change detection cycles and unsubscribe from message handlers on destroy.
Avoid remounting the iframe
Do not recreate the iframe on every change detection pass. Bind src once unless tenant or game changes.
Use ngOnDestroy cleanup
Remove message listeners when the component is destroyed to prevent duplicate handlers in dev mode.
Separate UI from verification
Angular can display winner UI quickly, but credits and prizes should be decided server-side.
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 Angular 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 an Angular library or npm package?
No. GamesIKnow embeds are iframe-based, which keeps the integration lightweight in Angular, React, Next.js, Astro, and other stacks.
Ready to add a browser game?
Create a partner account, register your domain, and generate a domain-restricted iframe for your website.