Outil gratuit - sans inscription
Intégrer un jeu concours sur le site de votre client
Renseignez l'URL du jeu, récupérez le code prêt à coller : iframe avec auto-hauteur, balise script ou shortcode WordPress avec son mini plugin. Aucune donnée n'est envoyée à nos serveurs, tout se génère dans votre navigateur.
Paramètres de l'intégration
Le code se met à jour en direct. Rien n'est envoyé à nos serveurs : tout se passe dans votre navigateur.
1.Iframe + script auto-hauteur
La méthode universelle, recommandée : elle fonctionne sur n'importe quel site (CMS, site sur mesure, page de destination). Collez ce bloc à l'endroit exact où le jeu doit apparaître.
<!-- Jeu Gainstant : iframe + auto-hauteur -->
<iframe
class="gainstant-embed"
src="https://jeu.marque.fr"
title="Jeu concours"
style="width:100%;border:0;display:block;"
height="700"
loading="lazy"
allowfullscreen></iframe>
<script>
// Le jeu Gainstant publie sa hauteur via postMessage :
// on ajuste l'iframe correspondante, pas de double ascenseur.
// Ce script ne doit figurer qu'une fois par page, même avec
// plusieurs jeux (ils partagent la classe gainstant-embed).
window.addEventListener("message", function (event) {
if (!event.data || typeof event.data.gainstantHeight !== "number") return;
var iframes = document.querySelectorAll("iframe.gainstant-embed");
for (var i = 0; i < iframes.length; i++) {
// L'iframe émettrice est celle dont la fenêtre a envoyé le message.
if (event.source === iframes[i].contentWindow) {
iframes[i].style.height = event.data.gainstantHeight + "px";
}
}
});
</script>2.Balise script autonome
Une seule ligne à coller : le script crée l'iframe et gère la hauteur tout seul. Honnêteté oblige : cette variante nécessite le fichier embed.js fourni avec le jeu livré par Gainstant (il est hébergé avec le jeu, il n'existe pas de CDN public). Si vous n'avez pas encore votre jeu, utilisez la variante iframe ci-dessus.
<!-- Jeu Gainstant : balise script autonome -->
<!-- Nécessite le fichier embed.js fourni avec le jeu livré, -->
<!-- hébergé au même endroit que le jeu (pas de CDN externe). -->
<script
src="https://jeu.marque.fr/embed.js"
data-gainstant-url="https://jeu.marque.fr"
data-gainstant-hauteur="700"
data-gainstant-titre="Jeu concours"
defer></script>3.Shortcode WordPress
Pour WordPress : installez le mini plugin ci-dessous (une seule fois), puis collez ce shortcode dans n'importe quelle page, article ou widget. L'iframe et l'auto-hauteur sont gérées par le plugin.
[gainstant url="https://jeu.marque.fr" hauteur="700" titre="Jeu concours"]Le jeu livré par Gainstant publie sa hauteur via postMessage : l'iframe s'ajuste toute seule, sans double ascenseur ni cookie.
Iframe intégrée ou mini-site dédié ?
Un jeu Gainstant est livré sur son propre sous-domaine, par exemple jeu.marque.fr : c'est le mini-site dédié, idéal comme page d'atterrissage de campagne (e-mail, SMS, QR code sur PLV). L'intégration en iframe répond à un autre besoin : afficher le même jeu au coeur du site de la marque, entre le menu et le pied de page qu'elle connaît déjà. Les deux approches se combinent : un seul hébergement du jeu, deux façons de le présenter, zéro double maintenance.
L'auto-hauteur, la fin du double ascenseur
Le défaut classique des iframes, c'est la hauteur fixe : trop courte, le jeu affiche sa propre barre de défilement ; trop longue, un grand vide s'installe sous le jeu. Les jeux livrés par Gainstant publient leur hauteur réelle à la page hôte via postMessage, l'API standard de communication entre fenêtres. Le petit script fourni avec le code d'intégration écoute ces messages, identifie l'iframe émettrice et ajuste sa hauteur au pixel près, à chaque étape du jeu (formulaire, animation, écran de gain). Vous fixez seulement une hauteur initiale, le reste est automatique.
WordPress : un plugin de deux fichiers
Pour les sites WordPress, le mini plugin téléchargeable ajoute le shortcode [gainstant] : l'URL du jeu, une hauteur initiale, un titre accessible, et c'est en ligne. Le plugin échappe proprement chaque attribut (esc_url, esc_attr), charge l'iframe en lazy loading et n'imprime le script d'auto-hauteur qu'une seule fois, même si la page contient plusieurs jeux. Son code, sous licence GPL, tient sur un écran et se relit avant installation.
Sécurité et confidentialité
L'iframe isole naturellement le jeu : il s'exécute sur son propre domaine, sans accès au contenu ni aux données du site hôte. Les intégrateurs qui veulent verrouiller davantage peuvent ajouter l'attribut sandbox de l'iframe (avec les permissions allow-scripts, allow-forms et allow-same-origin nécessaires au jeu). Et comme les jeux Gainstant fonctionnent sans cookie ni service externe, l'intégration ne change rien au bandeau de consentement du site qui l'accueille.
Questions fréquentes
›L'iframe va-t-elle ralentir le site de mon client ?
Non, à condition de la charger intelligemment : le code généré inclut l'attribut loading="lazy", donc le navigateur ne charge le jeu que lorsque le visiteur s'en approche. Le jeu s'exécute ensuite dans son propre contexte, sans bloquer le rendu de la page hôte ni alourdir son JavaScript.
›Comment éviter le double ascenseur dans l'iframe ?
C'est le rôle de l'auto-hauteur : le jeu livré par Gainstant mesure sa propre hauteur et la publie à la page hôte via postMessage (un champ gainstantHeight numérique). Le petit script fourni écoute ces messages, retrouve l'iframe émettrice et ajuste sa hauteur. Résultat : l'iframe épouse toujours le contenu du jeu, aucune barre de défilement interne.
›Le jeu dépose-t-il des cookies sur le site de mon client ?
Non. Les jeux Gainstant fonctionnent sans cookie ni traceur tiers, et le code d'intégration n'en ajoute aucun : ni le script auto-hauteur ni le plugin WordPress ne stockent quoi que ce soit. Le site hôte n'a donc pas à modifier son bandeau de consentement pour afficher le jeu.
›Puis-je intégrer le jeu sur WordPress sans toucher au thème ?
Oui : installez le mini plugin téléchargeable sur cette page (Extensions > Ajouter > Téléverser), puis collez le shortcode [gainstant url="..."] dans n'importe quelle page, article ou widget. Le plugin imprime l'iframe correctement échappée et ajoute le script d'auto-hauteur une seule fois, même avec plusieurs jeux sur la même page.
›Iframe intégrée ou mini-site dédié : que choisir ?
Les deux se combinent bien. Le mini-site dédié (jeu.marque.fr) sert de page d'atterrissage pour les campagnes e-mail, SMS ou QR code ; l'iframe permet en plus d'afficher le même jeu au coeur du site de la marque, dans son habillage habituel. Comme le jeu est hébergé à un seul endroit, les deux affichages restent synchronisés sans double maintenance.
Le code d'intégration est prêt. Et le jeu ?
Roue de la fortune, grattage, instants gagnants : nous développons le jeu sur mesure en marque blanche, livré avec son auto-hauteur et sa conformité RGPD documentée.
Composer un jeu - devis sous 4 h →