Spin And Wheel

Incorpore uma roleta no seu site

Coloque uma roleta funcionando no seu site, blog ou página da turma em menos de um minuto: escolha uma roleta, digite suas opções e cole duas linhas de HTML. O widget é grátis, não precisa de conta e não mostra anúncios nem cookies de rastreamento para seus visitantes.

Pegue o código de incorporação

Deixe em branco para usar a lista da própria roleta. As opções ficam no próprio código, não em um servidor.

Tamanho

Para o Notion, a opção “Por URL” do Google Sites e outros editores que pedem um link em vez de HTML.

Prévia ao vivo

Como incorporar uma roleta no seu site em 3 passos

  1. Escolha uma roleta e adicione suas opções. No gerador desta página, escolha a roleta de nomes, uma roleta sim ou não, de números, de letras, Twister, de comida ou personalizada e digite uma opção por linha — ou deixe a lista vazia para manter as opções da própria roleta.
  2. Escolha um tamanho e copie o código. Pequeno tem 400 px de altura, Médio 520 px e Grande 640 px, com largura de 100% até o mesmo limite. O código é um <iframe> HTML padrão mais uma linha de link.
  3. Cole o código em um bloco HTML e publique. O bloco se chama HTML personalizado no WordPress, Embed HTML no Wix, Code no Squarespace, Liquid personalizado na Shopify e Code Embed no Webflow. Editores que só aceitam link (Notion, Google Sites “Por URL”) recebem o link de incorporação.

Este é o código completo de uma roleta de nomes com três opções, Ana, Pedro e Júlia, no tamanho Médio:

<iframe src="https://spinandwheel.com/pt/?mode=embed&amp;entries=Ana,Pedro,J%C3%BAlia" title="Roleta de Nomes" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/pt/">Roleta de Nomes do Spin and Wheel</a></p>

As opções ficam no endereço src (entries=, ou um w= compactado para listas longas) e mode=embed mostra só a roleta. A segunda linha é um link comum para a página da roleta.

Onde colar o código

O código é um <iframe> HTML padrão mais um link, então funciona em qualquer site que aceite HTML. Veja os passos para os editores mais comuns.

WordPress

No editor de blocos, adicione um bloco HTML personalizado (digite /html), cole o código e clique em Visualizar. O WordPress auto-hospedado aceita iframes por padrão; no WordPress.com pode ser preciso um plano pago.

Wix

No Editor do Wix, clique em Add Elements (+) → Embed Code → Embed HTML, escolha Code, cole o código e clique em Update; depois arraste a caixa até cerca de 520 px de altura. O Wix mostra HTML personalizado dentro de um quadro próprio, então a roleta funciona, mas o link abaixo dela fica dentro desse quadro.

Squarespace

Edite a página, clique em Add Block → Code, mantenha o bloco em HTML, cole o código e salve a página. A roleta aparece na página publicada; no editor, um bloco Code pode mostrar um espaço reservado no lugar dela.

Shopify

Vá em Loja virtual → Temas → Personalizar, escolha Adicionar seção → Liquid personalizado, cole o código no campo de código Liquid e salve. Temas gratuitos como o Dawn têm a seção Liquid personalizado.

Webflow

Arraste um elemento Code Embed do painel Add para a página, cole o código, clique em Save & Close e publique o site. Incorporações de código personalizado podem exigir um plano de site pago do Webflow.

Blogger

Abra a postagem, troque o editor da visualização de escrita para a visualização HTML no menu do lápis, cole o código onde a roleta deve aparecer e publique. Para uma roleta na barra lateral, use Layout → Adicionar um gadget → HTML/JavaScript.

Google Sites

Escolha Inserir → Incorporar. Na aba de código de incorporação, cole o código completo; ou, em “Por URL”, cole o link de incorporação. O Google Sites mostra cada incorporação dentro de um quadro próprio, então a roleta funciona, mas o link abaixo dela fica dentro desse quadro.

Notion

Digite /embed, cole o link de incorporação (não o código HTML) e confirme. Arraste o canto do bloco até cerca de 520 px de altura para a roleta aparecer inteira.

Canvas, Moodle e outros AVAs

