Intégrer des jeux HTML5 sur un site d'entreprise

Il existe trois façons d'ajouter un jeu au site d'une entreprise : intégrer par iframe un jeu hébergé par un tiers, déposer les fichiers du jeu sur votre propre espace web et les afficher dans une page, ou prendre un jeu sous licence, sous forme de pack, et le publier comme le vôtre. La première est la plus rapide à tester. La deuxième vous donne le plus de maîtrise. La troisième s'impose quand le jeu doit porter durablement votre marque.

Ce guide s'adresse aux entreprises, aux agences et aux propriétaires de sites sous WordPress, Wix, développés sur mesure, ou à un intranet ou un portail. Il compare les options, propose une check-list à parcourir avant la mise en ligne et détaille le contenu d'un pack Polar Games. Ce sont des informations générales, pas un conseil juridique.

Trois façons de mettre un jeu sur votre site

1. Intégrer par iframe. Un jeu hébergé ailleurs s'affiche dans un cadre de votre page. Vous écrivez une seule balise, mais le jeu, ses mises à jour et sa disponibilité restent entre les mains de son hébergeur.
2. Héberger les fichiers vous-même. Vous déposez le dossier du jeu sur votre espace web et l'ouvrez à votre propre adresse, seul ou dans un iframe sur l'une de vos pages. Pour nos packs, un hébergement qui sert des fichiers statiques suffit : ni PHP, ni base de données, ni compte n'est nécessaire pour jouer.
3. Prendre un jeu sous licence, en pack. Le studio livre un dossier prêt à héberger, le code source modifiable et un manuel, avec une licence pour un produit final. Vous l'hébergez, et vous pouvez modifier le code, les visuels et l'audio au sein de ce produit.

Parcourir les modèles de jeux HTML5

Iframe ou hébergement propre : le comparatif

• Vitesse : le cadre charge le jeu depuis le serveur de son hébergeur, votre page en dépend donc. Les fichiers hébergés chez vous se chargent depuis une adresse que vous contrôlez.
• Maîtrise : chez vous, vous décidez de l'adresse, de la page qui entoure le jeu, du cache et des mises à jour. Avec l'intégration d'un tiers, c'est l'hébergeur qui décide, et il peut modifier ou retirer le jeu.
• Cookies et consentement : un jeu chargé depuis une adresse tierce oblige vos visiteurs à contacter cette adresse, et ce tiers peut déposer ses propres cookies ou mesurer les visites. Des fichiers hébergés par vos soins proviennent de votre domaine. Publicités et outils d'analyse, où qu'ils s'exécutent, peuvent exiger un consentement : faites vérifier les règles qui vous concernent par un conseiller qualifié.
• Référencement : ne comptez pas sur un jeu placé dans un iframe pour fournir du texte à votre page. Rédigez votre propre titre, une courte description, les consignes de jeu, et placez un lien autour du jeu.

La balise iframe, attribut par attribut

Un exemple type d'intégration pour un jeu que vous hébergez. Les remarques sur les attributs proviennent de la référence iframe de MDN.

<iframe src="https://votre-site.example/jeux/mon-jeu/" title="Mon jeu" loading="lazy" allow="fullscreen" width="960" height="540" style="border:0"></iframe>

