Spin And Wheel

Inserta una ruleta en tu página web

Pon una ruleta que gira de verdad en tu web, tu blog o la página de tu clase en menos de un minuto: elige una ruleta, escribe tus opciones y pega dos líneas de HTML. El widget es gratis, no necesita cuenta y no muestra a tus visitantes anuncios ni cookies de seguimiento.

Obtén el código para insertar

Déjalo vacío para usar la lista propia de la ruleta. Las opciones se guardan en el propio código, no en un servidor.

Tamaño

Para Notion, la opción “Por URL” de Google Sites y otros editores que piden un enlace en lugar de HTML.

Vista previa en directo

Cómo insertar una ruleta en tu web en 3 pasos

  1. Elige una ruleta y añade tus opciones. En el generador de esta página escoge la ruleta de nombres, una ruleta sí o no, de números, de letras, Twister, de comida o personalizada, y escribe una opción por línea, o deja la lista vacía para mantener las opciones de la ruleta.
  2. Elige un tamaño y copia el código. Pequeño mide 400 px de alto, Mediano 520 px y Grande 640 px, con un ancho del 100 % hasta el mismo límite. El código es un <iframe> HTML estándar más una línea con un enlace.
  3. Pega el código en un bloque HTML y publica. El bloque se llama HTML personalizado en WordPress, Embed HTML en Wix, Code en Squarespace, Liquid personalizado en Shopify y Code Embed en Webflow. A los editores que solo aceptan un enlace (Notion, Google Sites “Por URL”) se les da el enlace para insertar.

Este es el código completo de una ruleta de nombres con tres opciones, Lucía, Hugo y Martina, en tamaño Mediano:

<iframe src="https://spinandwheel.com/es/?mode=embed&amp;entries=Luc%C3%ADa,Hugo,Martina" title="Ruleta aleatoria" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/es/">Ruleta aleatoria de Spin and Wheel</a></p>

Las opciones van en la dirección src (entries=, o un w= comprimido para listas largas) y mode=embed muestra solo la ruleta. La segunda línea es un enlace normal a la página de la ruleta.

Dónde pegar el código

El código es un <iframe> HTML estándar más un enlace, así que funciona en cualquier web que acepte HTML. Estos son los pasos para los editores más habituales.

WordPress

En el editor de bloques, añade un bloque HTML personalizado (escribe /html), pega el código y haz clic en Vista previa. WordPress autoalojado permite iframes por defecto; en WordPress.com puede hacer falta un plan de pago.

Wix

En el Editor de Wix haz clic en Add Elements (+) → Embed Code → Embed HTML, elige Code, pega el código y haz clic en Update; después estira el recuadro hasta unos 520 px de alto. Wix muestra el HTML personalizado dentro de su propio marco, así que la ruleta funciona, pero el enlace de debajo se queda dentro de ese marco.

Squarespace

Edita la página, haz clic en Add Block → Code, deja el bloque en HTML, pega el código y guarda la página. La ruleta aparece en la página publicada; en el editor, un bloque Code puede mostrar un marcador de posición en su lugar.

Shopify

Ve a Tienda online → Temas → Personalizar, elige Agregar sección → Liquid personalizado, pega el código en el campo de código Liquid y guarda. Los temas gratuitos como Dawn incluyen la sección Liquid personalizado.

Webflow

Arrastra un elemento Code Embed desde el panel Add a la página, pega el código, haz clic en Save & Close y publica el sitio. Las inserciones de código personalizado pueden requerir un plan de pago de Webflow.

Blogger

Abre la entrada, cambia el editor de la vista Redactar a la vista HTML con el menú del lápiz, pega el código donde quieras que aparezca la ruleta y publica. Para una ruleta en la barra lateral, usa Diseño → Añadir un gadget → HTML/JavaScript.

Google Sites

Elige Insertar → Insertar. En la pestaña del código pega el código completo, o en “Por URL” pega el enlace para insertar. Google Sites muestra cada inserción dentro de su propio marco, así que la ruleta funciona, pero el enlace de debajo se queda dentro de ese marco.

Notion

Escribe /embed, pega el enlace para insertar (no el código HTML) y confirma. Arrastra la esquina del bloque hasta unos 520 px de alto para que se vea la ruleta entera.

Canvas, Moodle y otras plataformas LMS

