Spin And Wheel

Intégrer une roue aléatoire sur votre site

Ajoutez une vraie roue qui tourne sur votre site, votre blog ou la page de votre classe en moins d'une minute : choisissez une roue, saisissez vos entrées et collez deux lignes de HTML. Le widget est gratuit, ne demande aucun compte et n'affiche à vos visiteurs ni publicité ni cookies de suivi.

Obtenir le code d'intégration

Laissez vide pour garder la liste propre à la roue. Les entrées sont enregistrées dans le code lui-même, pas sur un serveur.

Taille

Pour Notion, Google Sites « Par URL » et les autres éditeurs qui demandent un lien plutôt que du HTML.

Aperçu en direct

Comment intégrer une roue aléatoire en 3 étapes

  1. Choisissez une roue et ajoutez vos entrées. Dans le générateur de cette page, prenez la roue des prénoms, une roue oui ou non, une roue des nombres, des lettres, Twister, des repas ou personnalisable, puis tapez une entrée par ligne — ou laissez la liste vide pour garder les entrées de la roue.
  2. Choisissez une taille et copiez le code. Petite fait 400 px de haut, Moyenne 520 px et Grande 640 px, avec une largeur de 100 % jusqu'à la même limite. Le code est une balise HTML <iframe> standard plus une ligne de lien.
  3. Collez le code dans un bloc HTML et publiez. Ce bloc s'appelle HTML personnalisé dans WordPress, Embed HTML dans Wix, Code dans Squarespace, Liquid personnalisé dans Shopify et Code Embed dans Webflow. Les éditeurs qui n'acceptent qu'un lien (Notion, Google Sites « Par URL ») reçoivent le lien d'intégration à la place.

Voici le code complet d'une roue des prénoms avec trois entrées, Léa, Hugo et Chloé, en taille Moyenne :

<iframe src="https://spinandwheel.com/fr/?mode=embed&amp;entries=L%C3%A9a,Hugo,Chlo%C3%A9" title="Roue aléatoire" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/fr/">Roue aléatoire par Spin and Wheel</a></p>

Les entrées se trouvent dans l'adresse src (entries=, ou w= compressé pour les longues listes) et mode=embed n'affiche que la roue. La deuxième ligne est un lien classique vers la page de la roue.

Où coller le code

Le code est une balise HTML <iframe> standard plus un lien : il fonctionne donc sur tout site qui accepte le HTML. Voici la marche à suivre pour les éditeurs les plus courants.

WordPress

Dans l'éditeur de blocs, ajoutez un bloc HTML personnalisé (tapez /html), collez le code et cliquez sur Prévisualiser. WordPress auto-hébergé accepte les iframes par défaut ; sur WordPress.com, il faut parfois un forfait payant.

Wix

Dans l'éditeur Wix, cliquez sur Add Elements (+) → Embed Code → Embed HTML, choisissez Code, collez le code et cliquez sur Update, puis étirez le cadre à environ 520 px de haut. Wix affiche le HTML personnalisé dans son propre cadre : la roue fonctionne, mais le lien en dessous reste dans ce cadre.

Squarespace

Modifiez la page, cliquez sur Add Block → Code, laissez le bloc sur HTML, collez le code et enregistrez la page. La roue apparaît sur la page publiée ; dans l'éditeur, un bloc Code peut afficher un espace réservé à la place.

Shopify

Allez dans Boutique en ligne → Thèmes → Personnaliser, choisissez Ajouter une section → Liquid personnalisé, collez le code dans le champ de code Liquid et enregistrez. Les thèmes gratuits comme Dawn incluent la section Liquid personnalisé.

Webflow

Faites glisser un élément Code Embed du panneau Add sur la page, collez le code, cliquez sur Save & Close et publiez le site. Les intégrations de code personnalisé peuvent nécessiter un forfait de site Webflow payant.

Blogger

Ouvrez l'article, passez de la vue Composition à la vue HTML avec le menu en forme de crayon, collez le code là où la roue doit apparaître et publiez. Pour une roue dans la barre latérale, utilisez Mise en page → Ajouter un gadget → HTML/JavaScript.

Google Sites

Choisissez Insérer → Intégrer. Collez le code complet dans l'onglet du code d'intégration, ou le lien d'intégration dans l'onglet « Par URL ». Google Sites affiche chaque intégration dans son propre cadre : la roue fonctionne, mais le lien en dessous reste dans ce cadre.

Notion

Tapez /embed, collez le lien d'intégration (pas le code HTML) et validez. Faites glisser le coin du bloc pour lui donner environ 520 px de haut, afin que toute la roue soit visible.

Canvas, Moodle et autres LMS

