Camada fina do componente
Seu componente Angular apenas renderiza o iframe, define as dimensões e conecta as saídas de eventos opcionais.
Widget de jogo Angular
Widget de jogo Angular para jogos de navegador
Aplicações Angular podem embed um jogo jogável no navegador sem importar um mecanismo de jogo para o pacote. Renderize um Games I Know iframe em um componente, vincule a URL do frame com segurança e inscreva-se em eventos postMessage quando o aplicativo host precisar de sinais de jogabilidade.
Modelo de componente
Ouvinte de mensagens
Responsivo iframe
Apoio à conclusão assinada
Resposta curta
Utilize uma rota de frame e, em seguida, adicione o contexto da página.
Em Angular, crie um componente com um iframe apontando para /embed/{gameSlug}/frame/, passe tenantId na string de consulta e fique atento aos eventos de mensagem da janela onde data.source é gamesiknow.
Experimente o widget de jogo compatível com Angular.
A demonstração mostra os eventos iframe e da página pai que seu serviço ou componente Angular pode manipular.
Desenvolvedores Angular adicionando um jogo embed
Por que as equipes do Angular usam um widget iframe
Um iframe mantém o ambiente de execução do jogo fora do seu pacote Angular, permitindo ainda o tratamento de eventos tipados em serviços ou componentes.
Não há lógica de jogo no aplicativo.
As regras do conselho, os ativos e o comportamento em tempo real permanecem dentro da rota do quadro Games I Know.
limite seguro para a estrutura
Use @HostListener ou um serviço de mensagens dedicado, sem acoplamento com os mecanismos internos do jogo.
Fluxo de configuração
Como criar um widget de jogo no Angular
Crie um componente independente ou um componente de recurso, vincule um URL de frame estável e limpe os listeners quando o componente for destruído.
Etapa 1
Crie um componente GameWidget
Adicione um iframe com largura de 100%, altura estável próxima de 640px, allow="fullscreen" e a URL do frame Games I Know.
Etapa 2
Construa a URL do frame
Componha /embed/{gameSlug}/frame/ com tenantId e campaignId opcional da configuração de ambiente ou de tempo de execução.
Etapa 3
Ouça com @HostListener ou um serviço.
Manipule os eventos de mensagens da janela e filtre por data.source === "gamesiknow" para GAME_STARTED e completion.
Etapa 4
Verifique antes de receber as recompensas.
Se o aplicativo Angular desbloquear conteúdo, encaminhe os tokens assinados para o seu backend e verifique-os com uma chave de servidor parceira antes de conceder as recompensas.
Implementação
Notas de implementação do Angular
Mantenha o iframe src estável durante os ciclos de detecção de alterações e cancele a inscrição dos manipuladores de mensagens ao destruir.
Evite remontar o iframe
Não recrie o iframe a cada passagem de detecção de alterações. Vincule o src apenas uma vez, a menos que o locatário ou o jogo mudem.
Use a limpeza ngOnDestroy
Remova os listeners de mensagens quando o componente for destruído para evitar manipuladores duplicados no modo de desenvolvimento.
Separar a interface do usuário da verificação.
O Angular consegue exibir a interface do vencedor rapidamente, mas os créditos e prêmios devem ser definidos no 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 Angular
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 é uma biblioteca Angular ou um pacote npm?
Não. Games I Know embeds são baseados em iframe, o que mantém a integração leve em Angular, React, Next.js, Astro e outras stacks.
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.