Comment ajouter des jeux à votre site web

La plupart des sites web sont conçus pour être lus, parcourus rapidement ou parcourus en quelques clics. C'est pratique, mais cela peut aussi donner une impression de stagnation. Intégrer un jeu simple dans le navigateur permet aux visiteurs de se divertir sans avoir à télécharger d'application, à créer un compte joueur ou à quitter la page.

La méthode la plus simple pour ajouter des jeux à votre site web consiste généralement à utiliser un jeu (ou widget de jeu). Il suffit d'insérer un petit extrait de code HTML sur une page, et le jeu s'exécute dans une fenêtre autonome. est conçu précisément pour cela : des jeux légers pour navigateur, parfaitement adaptés aux blogs, sites WordPress, sites web de petites entreprises, pages communautaires, sites scolaires, restaurants et projets de développeurs.

Réponse rapide : comment ajouter des jeux à un site web ?

Pour ajouter des jeux à votre site web, choisissez un jeu pour navigateur, copiez le code du widget de jeu fourni par le fournisseur, collez-le dans votre CMS ou application, testez-le sur mobile et publiez la page avec des textes explicatifs autour du jeu. Avec les éléments `Games I Know` et `Embed`, l'élément `iframe` utilise une URL dédiée `/embed/{gameSlug}/frame/` et un identifiant de locataire fourni par votre partenaire.

1. Choisissez un jeu adapté à la page et au public.
2. Utilisez l'URL du cadre iframe fournie par la plateforme embed.
3. Collez le iframe dans WordPress, un constructeur de site web ou votre composant React/Next.js.
4. Définir une hauteur stable, un attribut de titre clair, le chargement différé et la prise en charge du plein écran.
5. Prévisualisez la page sur mobile et ordinateur avant publication.

Qu'est-ce qu'un widget de jeu pour un site web ?

Un widget de jeu web est un petit jeu jouable dans le navigateur, intégré à une page web classique. Dans la plupart des cas, le widget fonctionne comme un widget GIK : le jeu est hébergé par le fournisseur, tandis que votre site contrôle le contenu de l’article, de la page d’accueil, de la page de ressources ou de la page professionnelle qui l’entoure.

Pourquoi ajouter des jeux à votre site web ?

Un jeu ne doit pas nécessairement transformer votre site en portail de jeux. Pour de nombreux sites web, l'idéal est de l'intégrer brièvement à une page plus longue : une activité rapide sur un article de blog, un jeu pour patienter sur la page QR d'un restaurant, une activité de classe sur un site scolaire ou une pause ludique sur une page communautaire.

• Les jeux peuvent contribuer à rendre une page statique plus attrayante.
• Les visiteurs ont la possibilité d'effectuer une action sans quitter la page.
• Les blogs et les sites communautaires peuvent devenir plus mémorables lorsque la page inclut une interaction simple.
• Les petites entreprises peuvent ajouter une touche ludique sans avoir à créer une application entièrement personnalisée.
• Les développeurs et les agences peuvent ajouter un widget de site Web interactif avec un petit iframe isolé.

Meilleures façons d'ajouter des jeux à un site web

Il existe plusieurs façons d'intégrer des jeux à un site web. Le choix le plus adapté dépend de votre plateforme, du niveau de contrôle souhaité et de votre désir de développer le jeu vous-même.

Utiliser un jeu iframe embed

L'utilisation de iframe embed est souvent la solution la plus rapide. Le jeu est hébergé par le fournisseur, tandis que votre page lui réserve un espace. Cela permet de séparer l'exécution du jeu du code de votre page et de rendre l'extrait de code compatible avec de nombreuses plateformes.

Utilisez un widget de jeu

Un widget de jeu est généralement un iframe auquel s'ajoutent des paramètres par défaut utiles : une taille recommandée, un titre clair, la prise en charge du mode plein écran et parfois des messages d'événements que votre page parente peut recevoir. C'est le modèle pratique qui sous-tend Games I Know et Embed.

Ajouter des jeux HTML5

Les jeux par navigateur modernes sont souvent qualifiés de jeux HTML5 car ils fonctionnent directement dans le navigateur sur téléphone, tablette, ordinateur portable et ordinateur de bureau. Vous pouvez héberger votre propre jeu HTML5, mais la plupart des propriétaires de sites web privilégient une plateforme comme GIK_TERM_0 afin de ne pas avoir à gérer eux-mêmes le moteur de jeu, les ressources, l'interface mobile et les corrections de bugs.

Ajoutez des jeux à WordPress avec un bloc HTML personnalisé

Dans WordPress, la solution la plus simple consiste à utiliser un bloc HTML personnalisé. Collez l'extrait de code iframe, prévisualisez la page et ajustez le texte et la mise en page. Si votre installation WordPress supprime les balises iframe, vous aurez peut-être besoin des droits d'administrateur ou d'une extension autorisant iframe.

Ajoutez des jeux en React ou Next.js

Dans React ou Next.js, affichez iframe comme un composant et conservez la source de la fenêtre stable. Si vous souhaitez obtenir des données analytiques ou des événements de jeu, écoutez les événements postMessage de confiance provenant de la fenêtre Games I Know dans un composant client.

Créez un jeu personnalisé à partir de zéro.

Un jeu personnalisé peut être une bonne solution si le jeu lui-même est votre produit. Pour un blog classique, un site d'agence, une page d'école ou une page d'entreprise locale, un jeu personnalisé est généralement plus rapide et plus facile à gérer.

Option la plus simple : utilisez GamesIKnow Embed

