Superficie de componente pequeño
Tu componente React solo necesita renderizar iframe, dimensionarlo y, opcionalmente, gestionar los controladores de eventos.
Widget de juego React
Widget de juego React para juegos de navegador
Los equipos de React no necesitan crear un juego desde cero para agregar un widget jugable. Renderiza un Games I Know iframe dentro de un componente de React, pasa la URL del marco y escucha los eventos postMessage cuando la aplicación principal necesite el estado del juego.
Componente Iframe
oyente de mensajes de React
Envoltorio adaptable
Soporte de finalización firmado
Respuesta corta
Utilice una ruta de marco y, a continuación, añada el contexto de la página.
En React, crea un pequeño componente iframe para /embed/{gameSlug}/frame/, pasa tenantId como parámetro de URL y adjunta un oyente de mensajes para los eventos Games I Know.
Prueba el widget de juego compatible con React
La demostración muestra el iframe y los eventos de la página principal a los que tu aplicación React puede suscribirse.
Desarrolladores de React agregando un juego embed
¿Por qué los equipos de React utilizan un widget iframe?
Un iframe mantiene el entorno de ejecución del juego separado de tu aplicación, al tiempo que permite la integración basada en eventos.
Paquete sin motor de juego
El juego no añade lógica de tablero, recursos ni código en tiempo real al paquete de tu aplicación React.
Límite de integración claro
La aplicación principal puede reaccionar a los eventos sin acoplarse directamente a los componentes internos del juego.
Flujo de configuración
Cómo agregar un widget de juego en React
Envuelva el componente iframe en otro componente, almacene en memoria la URL del marco si es necesario y limpie los oyentes de mensajes al desmontar el componente.
Paso 1
Crea un componente GameWidget
Renderiza un iframe con un ancho del 100%, una altura estable, permite "pantalla completa" y la URL del marco Games I Know.
Paso 2
Configuración del inquilino
Crea el código fuente con tu tenantId y, opcionalmente, con el campaignId para que los datos de tu panel de control se mantengan organizados.
Paso 3
Escuchar en useEffect
Adjunte window.addEventListener("message", handler) y filtre los mensajes donde data.source sea gamesiknow.
Paso 4
Verificar antes de recibir recompensas
Si la aplicación React desbloquea recompensas, llama a tu backend y verifica los resultados firmados antes de otorgar cualquier recompensa.
Implementación
Notas de implementación de React
Mantén el componente iframe simple. La mayoría de los errores provienen de un tamaño inestable, oyentes duplicados o de confiar demasiado en los mensajes del navegador.
Utilice una clave estable.
No vuelva a montar iframe en cada renderizado principal. Mantenga src estable a menos que cambien los ajustes del juego o del inquilino.
Limpiar oyentes
Devuelve una función de limpieza desde useEffect para que el modo de desarrollo de React no deje controladores de eventos duplicados.
Separar la interfaz de usuario de la verificación
React puede mostrar el resultado rápidamente, pero las decisiones sobre premios o créditos deben tomarse en tu servidor.
Juegos disponibles
Elige el juego que mejor se ajuste a la página.
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.
Configuración de Embed
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.
Configuración de Embed
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Configuración de Embed
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Configuración de Embed
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Configuración de Embed
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Configuración de Embed
Preguntas frecuentes
Preguntas frecuentes sobre Widget de juego React
¿Cuál es la diferencia entre /embed/{gameSlug}/ y /embed/{gameSlug}/frame/?
Utilice /embed/{gameSlug}/frame/ como src de iframe. Esta ruta es el marco de juego ligero creado para los embed del sitio web y los eventos postMessage. La ruta /embed/{gameSlug}/ es la página de vista previa pública y SEO para los usuarios, no la ruta que se debe colocar dentro de un iframe.
¿Los visitantes necesitan descargar una aplicación o crear una cuenta?
No. Los visitantes pueden jugar dentro del navegador iframe en teléfono, tableta, computadora portátil o de escritorio. Solo el propietario del sitio web que instala embed necesita una cuenta de socio.
¿Puedo restringir el embed a mi propio dominio?
Sí. Los Games I Know y embed están diseñados en torno a sitios web registrados y configuraciones de inquilino con dominio restringido, por lo que el código iframe copiado no se puede reutilizar libremente en sitios no autorizados.
¿Qué títulos de Games I Know están actualmente disponibles en embed?
Tic Tac Toe, Four in a Row, Bingo y I Know están disponibles como juegos de navegador compatibles con embed. La documentación de embed utiliza el mismo modelo de eventos en todos los juegos compatibles.
¿Games I Know es un paquete de React?
No. Los Games I Know y embed se basan en iframe. Esto mantiene la configuración independiente del framework y, al mismo tiempo, funciona correctamente dentro de los componentes de React.
¿Listo para agregar un juego de navegador?
Crea una cuenta de socio, registra tu dominio y genera un iframe restringido al dominio para tu sitio web.