Enseignants & école

Comment intégrer un widget Anagramme sur son site

Vous avez un blog, un site éducatif, un espace de classe ou un site de jeux ? Et si vous y ajoutiez un jeu d'anagramme jouable directement dans la page — sans inscription, sans backend, sans cookie ? Le widget embarquable Anagramme Mots-Cachés propose exactement cela. Ce guide montre comment l'intégrer en 5 minutes et en tirer le meilleur parti.

1. Pourquoi un widget d'anagramme plutôt qu'un lien externe

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

  • Zéro friction. Le visiteur joue immédiatement, sans redirection.
  • Temps passé sur la page multiplié par 3 à 7. Un jeu capte l'attention et favorise le référencement naturel.
  • Mode quotidien : le même mot pour tous les visiteurs du jour → un rituel qui fidélise.
  • Mode aléatoire : un mot différent à chaque visite, avec un bouton « Jouer à un autre » intégré.
  • Aucun cookie tiers, aucun tracking, aucune donnée envoyée. Respect total de la vie privée.
  • 100 % gratuit tant qu'il reste utilisé sur un site légitime.

2. Ce que fait concrètement le widget Anagramme

Le principe est simple : le widget affiche une série de lettres mélangées accompagnées d'un indice (la définition courte du mot cible). Le joueur doit reconstituer le mot en cliquant les lettres ou en le tapant au clavier. À la bonne réponse, le widget récompense en dévoilant la définition complète du mot.

Deux boutons complètent l'expérience :

  • 💡 Voir la réponse : dévoile immédiatement le mot et sa définition (utile en cas de blocage).
  • 🔄 Jouer à un autre : charge un nouveau mot du même thème en une fraction de seconde, sans rechargement de page.

3. Intégration en 3 étapes

  1. Choisissez le mode. Allez sur le générateur et sélectionnez quotidien (rendez-vous) ou aléatoire (variété).
  2. Personnalisez. Filtrez par thème (Moyen Âge, Animaux, Cuisine…), imposez une longueur de mot (6 à 10 lettres), choisissez la couleur principale et le thème visuel (clair, sombre, auto).
  3. Copiez le code. Le générateur produit un bloc <iframe> + un <script>. Le script widget-embed.js n'est à inclure qu'une seule fois par page, même si vous affichez plusieurs widgets.

4. Paramètres disponibles

ParamètreValeursEffet
motex. PRINCECible un mot précis (pour une fiche dédiée par exemple).
thememoyen-age, animaux…Restreint le mot à un thème (slug du thème).
longueur6 à 15Impose la longueur exacte du mot.
modequotidien, aleatoireMême mot 24 h pour tous, ou nouveau à chaque visite.
colorhex 6 (ex. 3b82f6)Couleur principale (lettres, boutons, accents).
theme_uiauto, light, darkApparence visuelle. auto suit les préférences du visiteur.
sizesm, md, lgDensité du widget (espacements, tailles).

5. Exemple de code prêt à coller

Voici le code minimal pour un widget en mode quotidien, thème visuel automatique :

<iframe
  src="https://mots-caches.com/widget/anagramme-embed?mode=quotidien"
  width="100%"
  height="360"
  style="border:1px solid #e5e7eb;border-radius:8px;max-width:100%;"
  loading="lazy"
  title="Anagramme — Mots-Cachés.com"
></iframe>
<script src="https://mots-caches.com/assets/js/widget-embed.js" async></script>

La hauteur déclarée (360 px) est une valeur de départ : le widget ajuste automatiquement sa hauteur à son contenu réel via postMessage. Le script widget-embed.js n'est à inclure qu'une seule fois par page.

6. Quatre cas d'usage concrets

ProfilRecommandation
📚 Blog littéraireMode quotidien + couleur aux teintes de votre charte. Vos lecteurs reviennent chaque jour pour chercher le mot du jour.
🎓 Espace pédagogiqueMode aléatoire filtré par thème (Sciences, Corps humain…). L'indice sert de rappel sans donner la réponse.
🌍 Site FLEMode aléatoire + longueur 6 ou 7 lettres. Les définitions sont en français accessible.
👨‍👩‍👧 Site familialMode quotidien, un mot par jour à chercher en famille autour de la tablette.