Abra a página no editor HTML (Canvas: o botão </>; Moodle: o botão HTML do editor Atto ou TinyMCE) e cole o código. Se a roleta sumir depois de salvar, o administrador bloqueou iframes de outros sites; peça para liberar spinandwheel.com.

Qualquer página HTML

Cole o código no <body> da página. O iframe ocupa 100% da largura até o limite do tamanho e carrega com loading="lazy", então não deixa o topo da página mais lento.

Como funciona a roleta incorporada

O widget é a página real do Spin and Wheel em um modo de incorporação leve (?mode=embed): só aparecem a roleta e um pequeno link “Abrir no Spin and Wheel”. Os visitantes giram com o botão do centro, veem o vencedor em um cartão e podem girar de novo ou tirar o vencedor da lista. A roleta se ajusta à caixa que recebe — largura e altura —, de celulares de 320 px a barras laterais no computador.

Suas opções vão no endereço do iframe: uma lista curta como entries=, uma mais longa compactada (deflate-raw, base64url) como w=. Nada é enviado nem guardado em um servidor, e nada é gravado no armazenamento do navegador dos seus visitantes, então todo visitante começa com a sua lista. Tema de cores, tempo de giro e configurações de som feitos no painel Personalizar vão do mesmo jeito (cfg=).

Cada giro usa crypto.getRandomValues da Web Crypto API, igual ao spinandwheel.com, então cada uma das N opções tem 1/N de chance. A roleta incorporada não mostra anúncios, não usa cookies de rastreamento e não instala service worker; ela só conta quantas vezes é carregada e girada, de forma anônima e sem cookies.

A linha abaixo da roleta é um link comum para a página da roleta no spinandwheel.com. Ele é opcional — você pode editar ou remover —, mas mantê-lo ajuda outros professores e criadores a encontrar a ferramenta. As melhorias da roleta chegam sozinhas à sua incorporação; para trocar as opções, gere um código novo e substitua o antigo.

FAQ

Perguntas frequentes sobre o widget

Posso colocar uma roleta de nomes no meu site de graça?
Sim. A roleta de nomes e todas as outras roletas do Spin and Wheel podem ser incorporadas de graça em sites pessoais, escolares e comerciais com duas linhas de HTML. Não tem conta, chave de API nem limite de uso — copie o código e cole.

O widget mostra anúncios ou rastreia meus visitantes?
Não. A roleta incorporada não mostra anúncios, não usa cookies de rastreamento e não salva opções nem configurações no navegador dos seus visitantes. Ela conta carregamentos e giros de forma anônima, sem cookies, para sabermos que as incorporações estão sendo usadas.

Os visitantes podem mudar as opções da roleta incorporada?
Os visitantes giram com as opções que você escolheu e podem tirar um vencedor para o próximo giro. Para editar a lista inteira, eles clicam em “Abrir no Spin and Wheel”, que abre a roleta completa com as suas opções em uma nova aba.

Como mudo as opções depois?
Gere um código novo nesta página com as novas opções e substitua o código antigo no seu site. As opções fazem parte do código, então a incorporação antiga mantém a lista dela até você substituí-la.

A roleta incorporada é aleatória e justa?
Sim. O vencedor é escolhido com crypto.getRandomValues (Web Crypto API), então cada uma das N opções tem exatamente 1/N de chance em cada giro, igual ao spinandwheel.com.

Qual tamanho devo escolher?
Médio (520 px de altura) serve para a maioria dos posts de blog. Escolha Pequeno (400 px) para barras laterais e colunas estreitas, e Grande (640 px) para páginas de largura total ou um projetor. A largura é de 100% até o mesmo limite, e a roleta sempre cabe dentro da caixa.

A roleta incorporada funciona no celular?
Sim. O iframe ocupa 100% da largura, a roleta se ajusta à largura e à altura disponíveis e, abaixo de 700 px, o vencedor aparece em um painel na parte de baixo da tela com botões grandes.

Posso incorporar uma roleta no OBS para uma live?
No OBS Studio, use os links próprios para transmissão em vez deste widget: uma sobreposição transparente e um dock de controle. O guia de configuração do OBS explica os dois.