O conteúdo de SEO permanece renderizado no servidor.
Títulos, guias, perguntas frequentes e esquemas podem ser renderizados em HTML enquanto o jogo carrega em um frame.
Widget de jogo Astro
Widget de jogo Astro para sites estáticos e híbridos
Sites Astro podem gerar páginas rápidas e indexáveis, mantendo ainda uma experiência de jogo jogável. Mantenha os títulos, o conteúdo e o esquema na página Astro, renderize o Games I Know iframe no corpo da página e utilize um pequeno script ou componente do lado do cliente apenas onde os eventos do navegador forem necessários.
Páginas compatíveis com sistemas estáticos
JavaScript mínimo para o cliente
Cópia indexável
rota de quadro Iframe
Resposta curta
Utilize uma rota de frame e, em seguida, adicione o contexto da página.
No Astro, crie uma página indexável com metadados e conteúdo de perguntas frequentes (FAQ) e, em seguida, insira o frame embed /embed/{gameSlug}/frame/ na página. Adicione um script do lado do cliente para o evento postMessage quando precisar de eventos GAME_STARTED ou de conclusão do jogo.
Experimente o widget de jogo compatível com Astro
A demonstração ao vivo espelha o padrão iframe e o registro de eventos que você pode inserir em uma página de conteúdo Astro.
Os desenvolvedores da Astro estão adicionando um jogo iframe
Por que o Astro funciona bem com os widgets de jogo iframe
Astro se destaca em páginas com muito conteúdo. O jogo permanece em um iframe, portanto, você não precisa incluir a lógica do jogo no pacote principal.
pequena presença de clientes
Apenas os ouvintes de eventos ou os auxiliares de tela cheia precisam do JavaScript do lado do cliente.
O mesmo embed em todos os lugares
Use o mesmo padrão de URL de frame em Astro, Next.js, WordPress e sites personalizados.
Fluxo de configuração
Como adicionar um widget de jogo no Astro
Crie uma rota com metadados frontmatter, coloque o iframe no modelo e isole as mensagens do navegador em um script do cliente.
Etapa 1
Crie a página de Astrologia
Adicione título, descrição, URL canônica e um texto útil sobre a localização do jogo.
Etapa 2
Renderize o iframe
Utilize a URL do frame Games I Know com o seu tenantId no corpo da página ou em um pequeno componente parcial.
Etapa 3
Adicione mensagens para o cliente, se necessário.
Use um script client:load ou island para escutar eventos postMessage do iframe.
Etapa 4
Verificar resultados assinados no servidor
Use uma rota API ou um endpoint de backend para verificar a conclusão antes de conceder recompensas.
Implementação
Notas de implementação do Astro
Considere a página Astro como a superfície de SEO e o iframe como o limite da aplicação jogável.
Não iframe a página inicial
Use /embed/{gameSlug}/frame/ dentro de iframe. Mantenha /embed/{gameSlug}/ como um link rastreável normal.
Reserve iframe altura
Defina uma altura fixa próxima de 640px para reduzir a mudança de layout quando o frame do jogo for carregado.
Adicionar esquema de perguntas frequentes
O esquema de perguntas frequentes e instruções na página Astro ajuda os mecanismos de busca e os sistemas AI a entenderem a integração.
Jogos disponíveis
Escolha o jogo que se encaixa na 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.
Configuração 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.
Configuração Embed
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Configuração Embed
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Configuração Embed
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Configuração Embed
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Configuração Embed
Perguntas frequentes
Perguntas frequentes sobre Widget de jogo Astro
Qual é a diferença entre /embed/{gameSlug}/ e /embed/{gameSlug}/frame/?
Use /embed/{gameSlug}/frame/ como o src do iframe. Essa rota é o frame de jogo leve criado para embeds de sites e eventos postMessage. A rota /embed/{gameSlug}/ é a página de pré-visualização pública e SEO para usuários, não a rota para ser inserida em um iframe.
Os visitantes precisam baixar um aplicativo ou criar uma conta?
Não. Os visitantes podem jogar dentro do navegador iframe em celulares, tablets, laptops ou computadores. Uma conta de parceiro é necessária apenas para o proprietário do site que instala o embed.
Posso restringir o embed ao meu próprio domínio?
Sim. Os termos Games I Know e embed são projetados para sites registrados e configurações de locatário com restrição de domínio, portanto, o código copiado de iframe não pode ser reutilizado livremente em sites não autorizados.
Quais títulos Games I Know estão atualmente disponíveis para embed?
Tic Tac Toe, Four in a Row, Bingo e I Know estão disponíveis como jogos de navegador compatíveis com embed. A documentação de embed utiliza o mesmo modelo de eventos em todos os jogos suportados.
Posso usar Games I Know com a saída estática do Astro?
Sim. O conteúdo da página pode ser HTML totalmente estático. O iframe carrega o jogo do Games I Know em tempo de execução no navegador do visitante.
Pronto para adicionar um jogo ao navegador?
Crie uma conta de parceiro, registre seu domínio e gere um iframe com restrição de domínio para seu site.