Ouvrez la page dans l'éditeur HTML (Canvas : le bouton </> ; Moodle : le bouton HTML de l'éditeur Atto ou TinyMCE) et collez le code. Si la roue disparaît après l'enregistrement, l'administrateur bloque les iframes d'autres sites ; demandez-lui d'autoriser spinandwheel.com.

N'importe quelle page HTML

Collez le code dans le <body> de la page. L'iframe occupe 100 % de la largeur jusqu'à sa taille limite et se charge avec loading="lazy", elle ne ralentit donc pas le haut de la page.

Comment fonctionne la roue intégrée

Le widget est la vraie page Spin and Wheel dans un mode d'intégration allégé (?mode=embed) : seuls la roue et un petit lien « Ouvrir dans Spin and Wheel » s'affichent. Les visiteurs lancent la roue avec le bouton central, voient le gagnant dans une carte et peuvent relancer ou retirer le gagnant de la liste. La roue s'adapte au cadre qu'on lui donne — largeur et hauteur — des téléphones de 320 px aux barres latérales sur ordinateur.

Vos entrées voyagent dans l'adresse de l'iframe : une liste courte en entries=, une plus longue compressée (deflate-raw, base64url) en w=. Rien n'est envoyé ni stocké sur un serveur, et rien n'est écrit dans le stockage du navigateur de vos visiteurs : chacun repart donc de votre liste. Le thème de couleurs, la durée de rotation et les réglages du son choisis dans le panneau Personnaliser passent de la même façon (cfg=).

Chaque tirage utilise crypto.getRandomValues de la Web Crypto API, comme sur spinandwheel.com : chacune des N entrées a donc 1/N chance. L'intégration n'affiche aucune publicité, ne dépose aucun cookie de suivi et n'installe aucun service worker ; elle compte seulement combien de fois elle est chargée et lancée, de façon anonyme et sans cookies.

La ligne sous la roue est un simple lien vers la page de la roue sur spinandwheel.com. Il est facultatif — vous pouvez le modifier ou le supprimer — mais le garder aide d'autres enseignants et créateurs à trouver l'outil. Les améliorations de la roue arrivent automatiquement dans votre intégration ; pour changer les entrées, générez un nouveau code et remplacez l'ancien.

FAQ

FAQ du widget à intégrer

Puis-je intégrer gratuitement une roue des prénoms sur mon site ?
Oui. La roue des prénoms et toutes les autres roues Spin and Wheel s'intègrent gratuitement sur des sites personnels, scolaires et commerciaux avec deux lignes de HTML. Pas de compte, pas de clé d'API et pas de limite d'utilisation : copiez le code et collez-le.

Le widget affiche-t-il des publicités ou suit-il mes visiteurs ?
Non. La roue intégrée n'affiche aucune publicité, ne dépose aucun cookie de suivi et n'enregistre ni entrées ni réglages dans le navigateur de vos visiteurs. Elle compte les chargements et les tirages de façon anonyme, sans cookies, pour que nous sachions que les intégrations sont utilisées.

Les visiteurs peuvent-ils modifier les entrées de la roue intégrée ?
Les visiteurs font tourner la roue avec les entrées que vous avez choisies et peuvent retirer un gagnant pour le tirage suivant. Pour modifier toute la liste, ils cliquent sur « Ouvrir dans Spin and Wheel », qui ouvre la roue complète avec vos entrées dans un nouvel onglet.

Comment modifier les entrées plus tard ?
Générez un nouveau code sur cette page avec les nouvelles entrées et remplacez l'ancien code sur votre site. Les entrées font partie du code : l'ancienne intégration garde sa liste tant que vous ne la remplacez pas.

La roue intégrée est-elle aléatoire et équitable ?
Oui. Le gagnant est choisi avec crypto.getRandomValues (Web Crypto API) : chacune des N entrées a exactement 1/N chance à chaque tirage, comme sur spinandwheel.com.

Quelle taille choisir ?
Moyenne (520 px de haut) convient à la plupart des articles de blog. Choisissez Petite (400 px) pour les barres latérales et les colonnes étroites, et Grande (640 px) pour les pages pleine largeur ou un vidéoprojecteur. La largeur est de 100 % jusqu'à la même limite, et la roue tient toujours dans le cadre.

La roue intégrée fonctionne-t-elle sur mobile ?
Oui. L'iframe occupe 100 % de la largeur, la roue s'adapte à la largeur et à la hauteur disponibles, et en dessous de 700 px le gagnant s'affiche dans un panneau en bas de l'écran avec de grands boutons.

Puis-je intégrer une roue dans OBS pour un live ?
Pour OBS Studio, utilisez plutôt les liens dédiés au streaming : une superposition d'affichage transparente et un dock de contrôle. Le guide de configuration OBS explique les deux.