• title : selon MDN, les utilisateurs de lecteurs d'écran s'en servent pour identifier le contenu du cadre, et il doit décrire ce contenu de façon concise.
• allow="fullscreen" : MDN définit l'ancien attribut allowfullscreen comme équivalent à allow="fullscreen *". Sans cette permission, un cadre provenant d'une autre adresse ne peut pas passer en plein écran.
• sandbox : omettez-le pour un jeu que vous hébergez. MDN déconseille fortement de combiner allow-scripts et allow-same-origin dans un cadre de même origine, car le cadre peut alors supprimer lui-même son sandbox.
• Cadre vide ou refus de connexion : le serveur qui héberge le jeu peut envoyer X-Frame-Options (DENY interdit toute intégration, SAMEORIGIN n'autorise que la même origine) ou une règle frame-ancestors dans un en-tête Content-Security-Policy, que MDN recommande à la place. Modifiez l'en-tête pour le dossier du jeu, ou servez la page et le jeu depuis une même adresse.

Check-list avant de publier

1. HTTPS partout. Une page https ne peut pas charger un iframe http : MDN range les scripts et les iframes parmi les requêtes que les navigateurs bloquent en tant que contenu mixte.
2. Mobiles. Testez sur un vrai téléphone, dans les deux orientations, au sein de votre page.
3. Son. D'après MDN, les navigateurs n'autorisent en général la lecture automatique d'un son audible qu'après une interaction du visiteur avec la page. Attendez-vous au silence jusqu'au premier toucher et concevez l'écran de démarrage autour d'un toucher.
4. Plein écran et langues. Vérifiez que le bouton plein écran apparaît dans le cadre et que les langues du jeu couvrent votre public.
5. Accessibilité de base. Donnez un titre au cadre, proposez un lien qui ouvre le jeu seul, contrôlez la taille du texte et les contrastes, et indiquez les commandes. Gardez les informations essentielles en texte ordinaire dans la page, pas dans le jeu.
6. Confidentialité et consentement. Listez ce qui s'exécute sur la page : scripts publicitaires, outils d'analyse, polices provenant d'autres hébergeurs. Mettez à jour votre politique de confidentialité. Si vous utilisez de la publicité ou des outils d'analyse, demandez à votre conseiller si la législation locale exige un consentement.

Ce que contient un pack Polar Games

Chaque édition détaille son contenu sur sa page de la boutique, et vous pouvez essayer une démo en ligne avant d'acheter. En règle générale, vous recevez :

• Un dossier game/ prêt à héberger. Les prérequis indiqués pour nos éditions sont un navigateur récent et n'importe quel hébergement HTTP(S) qui sert des fichiers statiques. L'hébergement n'exige ni base de données ni étape de compilation. Deux éditions, Zabum et Ricopop, proposent un classement optionnel qui nécessite PHP 7.4 ou une version plus récente.
• Un dossier source/ modifiable et un manuel dans documentation/, avec des chapitres sur l'installation et la personnalisation.

Cinq éditions, dont Gridspark et Velvet Pool, sont en JavaScript pur. Les autres sont écrites en TypeScript et certaines s'appuient sur des bibliothèques comme Three.js ou Phaser, mais le dossier game/ est déjà compilé. Node.js n'est nécessaire que pour modifier et recompiler le code source.

Non inclus : l'hébergement, l'installation sur votre serveur, la personnalisation, les nouvelles fonctionnalités et l'intégration de SDK ou de portails. Les conditions les présentent comme des prestations distinctes, chiffrées avant tout travail. Le support couvre les questions sur l'installation et l'utilisation des fichiers fournis ainsi que les défauts reproductibles, pendant 6 mois, ou 12 mois avec l'extension.

Découvrir Gridspark, une édition de puzzle en JavaScript pur

Découvrir Velvet Pool, une édition de billard en 3D

Licence, facturation et achats groupés

• Une licence couvre un produit final, le vôtre ou celui d'un client. Une agence qui travaille pour plusieurs clients a besoin d'une licence pour le produit de chacun.
• La licence est perpétuelle : elle n'expire pas à la fin du support. Les visiteurs peuvent jouer gratuitement ou via une monétisation publicitaire.
• Nous émettons une nota fiscal brésilienne sur demande, ou une facture pour les clients à l'étranger.
• L'achat de plusieurs articles ensemble donne droit à une remise sur les prix catalogue : 5 % pour deux, 10 % pour trois, 15 % pour quatre, 20 % à partir de cinq.

Quand un jeu à vos couleurs devient pertinent

Un modèle standard suffit quand vous voulez rapidement un bon jeu sur une page. Une version sur mesure se justifie quand le jeu doit porter votre logo, vos couleurs, vos textes et vos règles, quand il doit s'accorder à une campagne, ou quand il doit fonctionner sur une plateforme que vous utilisez déjà. Nous réalisons des projets sur mesure et en marque blanche. Les tarifs et les délais dépendent du travail demandé, nous n'en affichons donc aucun : envoyez-nous le modèle qui vous plaît et ce que vous souhaitez changer, puis demandez un devis.

Contact : willian@polargames.com.br

FAQ

Un jeu dans un iframe aide-t-il le référencement de ma page ?

Ne comptez pas dessus. Rédigez titres, description et consignes autour du jeu, sous forme de texte ordinaire dans la page.

Les jeux contiennent-ils de la publicité ou du suivi ?

Les éditions indiquent que les SDK publicitaires et les comptes publicitaires ne sont pas inclus. Ce que votre propre page ajoute, comme des outils d'analyse ou de la publicité, relève de vous : c'est à vous de l'indiquer et, lorsque c'est exigé, de recueillir le consentement.

Prochaine étape

Choisissez un jeu dans la boutique, essayez la démo et lisez son manuel. Retenez ensuite la formule qui convient à votre site, et écrivez-nous si vous voulez y apposer votre marque.

Parcourir les modèles de jeux HTML5

Jeux HTML5 en marque blanche : ce que vous recevez

Licencier des jeux HTML5 ou acheter le code source ?

Advergame : jeu de marque HTML5 pour une campagne