¿Cómo Configurar la API y el Widget Iframe en tu Sitio Web?
Nuestra arquitectura de ruleta API prescinde de complejos intercambios de tokens OAuth o servidores intermediarios lentos: toda la configuración de sectores, etiquetas y pesos se inyecta de forma declarativa a través del parámetro de consulta ?items= en la URL tanto de la aplicación principal como del visor ligero /embed/. Al cargar el marco en cualquier navegador moderno, el motor interpreta la cadena codificada en UTF-8, dibuja los sectores en un lienzo HTML5 a 60 fotogramas por segundo e inicializa el generador criptográfico local.
Este diseño sin estado (stateless client-side execution) aporta tres ventajas críticas para equipos de ingeniería, docentes y streamers: elimina por completo los fallos por límite de peticiones (HTTP 429 Too Many Requests), reduce el tiempo de cálculo del ganador a menos de 2 milisegundos y garantiza el cumplimiento estricto del Reglamento General de Protección de Datos (RGPD UE 2016/679) al no almacenar listas de usuarios en bases de datos externas.
| Parámetro / Ruta | Tipo de Dato | Sintaxis de Ejemplo | Comportamiento en el Motor | Plataformas Destino |
|---|---|---|---|---|
| /embed/ | Endpoint HTML5 | https://ruleta-aleatoria.eu/embed/ | Renderiza la tarjeta compacta de 480px con fondo transparente sin cabeceras. | WordPress, Shopify, Webflow, OBS. |
| ?items=a,b,c | String CSV (UTF-8) | ?items=Oro,Plata,Bronce | Divide los 360° en sectores equiprobables según la lista separada por comas. | Enlaces compartidos, QR, Notion. |
| Etiqueta:Peso | Float Ponderado | ?items=Común:5,Épico:1 | Asigna arco proporcional al peso relativo (5/6 = 83.33% frente a 1/6 = 16.67%). | Promociones e-commerce y juegos. |
| Etiqueta xN | Multiplicador | ?items=Ana%20x3,Luis%20x1 | Sintaxis alternativa para boletos múltiples en rifas y sorteos certificados. | Sorteos en Twitch, YouTube y aulas. |
| Uint32Array(1) | Entropía W3C | crypto.getRandomValues(arr) | Muestreo uniforme de 32 bits sin sesgo de módulo desde el hardware local. | Todos los navegadores W3C estándar. |
Plugins Pesados o APIs REST de Pago
Dependencia de servidores remotos, cuotas mensuales por llamada y scripts que bloquean la carga.
- Latencia de red de 150 a 450 milisegundos por cada solicitud de giro
- Rastreo de usuarios mediante cookies publicitarias de terceros
- Riesgo de caída del sorteo durante picos de tráfico en campañas
Widget Embed & Motor CSPRNG W3C
Ejecución criptográfica en el borde del navegador con parametrización URL instantánea.
- Entropía de hardware de 32 bits (4.294.967.296 estados equiprobables)
- Endpoint /embed/ ultraligero sin cookies de rastreo (100% RGPD)
- Compatible con WordPress, Shopify, Notion, Moodle y OBS Studio
¿Cómo Funciona el Algoritmo CSPRNG de 32 Bits en JavaScript?
Cuando un desarrollador busca una API de ruleta en JavaScript para integrarla en su propio proyecto, el error más frecuente consiste en calcular el sector ganador mediante Math.floor(Math.random * n). Como documentamos en nuestra auditoría de metodología criptográfica y prueba Chi-cuadrado, Math.random emplea el registro de desplazamiento Xoroshiro128+, cuya secuencia puede predecirse algebraicamente tras observar unas pocas tiradas consecutivas.
Nuestro motor reemplaza dicho generador por una llamada síncrona al subsistema criptográfico del núcleo del sistema operativo mediante window.crypto.getRandomValues, normalizando un entero sin signo de 32 bits dentro del intervalo semiabierto de 0 a 1:
Normalización Criptográfica de 32 Bits y Selección de Índice Discreto
Variable Definition & Units
Valor aleatorio extraído de window.crypto.getRandomValues(new Uint32Array(1)) entre 0 y 4.294.967.295.
Variable aleatoria continua distribuida uniformemente en el intervalo [0, 1).
Cantidad de elementos activos pasados en el parámetro items.
Si el hardware devuelve Uint32 = 2.849.104.218 en una ruleta de n = 6 opciones, entonces U = 2849104218 / 4294967296 = 0.66335877 y el índice seleccionado es floor(0.66335877 * 6) = 3 (cuarto sector).
Cuando el desarrollador utiliza la sintaxis ponderada (por ejemplo, Premio VIP: 1, Cupón 10%: 4, Envío Gratis: 5), el analizador léxico asigna a cada elemento i su peso positivo wi y calcula el ángulo central en radianes de forma proporcional a la suma total de pesos Wtotal:
Cálculo de Arco Geométrico y Probabilidad Ponderada por Sector
Variable Definition & Units
Multiplicador numérico definido mediante 'Opción: peso' o 'Opción xPeso'.
Suma acumulada de los pesos de todos los sectores activos en la rueda.
Amplitud angular dibujada en el elemento Canvas HTML5 para la opción i.
Con pesos w = [1, 4, 5], la suma es W_total = 10. El primer sector abarca 2π * (1/10) = 0.6283 rad (36.0° y 10% de probabilidad), el segundo 144.0° (40%) y el tercero 180.0° (50%).
¿Cómo Incrustar el Widget de Ruleta en WordPress, Shopify, Notion y OBS Studio?
El visor /embed/ se adapta automáticamente al contenedor padre gracias a su diseño elástico con máximo de 480 píxeles y fondo transparente (background-color: transparent). Sigue estos pasos según tu plataforma:
- WordPress (Gutenberg / Elementor) y Shopify: Añade un bloque de tipo HTML Personalizado en tu entrada o página de producto y pega el código
<iframe>generado en el panel superior. El atributoloading="lazy"asegura que tu puntuación en Google PageSpeed Insights y Core Web Vitals (LCP y CLS) permanezca intacta en 100/100. - OBS Studio, Streamlabs y Twitch Overlays: Crea una nueva fuente de tipo Navegador (Browser Source), introduce la URL
https://ruleta-aleatoria.eu/embed/?items=..., fija el ancho en480y el alto en540píxeles. Para accionarla en directo, pulsa el botón Interactuar en la barra de herramientas de OBS. - Notion, Moodle y Google Classroom: Pega directamente el enlace parametrizado y selecciona la opción Crear Embed (Create Embed) para que los alumnos o miembros del equipo giren la rueda sin abandonar el documento de trabajo.
Directorio de Herramientas y Simuladores Compatibles con Deep-Linking
Además del widget universal, puedes dirigir a tus usuarios o integrar enlaces hacia nuestras herramientas verticales especializadas: para campañas promocionales en redes sociales con acta verificable, utiliza el sorteo online con ruleta y certificado SHA-256; si necesitas diseñar ruedas con paletas corporativas y pesos avanzados, accede al estudio de ruleta personalizada. Para dinámicas de aula y selección de personas, dispones de la ruleta de nombres y la ruleta de números del 1 al 100.
En el ámbito del entretenimiento y los videojuegos, explora la ruleta Pokémon de 18 tipos, 27 iniciales y 9 generaciones para retos Nuzlocke, los dados de rol poliédricos (d20 a d100) para partidas de Dungeons & Dragons y el simulador de tirar dado en Google 3D, o regresa en cualquier momento a la ruleta aleatoria universal.