El contenido SEO permanece renderizado en el servidor.
Los encabezados, las guías, las preguntas frecuentes y el esquema pueden mostrarse como HTML mientras el juego se carga en un marco.
Widget de juego Astro
Widget de juegos Astro para sitios estáticos e híbridos
Los sitios Astro pueden generar páginas indexables rápidamente y ofrecer un juego jugable. Mantén los encabezados, el texto y el esquema en la página Astro, renderiza los elementos Games I Know y iframe en el cuerpo y usa un pequeño script del cliente o una isla solo donde se necesiten eventos del navegador.
Páginas compatibles con archivos estáticos
JavaScript de cliente mínimo
Copia indexable
Ruta del marco Iframe
Respuesta corta
Utilice una ruta de marco y, a continuación, añada el contexto de la página.
En Astro, crea una página indexable con metadatos y contenido de preguntas frecuentes, luego embed /embed/{gameSlug}/frame/ en la página. Agrega un script de cliente para postMessage cuando necesites eventos GAME_STARTED o de finalización.
Prueba el widget de juego compatible con Astro
La demostración en vivo reproduce el patrón de registro de eventos y iframe que puede colocar en una página de contenido de Astro.
Los desarrolladores de Astro añaden un juego iframe.
Por qué Astro funciona bien con los widgets de juego iframe
Astro destaca en páginas con mucho contenido. El juego permanece en un iframe para que no tengas que enviar la lógica del juego en el paquete principal.
Huella de cliente reducida
Solo los detectores de eventos o los ayudantes de pantalla completa necesitan JavaScript del lado del cliente.
Mismo embed en todas partes
Utilice el mismo patrón de URL de marco en Astro, Next.js, WordPress y sitios personalizados.
Flujo de configuración
Cómo agregar un widget de juego en Astro
Crea una ruta con metadatos de frontmatter, coloca iframe en la plantilla y aísla los mensajes del navegador en un script del cliente.
Paso 1
Crear la página Astro
Añade título, descripción, URL canónica y texto útil alrededor de la ubicación del juego.
Paso 2
Renderiza el iframe
Utilice la URL del marco Games I Know con su tenantId en el cuerpo de la página o en un pequeño componente parcial.
Paso 3
Agregue mensajería al cliente si es necesario.
Utilice un script o isla client:load para escuchar los eventos postMessage desde iframe.
Paso 4
Verificar los resultados firmados en el servidor.
Utilice una ruta API o un punto final de backend para verificar la finalización antes de otorgar las recompensas.
Implementación
Notas de implementación de Astro
Considere la página de Astro como la superficie SEO y el iframe como el límite de la aplicación jugable.
No iframe la página de destino
Utilice /embed/{gameSlug}/frame/ dentro de iframe. Mantenga /embed/{gameSlug}/ como un enlace rastreable normal.
Reservar iframe altura
Establece una altura fija cercana a los 640 píxeles para reducir el desplazamiento del diseño cuando se carga el marco del juego.
Agregar esquema de preguntas frecuentes
Las preguntas frecuentes y el esquema de instrucciones en la página de Astro ayudan a los motores de búsqueda y a los sistemas AI a comprender la integración.
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 Astro
¿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.
¿Puedo usar Games I Know con la salida estática de Astro?
Sí. El contenido de la página puede ser HTML completamente estático. El elemento iframe carga el juego desde Games I Know en tiempo de ejecución en el navegador del visitante.
¿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.