GamesIKnow Embed permet aux propriétaires de sites web d'ajouter des jeux gratuits pour navigateur pendant la phase bêta grâce à une simple iframe. Les visiteurs peuvent jouer directement dans leur navigateur, sans téléchargement d'application ni inscription. Ces jeux sont légers, optimisés pour les mobiles et conçus pour les pages nécessitant un bloc interactif rapide plutôt qu'une plateforme de jeu complète.

Les jeux actuellement disponibles sur embeddable incluent Tic Tac Toe, Four in a Row, Bingo, I Know, Sudoku et Mots croisés. Ils conviennent parfaitement aux blogs, aux écoles, aux restaurants, aux sites web communautaires, aux pages de petites entreprises, aux portails internes et aux sites de développeurs qui ont besoin d'un widget de jeu simple pour navigateur.

Exemple de code embed

Games I Know utilise une route de cadre dédiée iframe pour les sites web embed. La page publique /embed/{gameSlug}/ est la page d'accueil lisible par l'utilisateur. L'attribut src de iframe doit utiliser /embed/{gameSlug}/frame/ avec votre identifiant de locataire disponible sur le tableau de bord partenaire.

<iframe
  src="https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID"
  title="Tic Tac Toe by Games I Know"
  width="100%"
  height="640"
  style="border:0;border-radius:16px;max-width:420px;display:block;margin:0 auto;"
  loading="lazy"
  allow="fullscreen"
  allowfullscreen
></iframe>

La démonstration ci-dessus utilise un locataire de démonstration Games I Know. Pour votre propre site web, créez un compte partenaire, enregistrez votre domaine et utilisez le locataire généré par le tableau de bord ou les valeurs clés embed afin que le cadre soit lié à votre site approuvé.

Comment ajouter des jeux à WordPress

1. Ouvrez la page ou l'article WordPress où vous souhaitez que le jeu apparaisse.
2. Ajoutez un bloc HTML personnalisé près de la section où le jeu doit se dérouler.
3. Collez l'extrait Games I Know iframe de votre tableau de bord embed.
4. Prévisualisez sur ordinateur et mobile, puis ajustez le texte de la section environnante si nécessaire.
5. Publiez la page lorsque la taille du jeu, le titre et la mise en page vous semblent corrects.

Comment ajouter des jeux dans React

Pour React, veillez à ce que le composant iframe reste simple. Transmettez une URL de frame stable, définissez un titre clair pour l'accessibilité, réservez une hauteur raisonnable et ajoutez la gestion des messages postMessage uniquement si votre application nécessite les événements embed.

const gameSrc = "https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID";

export function GameEmbed() {
  return (
    <iframe
      src={gameSrc}
      title="Tic Tac Toe by Games I Know"
      width="100%"
      height={640}
      style={{
        border: 0,
        borderRadius: 16,
        maxWidth: 420,
        display: "block",
        margin: "0 auto",
      }}
      loading="lazy"
      allow="fullscreen"
      allowFullScreen
    />
  );
}

Comment ajouter des jeux dans Next.js

Dans Next.js, veillez à ce que la page soit indexable et contienne des titres pertinents, du texte et une FAQ sur le jeu. iframe peut être rendu dans un composant serveur, tandis que tout écouteur de messages postMessage doit se trouver dans un composant client.

const gameSrc = "https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID";

export default function GamesPage() {
  return (
    <main>
      <h1>Play Tic Tac Toe</h1>
      <iframe
        src={gameSrc}
        title="Tic Tac Toe by Games I Know"
        width="100%"
        height={640}
        style={{
          border: 0,
          borderRadius: 16,
          maxWidth: 420,
          display: "block",
          margin: "0 auto",
        }}
        loading="lazy"
        allow="fullscreen"
        allowFullScreen
      />
    </main>
  );
}

Meilleurs endroits pour ajouter des jeux sur un site web

• Articles de blog où une courte pause interactive s'avère pertinente.
• Pages de ressources qui attirent déjà des visiteurs réguliers.
• Pages communautaires, pages de clubs et sites de groupes locaux.
• Pages d'activités scolaires et plateformes de ressources pour la classe.
• Pages d'attente des restaurants, pages QR des menus et pages d'événements.
• Pages de destination où une interaction minimale vient appuyer l'offre.
• 404 pages ou des pages amusantes où la fantaisie est de mise.

Meilleurs jeux Games I Know pour débuter

Conseils avant d'ajouter des jeux

• Veillez à ce que le jeu reste pertinent par rapport à la page au lieu de l'intégrer systématiquement dans chaque article.
• Testez le iframe sur mobile avant publication.
• Ne surchargez pas une page avec trop de embed actifs.
• Utilisez le chargement différé pour les extraits iframe qui apparaissent sous la première fenêtre d'affichage.
• Veillez à ce que la hauteur de iframe reste raisonnable afin que le jeu soit facile à jouer sans sauts de page intempestifs.
• Utilisez un attribut de titre clair afin que les technologies d'assistance puissent décrire le jeu embedded.
• Suivez les clics, les démarrages ou les tours terminés grâce aux outils d'analyse si les données d'engagement sont importantes pour vous.

Liste de contrôle rapide

1. Choisissez le jeu et vérifiez qu'il correspond à l'objectif de la page.
2. Utilisez l'URL du cadre dédié Games I Know à l'intérieur du iframe.
3. Ajoutez du contenu pertinent autour du jeu afin que la page conserve sa valeur SEO.
4. Prévisualisez la page sur téléphone, tablette et ordinateur.
5. Publiez le widget, puis vérifiez si les visiteurs l'utilisent réellement.