Abre la página en el editor HTML (Canvas: el botón </>; Moodle: el botón HTML del editor Atto o TinyMCE) y pega el código. Si la ruleta desaparece al guardar, el administrador ha bloqueado los iframes de otros sitios; pídele que permita spinandwheel.com.

Cualquier página HTML

Pega el código dentro del <body> de la página. El iframe ocupa el 100 % del ancho hasta su tamaño máximo y se carga con loading="lazy", así que no ralentiza la parte superior de la página.

Cómo funciona la ruleta insertada

El widget es la página real de Spin and Wheel en un modo de inserción ligero (?mode=embed): solo se muestran la ruleta y un pequeño enlace “Abrir en Spin and Wheel”. Los visitantes la giran con el botón del centro, ven al ganador en una tarjeta y pueden volver a girar o quitar al ganador de la lista. La ruleta se adapta al recuadro que le des, en ancho y alto, desde móviles de 320 px hasta barras laterales de escritorio.

Tus opciones viajan en la dirección del iframe: una lista corta como entries= y una más larga comprimida (deflate-raw, base64url) como w=. No se sube ni se guarda nada en un servidor, y no se escribe nada en el almacenamiento del navegador de tus visitantes, así que cada visitante empieza con tu lista. El tema de colores, el tiempo de giro y los ajustes de sonido del panel Personalizar viajan del mismo modo (cfg=).

Cada giro usa crypto.getRandomValues de la Web Crypto API, igual que en spinandwheel.com, así que cada una de las N opciones tiene una probabilidad de 1/N. La ruleta insertada no muestra anuncios, no usa cookies de seguimiento y no instala ningún service worker; solo cuenta cuántas veces se carga y se gira, de forma anónima y sin cookies.

La línea bajo la ruleta es un enlace normal a la página de la ruleta en spinandwheel.com. Es opcional (puedes editarlo o quitarlo), pero mantenerlo ayuda a otros docentes y creadores a encontrar la herramienta. Las mejoras de la ruleta llegan solas a tu inserción; para cambiar las opciones, genera un código nuevo y sustituye el anterior.

FAQ

Preguntas frecuentes sobre el widget

¿Puedo poner una ruleta de nombres en mi página web gratis?
Sí. La ruleta de nombres y todas las demás ruletas de Spin and Wheel se pueden insertar gratis en webs personales, escolares y comerciales con dos líneas de HTML. Sin cuenta, sin clave de API y sin límite de uso: copia el código y pégalo.

¿El widget muestra anuncios o rastrea a mis visitantes?
No. La ruleta insertada no muestra anuncios, no usa cookies de seguimiento y no guarda opciones ni ajustes en el navegador de tus visitantes. Cuenta las cargas y los giros de forma anónima, sin cookies, para que sepamos que las inserciones se usan.

¿Pueden los visitantes cambiar las opciones de la ruleta insertada?
Los visitantes giran con las opciones que elegiste y pueden quitar a un ganador para el siguiente giro. Para editar la lista completa hacen clic en “Abrir en Spin and Wheel”, que abre la ruleta completa con tus opciones en una pestaña nueva.

¿Cómo cambio las opciones más adelante?
Genera un código nuevo en esta página con las nuevas opciones y sustituye el código anterior en tu web. Las opciones forman parte del código, así que la inserción antigua conserva su lista hasta que la sustituyas.

¿La ruleta insertada es aleatoria y justa?
Sí. El ganador se elige con crypto.getRandomValues (Web Crypto API), así que cada una de las N opciones tiene exactamente una probabilidad de 1/N en cada giro, igual que en spinandwheel.com.

¿Qué tamaño debo elegir?
Mediano (520 px de alto) encaja en la mayoría de las entradas de blog. Elige Pequeño (400 px) para barras laterales y columnas estrechas, y Grande (640 px) para páginas a todo el ancho o un proyector. El ancho es del 100 % hasta el mismo límite y la ruleta siempre cabe dentro del recuadro.

¿La ruleta insertada funciona en el móvil?
Sí. El iframe ocupa el 100 % del ancho, la ruleta se adapta al ancho y alto disponibles y, por debajo de 700 px, el ganador aparece en un panel inferior con botones grandes.

¿Puedo poner una ruleta en OBS para un directo?
Para OBS Studio usa los enlaces específicos para streaming en lugar de este widget: una superposición transparente y un panel de control (dock). La guía de configuración de OBS explica ambos.