Superfície de componente pequeno
Seu componente React só precisa renderizar o iframe, definir seu tamanho e, opcionalmente, gerenciar os manipuladores de eventos.
widget de jogo React
Widget de jogo React para jogos de navegador
As equipes React não precisam criar um jogo do zero para adicionar um widget jogável. Basta renderizar um Games I Know iframe dentro de um componente React, passar a URL do frame e ficar atento aos eventos postMessage quando o aplicativo principal precisar do estado do jogo.
Componente Iframe
Ouvinte de mensagens React
Wrapper responsivo
Apoio à conclusão assinada
Resposta curta
Utilize uma rota de frame e, em seguida, adicione o contexto da página.
Em React, crie um pequeno componente iframe para /embed/{gameSlug}/frame/, passe o tenantId como um parâmetro de URL e anexe um ouvinte de mensagens para eventos Games I Know.
Experimente o widget de jogo compatível com React.
A demonstração mostra o evento iframe e os eventos da página pai aos quais seu aplicativo React pode se inscrever.
Desenvolvedores React adicionando um jogo embed
Por que as equipes React usam um widget iframe
Um iframe mantém o ambiente de execução do jogo separado do seu aplicativo, permitindo ainda a integração baseada em eventos.
Sem pacote de motor de jogo
O jogo não aumenta o tamanho do pacote da sua aplicação React com lógica de tabuleiro, recursos ou código em tempo real.
Limite de integração claro
O aplicativo principal pode reagir a eventos sem se acoplar diretamente aos mecanismos internos do jogo.
Fluxo de configuração
Como criar um widget de jogo no React
Envolva o iframe em um componente, memorize a URL do frame, se necessário, e limpe os listeners de mensagens ao desmontar.
Etapa 1
Crie um componente GameWidget
Renderize um iframe com largura de 100%, altura fixa, allow="fullscreen" e a URL do frame Games I Know.
Etapa 2
Aprovar configuração de locatário
Crie o arquivo src com seu tenantId e, opcionalmente, campaignId para que os dados do seu painel permaneçam organizados.
Etapa 3
Escute em useEffect
Anexe window.addEventListener("message", handler) e filtre as mensagens onde data.source é gamesiknow.
Etapa 4
Verifique antes de receber as recompensas.
Se o aplicativo React desbloquear recompensas, chame o backend e verifique os resultados assinados antes de conceder qualquer coisa.
Implementação
Notas de implementação do React
Mantenha o componente iframe simples. A maioria dos bugs surge de dimensionamento instável, listeners duplicados ou confiança excessiva nas mensagens do navegador.
Use uma chave estável
Não remonte o iframe a cada renderização do elemento pai. Mantenha o src estável, a menos que as configurações do jogo ou do tenant sejam alteradas.
Limpar ouvintes
Retorne uma função de limpeza do useEffect para que o modo de desenvolvimento do React não deixe manipuladores de eventos duplicados.
Separar a interface do usuário da verificação.
O React pode mostrar o resultado rapidamente, mas as decisões sobre prêmios ou créditos devem ser tomadas no seu servidor.
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 React
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.
Games I Know é um pacote React?
Não. Os componentes Games I Know e embed são baseados em iframe. Isso mantém a configuração independente de frameworks, ao mesmo tempo que funciona perfeitamente dentro dos componentes React.
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.