7. 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 laisse apparaître une barre de défilement interne. Le widget Anagramme 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, à chaque changement de contenu (nouveau mot, définition longue affichée, etc.).

Trois bonnes pratiques : loading="lazy" sur l'iframe (le widget ne se charge que quand le visiteur y arrive), width="100%" pour la responsivité, et max-width:100% dans le style pour ne jamais dépasser le conteneur.

8. Ce que le widget ne fait pas

Par transparence, voici ce que le widget ne fait pas :

  • Aucun score sauvegardé côté serveur. Tout est local dans le navigateur.
  • Aucun cookie, aucun tracking. Aucune donnée personnelle n'est transmise.
  • Attribution obligatoire. Un petit lien « Mots-Cachés.com » apparaît en bas du widget — c'est la contrepartie de la gratuité.

9. Comparaison avec les autres widgets Mots-Cachés

Mots-Cachés propose aujourd'hui trois widgets complémentaires, adaptés à des usages différents :

WidgetIdéal pourDurée d'une session
🔤 Anagramme Défi quotidien, apprentissage de l'orthographe, révision de vocabulaire 1 à 3 minutes
❓ Quiz Définitions Évaluation de connaissances, révision, quiz de fin d'article 3 à 8 minutes (5 questions)
🎯 Mots Mêlés Jeu long, détente, occupation, atelier collectif 3 à 15 minutes

Anagramme vs quiz : lequel choisir ?

L'anagramme est un exercice de construction : le joueur doit assembler les lettres pour former le mot. C'est très utile pour mémoriser l'orthographe d'un mot, car le geste mental de reconstituer les lettres ancre la forme écrite.

Le quiz est un exercice de reconnaissance : le joueur doit choisir la bonne réponse parmi plusieurs. C'est très utile pour consolider le sens d'un mot et sa définition.

Pour une page de blog, l'anagramme est souvent privilégié en mode quotidien (rituel qui fidélise), tandis que le quiz convient mieux en fin d'article thématique (test rapide des acquis).

10. Questions fréquentes

Le widget est-il vraiment gratuit ?

Oui, à 100 %. Aucune inscription, aucun paiement, aucune limite de vues. Il reste gratuit tant qu'il est utilisé sur des sites légitimes (pas de spam, pas de scraping automatisé). En contrepartie, un petit lien « Mots-Cachés.com » apparaît en bas du widget — c'est la seule condition.

Combien de mots sont disponibles dans la base ?

Plus de 7 634 mots, chacun avec sa définition courte (indice) et sa définition complète (récompense). Les mots sont répartis dans plus de 43 thèmes : Animaux, Cuisine, Histoire, Moyen Âge, Mythologie, Sciences, Sports, Voyages, etc. Parcourez la liste complète des mots.

Puis-je limiter l'anagramme à un thème précis ?

Oui. Le paramètre theme accepte un slug de thème. Par exemple, ?theme=moyen-age restreint les mots au vocabulaire du Moyen Âge. Voir aussi la page de tous les thèmes disponibles.

Le widget fonctionne-t-il sur mobile ?

Oui, entièrement responsive. Les lettres s'adaptent à la largeur de l'écran, et le clic/tap fonctionne au doigt. Le widget est optimisé pour les gestes tactiles.

Y a-t-il un impact sur la vitesse de mon site ?

Non. Le widget est servi dans une iframe asynchrone (loading="lazy") : il ne se charge que quand le visiteur fait défiler la page jusqu'à lui. Aucun impact sur le temps de chargement initial.

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 mots, thèmes et modes différents. Le script widget-embed.js n'est à inclure qu'une seule fois par page.

11. Prêt à intégrer ?

Rendez-vous sur la page du widget Anagramme, personnalisez-le via le générateur, et collez le code dans votre page. Si vous souhaitez découvrir d'autres widgets, voyez aussi le widget Quiz Définitions et le widget Mots Mêlés.

Bon à savoir : si vous cherchez des idées de thèmes à utiliser dans votre widget, parcourez notre article Résoudre une grille rapidement ou notre guide des 4 niveaux de difficulté.

Sur le même thème

← Tous les articles