Intégrer un widget de mots mêlés sur votre site

Vous avez un blog, un site éducatif ou un espace de classe ? Et si vous y ajoutiez un jeu de mots mêlés jouable directement dans la page — sans inscription, sans publicité, sans backend ? C'est exactement ce que propose le widget embarquable Mots-Cachés. Ce guide explique comment l'intégrer en 5 minutes, le personnaliser et profiter des nouvelles fonctions d'aide au jeu.

1. Pourquoi intégrer un widget plutôt qu'un simple lien

Un lien vers une grille externe oblige le visiteur à quitter votre site. Un widget s'intègre dans la page, directement jouable dans un cadre (iframe). Concrètement :

• Zéro friction. Le visiteur clique et joue, sans redirection ni inscription.
• 43 thèmes disponibles, du vocabulaire CP aux thèmes adultes (cuisine, cinéma, monuments, mythologie…).
• Personnalisable : couleur, apparence claire/sombre, taille, hauteur.
• Aucun cookie tiers, aucun tracking : le widget reste 100 % anonyme.
• Gratuit tant qu'il reste utilisé sur un site légitime.

C'est adapté à de nombreux contextes : blog de mots croisés, site pédagogique, page classe, espace d'atelier pour seniors, site de jeux en ligne. Si vous préférez créer vos propres listes de mots (vocabulaire d'une leçon, invités d'un mariage, termes d'un domaine), le générateur de grilles personnalisées est complémentaire : vous exportez ensuite la grille créée vers votre site.

2. Intégration en 3 étapes

1. Choisissez une grille. Rendez-vous sur le générateur et sélectionnez un thème dans le menu déroulant (Animaux, Cuisine, CP — Animaux, CM1 — Histoire…). Le widget proposera une grille au hasard dans ce thème, renouvelable par le visiteur via le bouton 🔄 Nouvelle grille.
2. Personnalisez l'apparence. Couleur principale, apparence clair/sombre/auto, taille compacte/moyenne/grande, hauteur initiale de l'iframe. Le code se met à jour en direct.
3. Copiez le code. Le générateur produit un bloc <iframe> + un <script> à coller dans votre page. Le script widget-embed.js n'est à inclure qu'une seule fois par page, même si vous affichez plusieurs widgets.

3. Personnalisation disponible

4. Thème aléatoire ou grille précise ?

Le mode thème est le plus polyvalent : vous choisissez une catégorie, le widget pioche une grille au hasard à chaque chargement, et le bouton 🔄 Nouvelle grille propose d'autres grilles du même thème (mémoire de session, exclusion circulaire). Idéal pour un blog où vous voulez de la variété sans maintenance.

Le mode grille précise est réservé aux cas pédagogiques où vous ciblez une grille particulière (par exemple, une grille préparée pour une leçon). Il s'active via le champ Grille précise (avancé) du générateur.

5. Aide au jeu : loupe, indices et affichage

Depuis 2026, le widget intègre trois outils d'aide accessibles depuis le header, utiles surtout sur les grandes grilles (15×15 et plus) :

• 🔍 Loupe. Affiche une fenêtre 5×5 (paramétrable 3 à 7) qui suit le curseur au-dessus de la grille. La case centrale est cerclée de bleu, les mots trouvés apparaissent en vert, la sélection en jaune. Désactivée par défaut, activable en un clic ; la préférence du visiteur est mémorisée dans son navigateur.
• 💡 Indice. Révèle la première lettre d'un mot encore à trouver (choisi au hasard). La case passe en ambre et le mot dans la liste apparaît en italique. 3 indices maximum par grille.
• 👁 Afficher un mot. Surligne un mot entier pendant 1,5 seconde (contour bleu), puis efface. 1 affichage maximum par grille.

Aucun de ces outils ne valide un mot à votre place : le score X/Y reste inchangé quand vous les utilisez. Ils servent à débloquer, pas à tricher.

Pour bien calibrer la difficulté de la grille proposée, voyez notre guide des 4 niveaux de Mots-Cachés (facile, moyen, difficile, expert) : tailles, temps moyens et profils.

6. Auto-resize : l'iframe s'adapte à la hauteur réelle

Un problème classique des widgets embarqués : l'iframe reste à une hauteur fixe et fait apparaître une barre de défilement interne. Le widget Mots-Cachés résout ce problème en communiquant sa hauteur réelle au site hôte via postMessage. Le script widget-embed.js ajuste automatiquement l'iframe à la bonne hauteur, à chaque changement (ouverture d'une définition, ajout d'un mot, etc.).

Points techniques utiles :

• Utilisez loading="lazy" sur l'iframe : le widget ne se charge que quand le visiteur fait défiler la page jusqu'à lui. Aucun impact sur le temps de chargement initial.
• La valeur height déclarée dans l'iframe sert de hauteur initiale ; elle est ensuite ajustée dynamiquement.
• Le script widget-embed.js est à inclure une seule fois dans la page, avant la fermeture du <body>.

7. Un exemple de code prêt à coller

Voici le code minimal pour afficher un widget de thème Animaux, apparence automatique, taille moyenne :

<iframe
  src="https://mots-caches.com/widget/grille/theme/animaux"
  width="100%"
  height="500"
  style="border:1px solid #e5e7eb;border-radius:8px;max-width:100%;"
  loading="lazy"
  title="Mots mêlés — Mots-Cachés.com"
></iframe>
<script src="https://mots-caches.com/assets/js/widget-embed.js" async></script>

La hauteur déclarée (500 px) est une valeur de départ : le widget la remplace automatiquement par la hauteur réelle de son contenu dès qu'il est chargé. Le script widget-embed.js n'est à inclure qu'une seule fois par page, même si vous affichez plusieurs widgets. Pour d'autres thèmes, remplacez animaux par le slug souhaité (ex : cuisine, mythologie, cm1-histoire).

8. Quatre cas d'usage concrets

9. Ce que le widget ne fait pas

Par transparence, voici les fonctions non couvertes par le widget embarquable :

• Pas de sauvegarde de scores côté serveur. La progression est mémorisée localement dans le navigateur du visiteur (badges, grilles vues). Aucune donnée personnelle n'est envoyée à Mots-Cachés.
• Pas de compte utilisateur. Aucune inscription, aucune authentification.
• Pas de mode multijoueur ni de classement. Le jeu est individuel, chacun sur sa grille.
• Pas de personnalisation de la liste de mots. Pour créer votre propre liste, utilisez plutôt le générateur de grilles qui exporte un PDF imprimable.

10. Erreurs à éviter

• Iframe trop petite. Si le contenu dépasse la hauteur, une barre de défilement apparaît. Laissez plutôt widget-embed.js ajuster la hauteur — ne fixez pas de height trop restrictif.
• Inclure widget-embed.js plusieurs fois. Le script doit être présent une seule fois par page, avant la fermeture du <body>. En cas de doublon, le listener postMessage peut se déclencher en double.
• Oublier loading="lazy". Sans cet attribut, l'iframe se charge immédiatement, ce qui pèse sur le temps de chargement initial. Avec, le widget ne se charge qu'à l'approche du visiteur.
• Utiliser un ?id= inexistant. Le widget renvoie une page "Grille introuvable". Préférez le mode par thème si vous n'êtes pas sûr du numéro.
• Couleur de texte illisible. Si vous personnalisez ?color= avec une teinte très claire (ex : ffffff), le texte du bouton CTA s'adapte automatiquement mais d'autres contrastes peuvent être moins bons. Testez visuellement.

11. Questions fréquentes

Le widget est-il vraiment gratuit ?

Oui, à 100 %. Aucune inscription, aucun paiement, aucune limite de vues. Il doit simplement rester utilisé sur des sites légitimes (pas de spam, pas de scraping automatisé).

Puis-je personnaliser les couleurs ?

Oui : couleur principale en hexadécimal, thème visuel (clair / sombre / auto) et taille (compacte / moyenne / grande). Le générateur crée le code pour vous.

Y a-t-il une limite de requêtes ?

Un rate limit de 30 requêtes/minute par visiteur s'applique (10/minute pour l'API JSON). C'est largement suffisant pour un usage normal. Contactez-nous si vous prévoyez un très gros volume.

Puis-je utiliser le widget sur plusieurs pages ?

Oui, sans limite. Vous pouvez intégrer autant de widgets que vous voulez, sur autant de pages que vous voulez, avec des thèmes ou des grilles différentes. Aucune inscription n'est requise.

Pour le public scolaire, voyez nos articles dédiés : mots mêlés CP-CE1-CE2, mots mêlés CM1-CM2 et maternelle / GS.

À retenir

• Le widget Mots-Cachés s'intègre en 3 étapes : choisir, personnaliser, copier-coller.
• 43 thèmes disponibles, du vocabulaire scolaire aux thèmes adultes.
• Personnalisation : couleur, apparence, taille, hauteur, taille de la loupe.
• 3 aides au jeu : loupe 🔍, indice 💡 (3 par grille), afficher un mot 👁 (1 par grille).
• Auto-resize : l'iframe s'adapte à la hauteur réelle, pas de scrollbar interne.
• Gratuit, sans inscription, sans cookie tiers.

Sources

• MDN — postMessage (communication entre fenêtres)
• MDN — Élément iframe