Três widgets, uma frase para ajustar
O gerador acima funciona como as outras ferramentas do Clooock: uma frase com algumas palavras dentro de molduras. Toque em uma palavra para mudá-la, e a prévia logo abaixo se atualiza na hora. O que você vê na prévia é o widget de verdade, a mesma página que seus visitantes vão carregar.
- Relógio: a hora de uma das 168 cidades disponíveis, ou a hora local de cada visitante. Em números de 24 ou 12 horas, ou com mostrador e ponteiros, com ou sem segundos.
- Contagem regressiva: dias, horas, minutos e segundos até uma data e um horário, com um título em cima e uma mensagem que substitui os números ao chegar a zero.
- Temporizador: uma duração que começa com um toque (ou sozinha), pausa, zera e toca no final com um de cinco sons.
Como funciona o código
Código para o seu site copia um pequeno bloco de HTML: um iframe que carrega o widget a partir do clooock.com e, logo abaixo, um link de texto para o Clooock. O iframe carrega depois do resto (lazy loading), então não deixa o topo da sua página mais lento. O link é um link normal e visível, com o nosso nome como texto. Ele ajuda outras pessoas a encontrar a ferramenta; se preferir não mostrar, apague a linha que começa com <a e o widget continua funcionando igual.
Link para o Notion copia só o endereço do widget. Notion, OBS e a maioria dos criadores de sites aceitam um endereço simples nas ferramentas de incorporação, e todos os ajustes estão escritos nele: o endereço basta.
Todos os ajustes ficam nesse endereço. Se quiser mexer à mão, veja o que significa cada parte:
| Parte | O que ajusta | Exemplo |
|---|---|---|
| tz | Fuso horário do relógio ou da data da contagem (nome IANA). Sem tz, vale a hora de cada visitante. | tz=America/Manaus |
| t | Nome acima do relógio, ou título da contagem regressiva | t=Escritório Manaus |
| h, s, v | Relógio: formato de 12 ou 24 horas, sem segundos (s=0), ponteiros (v=a) | h=12&s=0 |
| to, u, m | Contagem: data e horário, unidades, mensagem no zero | to=2027-06-12T18:00&u=dhm |
| d, a, snd | Temporizador: duração em segundos, começa sozinho (a=1), som | d=900&a=1&snd=chime |
| c, f | Cores do fundo e do texto em hexadecimal, c=none para ficar sem fundo | c=0A7E8C&f=FFFFFF |
| l | Idioma dos textos: en, fr, es, de, it ou pt | l=pt |
O parâmetro c aceita qualquer cor, não só as seis da frase: troque o código depois de c= pelo da cor da sua marca e mantenha o texto branco (f=FFFFFF) ou escuro (f=111111) para continuar legível.
O tamanho certo
O widget ocupa todo o espaço que você der a ele. Os números crescem ou diminuem junto, de um cantinho de 200 × 100 pixels até a largura inteira da página. Em espaços muito pequenos, os textos saem de cena e ficam só os números. O código define largura de 100 % e uma altura pensada para cada widget, que você pode mudar no atributo height:
| Widget | Altura no código | Bom para |
|---|---|---|
| Relógio digital | 180 px | Um cabeçalho, uma barra lateral, uma página de contato |
| Relógio de ponteiros | 280 px | Uma barra lateral ou um espaço quadrado |
| Contagem regressiva | 200 px, 230 px com título | Uma página de evento ou lançamento, um banner |
| Temporizador | 220 px | Uma receita, uma página de aula, um treino |
Onde colar
Qualquer página que aceite HTML pode mostrar o widget. Cada plataforma chama a função de um jeito um pouco diferente, então escrevemos um guia curto para as mais usadas: WordPress, Wix, Squarespace, Shopify, Google Sites e Notion. Quem faz lives também pode carregar no OBS como fonte de navegador, com fundo transparente: veja o guia do OBS.
Fusos horários e horário de verão
O relógio e a contagem regressiva usam as regras de fuso horário do navegador do visitante, o mesmo banco de dados de celulares e computadores. Se um país muda de horário, como Portugal no fim de março, o widget acompanha sem você precisar mexer em nada. Na contagem regressiva, você escolhe a quem pertence a data: ao seu fuso, para chegar a zero no mesmo instante no mundo todo (um lançamento, uma live), ou à hora de cada visitante, para cada um ter a sua meia-noite (Réveillon).
Leve e discreto
A página do widget não tem anúncios, cookies nem estatísticas, e não lê nada da página onde está. Ela pesa uns 60 KB com as duas fontes, bem menos quando elas já estão no cache do navegador. Os sons são gerados na hora, sem arquivo de áudio. Para as ferramentas completas, com mais opções, há o relógio mundial, a contagem regressiva para uma data e o temporizador online.