Superficie dei piccoli componenti
Il tuo componente React deve solo renderizzare iframe, dimensionarlo e, facoltativamente, gestire i gestori di eventi.
widget di gioco React
Widget di gioco React per giochi browser
I team che utilizzano React non hanno bisogno di creare un gioco da zero per aggiungere un widget giocabile. È sufficiente renderizzare un Games I Know iframe all'interno di un componente React, passare l'URL del frame e rimanere in ascolto degli eventi postMessage quando l'app principale necessita dello stato del gioco.
Componente iframe
listener di messaggi React
Wrapper responsivo
Supporto per il completamento firmato
Risposta breve
Utilizza un percorso frame, quindi aggiungi il contesto della pagina.
In React, crea un piccolo componente iframe per /embed/{gameSlug}/frame/, passa tenantId come parametro URL e allega un listener di messaggi per gli eventi Games I Know.
Prova il widget di gioco compatibile con React
La demo mostra gli eventi iframe e della pagina principale a cui la tua app React può iscriversi.
Gli sviluppatori React aggiungono un gioco embed
Perché i team React usano un widget iframe
Un iframe mantiene separato il runtime del gioco dalla tua app, consentendo comunque l'integrazione basata sugli eventi.
Nessun pacchetto motore di gioco incluso
Il gioco non aumenta le dimensioni del bundle della tua applicazione React con logica di gioco, risorse o codice in tempo reale.
Confine di integrazione chiaro
L'applicazione principale può reagire agli eventi senza essere collegata direttamente ai meccanismi interni del gioco.
Flusso di configurazione
Come creare un widget di gioco in React
Avvolgi iframe in un componente, memorizza l'URL del frame se necessario e rimuovi i listener dei messaggi al momento dello smontaggio.
Passo 1
Crea un componente GameWidget
Esegui il rendering di un iframe con larghezza 100%, altezza stabile, allow="fullscreen", e l'URL del frame Games I Know.
Passo 2
Configurazione del tenant di passaggio
Crea l'attributo src con il tuo tenantId e, facoltativamente, con il campaignId, in modo che i dati della tua dashboard rimangano organizzati.
Passo 3
Ascolta in usoEffetto
Aggiungi window.addEventListener("message", handler) e filtra i messaggi in cui data.source è gamesiknow.
Passo 4
Verifica prima di ricevere i premi
Se l'app React sblocca delle ricompense, contatta il tuo backend e verifica i risultati firmati prima di assegnare qualsiasi premio.
Implementazione
Note di implementazione di React
Mantieni il componente iframe semplice. La maggior parte dei bug deriva da dimensionamenti instabili, listener duplicati o dall'eccessiva fiducia nei messaggi del browser.
Utilizzare una chiave stabile
Non rimontare iframe su ogni rendering del genitore. Mantieni src stabile a meno che non cambino le impostazioni del gioco o del tenant.
Ascoltatori che fanno pulizia
Restituisci una funzione di pulizia da useEffect in modo che la modalità di sviluppo di React non lasci gestori di eventi duplicati.
Separare l'interfaccia utente dalla verifica.
React può mostrare il risultato rapidamente, ma le decisioni relative a premi o crediti devono essere prese sul tuo server.
Giochi disponibili
Scegli il gioco più adatto alla pagina
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 configurazione
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 configurazione
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed configurazione
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed configurazione
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed configurazione
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed configurazione
FAQ
Domande frequenti su widget di gioco React
Qual è la differenza tra /embed/{gameSlug}/ e /embed/{gameSlug}/frame/?
Utilizza /embed/{gameSlug}/frame/ come src di iframe. Questa route è il frame di gioco leggero creato per i embed del sito web e gli eventi postMessage. La route /embed/{gameSlug}/ è la pagina di anteprima pubblica e SEO per gli utenti, non la route da inserire all'interno di un iframe.
I visitatori devono scaricare un'app o creare un account?
No. I visitatori possono giocare all'interno del browser iframe su telefono, tablet, laptop o computer desktop. Un account partner è necessario solo al proprietario del sito web che installa embed.
Posso limitare embed al mio dominio?
Sì. I Games I Know e embed sono progettati per siti web registrati e impostazioni di tenant con restrizioni di dominio, quindi il codice iframe copiato non può essere riutilizzato liberamente su siti non autorizzati.
Quali titoli Games I Know sono attualmente embed disponibili?
Tic Tac Toe, Four in a Row, Bingo e I Know sono disponibili come giochi per browser embed. La documentazione embed utilizza lo stesso modello di eventi per tutti i giochi supportati.
Games I Know è un pacchetto React?
No. Games I Know embed sono basati su iframe. Questo mantiene la configurazione indipendente dal framework, pur funzionando correttamente all'interno dei componenti React.
Pronti ad aggiungere un gioco al browser?
Crea un account partner, registra il tuo dominio e genera un iframe con restrizioni di dominio per il tuo sito web.