Le contenu SEO reste rendu côté serveur
Les titres, guides, FAQ et schémas peuvent être rendus en HTML pendant le chargement du jeu dans une fenêtre.
Widget de jeu Astro
Widget de jeu Astro pour sites statiques et hybrides
Les sites Astro peuvent générer rapidement des pages indexables tout en proposant un jeu fonctionnel. Conservez les titres, le texte et le schéma dans la page Astro, intégrez les balises Games I Know et iframe dans le corps de la page, et utilisez un petit script client ou une interface spécifique uniquement lorsque des événements du navigateur sont nécessaires.
Pages compatibles avec les éléments statiques
Client JS minimal
copie indexable
Route de la trame Iframe
Réponse courte
Utilisez une route de cadre, puis ajoutez le contexte de la page.
Dans Astro, créez une page indexable avec des métadonnées et une FAQ, puis insérez-y le cadre `embed /embed/{gameSlug}/frame/`. Ajoutez un script client pour la fonction `postMessage` lorsque vous avez besoin des événements `GAME_STARTED` ou de fin de partie.
Essayez le widget de jeu compatible avec Astro
La démo en direct reproduit le modèle iframe et le modèle de journal d'événements que vous pouvez placer sur une page de contenu Astro.
Les développeurs d'Astro ajoutent un jeu iframe
Pourquoi Astro fonctionne bien avec les widgets de jeu iframe
Astro excelle dans la création de pages riches en contenu. Le jeu reste dans un iframe, vous n'incluez donc pas la logique du jeu dans le package principal.
Empreinte client réduite
Seuls les écouteurs d'événements ou les assistants plein écran ont besoin de JavaScript côté client.
Même embed partout
Utilisez le même modèle d'URL de cadre sur Astro, Next.js, WordPress et les sites personnalisés.
Flux de configuration
Comment ajouter un widget de jeu dans Astro
Créez une route avec des métadonnées frontmatter, placez iframe dans le modèle et isolez la messagerie du navigateur dans un script client.
Étape 1
Créer la page Astro
Ajoutez un titre, une description, une URL canonique et un texte utile autour de l'emplacement du jeu.
Étape 2
Afficher le iframe
Utilisez l'URL du cadre Games I Know avec votre tenantId dans le corps de la page ou dans un petit composant partiel.
Étape 3
Ajoutez la messagerie client si nécessaire
Utilisez un script client:load ou une île pour écouter les événements postMessage provenant de iframe.
Étape 4
Vérifier les résultats signés côté serveur
Utilisez une route API ou un point de terminaison backend pour vérifier l'achèvement avant d'octroyer des récompenses.
Mise en œuvre
Notes d'implémentation Astro
Considérez la page Astro comme la surface SEO et iframe comme la limite de l'application jouable.
Ne pas iframe la page d'accueil
Utilisez /embed/{gameSlug}/frame/ à l'intérieur du iframe. Conservez /embed/{gameSlug}/ comme lien explorable normal.
Réserve iframe hauteur
Définissez une hauteur fixe proche de 640px pour réduire le décalage de la mise en page lors du chargement de la fenêtre de jeu.
Ajouter un schéma de FAQ
Le schéma FAQ et HowTo sur la page Astro aide les moteurs de recherche et les systèmes AI à comprendre l'intégration.
Jeux disponibles
Choisissez le jeu qui convient à la page
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.
Embed configuration
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.
Embed configuration
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed configuration
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed configuration
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed configuration
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed configuration
FAQ
Questions fréquentes concernant Widget de jeu Astro
Quelle est la différence entre /embed/{gameSlug}/ et /embed/{gameSlug}/frame/?
Utilisez /embed/{gameSlug}/frame/ comme source de iframe. Cette route correspond au cadre de jeu léger conçu pour les événements embed du site web et les événements postMessage. La route /embed/{gameSlug}/ est la page de prévisualisation publique et la page optimisée pour le référencement (SEO) ; elle ne doit pas être placée dans un iframe.
Les visiteurs doivent-ils télécharger une application ou créer un compte ?
Non. Les visiteurs peuvent jouer directement dans le navigateur iframe sur téléphone, tablette, ordinateur portable ou ordinateur de bureau. Un compte partenaire est uniquement nécessaire au propriétaire du site web qui installe embed.
Puis-je limiter embed à mon propre domaine ?
Oui. Les Games I Know et embed sont conçus autour de sites Web enregistrés et de paramètres de locataires restreints au domaine, de sorte que le code iframe copié ne peut pas être librement réutilisé sur des sites non autorisés.
Quels titres Games I Know sont actuellement embeddable ?
Les jeux Tic Tac Toe, Four in a Row, Bingo et I Know sont disponibles en tant que jeux navigateur jouables (embed). La documentation embed utilise le même modèle d'événements pour tous les jeux compatibles.
Puis-je utiliser Games I Know avec la sortie statique Astro ?
Oui. Le contenu de la page peut être entièrement statique (HTML). iframe charge le jeu depuis Games I Know lors de l'exécution dans le navigateur du visiteur.
Prêt à ajouter un jeu par navigateur ?
Créez un compte partenaire, enregistrez votre domaine et générez un iframe à restriction de domaine pour votre site web.