Como Adicionar um Widget de Previsão de Pôr do Sol ao Vivo no Seu Site

Seus visitantes não devem precisar abrir outro aplicativo de clima para decidir se vale a pena planejar a noite. Um widget de previsão do pôr do sol coloca a resposta diretamente no seu site, ao lado do quarto, destino, webcam ou informações fotográficas que eles já estão visualizando.

Os Widgets do Sunset Predictor transformam uma localização fixa em uma previsão automaticamente atualizada que você pode incorporar sem construir sua própria integração de clima. O resultado é um recurso compacto e útil para editores de viagens, hotéis, restaurantes, sites de turismo, páginas de webcam e fotógrafos. Sites pessoais podem usar o plano Gratuito; sites empresariais precisam de um plano pago, e hotéis podem começar com um piloto gratuito de 30 dias.

Veja antes de continuar lendo:

• Abra o construtor de widgets e altere o tema, tamanho e layout em uma pré-visualização ao vivo — não é necessário criar uma conta.
• Navegue por todos os tamanhos e temas lado a lado na vitrine de widgets.
• Veja o widget dentro de sites realistas: um blog de viagem, uma página inicial de hotel, um terraço de restaurante e uma página de webcam ao vivo.

O que o widget de previsão do pôr do sol mostra

Cada widget oferece aos visitantes as informações principais que eles precisam num piscar de olhos:

• Uma pontuação de qualidade do pôr do sol de 0 a 100
• Uma classificação clara: Épico, Bom, Razoável ou Ruim
• A hora do pôr do sol local para o local selecionado
• Um nome de localização ou seu próprio rótulo de exibição
• Uma frase opcional explicando a previsão
• Detalhes meteorológicos opcionais no tamanho Personalizado

A pontuação é apresentada em um anel codificado por cores, e o fundo do cartão segue a classificação, para que os visitantes possam entender a perspectiva antes de ler o número. Por exemplo, um hotel em Santorini pode exibir a previsão para Oia, enquanto um operador de webcam em São Francisco pode rotular o mesmo tipo de widget como “Golden Gate View”.

O tamanho Personalizado também pode mostrar condições meteorológicas selecionadas: temperatura, cobertura de nuvens, probabilidade de chuva, umidade, vento, visibilidade, pressão e qualidade do ar. Você escolhe quais valores aparecem e a ordem em que os visitantes os veem.

Cada widget se liga à página de previsão do Sunset Predictor para a cidade mais próxima (ou à página inicial do Sunset Predictor quando nenhuma cidade está próxima), para que visitantes curiosos possam abrir a previsão completa em uma nova aba sem sair da sua página.

Widget de pôr do sol vs. widget de clima regular

Um widget de clima regular mostra temperatura, chuva e vento. Ele não informa aos visitantes se o pôr do sol valerá a pena assistir: isso depende de como a cobertura de nuvens em diferentes alturas, umidade, visibilidade e qualidade do ar se combinam na hora do pôr do sol. O widget de pôr do sol transforma essas condições em uma pontuação e uma classificação, para que os visitantes obtenham a resposta sem ler uma tabela de previsão. Se seus visitantes também precisarem de informações climáticas gerais, o tamanho Personalizado adiciona uma grade climática sob a pontuação.

Três tamanhos, três temas

A maneira mais rápida de comparar as opções é a vitrine de widgets, que mostra todas as nove combinações com pontuações de exemplo de cada faixa de classificação.

Tamanho	O que mostra	Colocação típica
Compacto	Uma linha: pontuação, classificação, hora do pôr do sol, localização	Faixas de cabeçalho ou rodapé, barras laterais estreitas, ao lado de um reprodutor de vídeo
Padrão	Anel de pontuação, classificação, hora do pôr do sol, localização, explicação opcional	Barras laterais, caixas de reserva, colunas de artigos
Personalizado	Tudo no Padrão, além de uma grade climática que você configura	Colunas de conteúdo, guias de fotografia, páginas de condições

Cada tamanho funciona com um tema claro, escuro ou automático. O automático segue a configuração do sistema do visitante, o que se adapta a sites que já alternam entre os modos claro e escuro.

Por que adicionar um widget de pôr do sol ao seu site?

Um widget é mais valioso quando as condições do pôr do sol afetam o que seus visitantes planejam fazer. Um guia de destinos pode descrever onde assistir ao pôr do sol; o widget responde se a noite parece promissora, sem que os visitantes saiam da sua página para procurarem em outro lugar.

Adicione um recurso sem manter um sistema de previsão

Dados meteorológicos, pontuações, rótulos, formatação de tempo e atualizações automáticas são gerenciadas para você. A instalação é um breve snippet de incorporação em vez de um projeto de API customizado com sua própria interface, tratamento de erros e manutenção contínua.

Se você quiser construir sua própria interface, as mesmas previsões estão disponíveis através da API do Sunset Predictor.

Integre o widget ao seu design existente

Tema, tamanho, cor de destaque, largura e um rótulo amigável, como “West Terrace”, permitem que o widget combine com sua página. O widget é isolado da folha de estilos do seu site. Suas próprias regras de CSS para links, espaçamento ou fontes não podem distorcê-lo, e seus estilos não podem vazar para a sua página.

Atenda visitantes internacionais

Os widgets suportam 14 idiomas: inglês, francês, alemão, espanhol, russo, português, japonês, romeno, ucraniano, árabe, hebraico, chinês simplificado, hindi e italiano. Widgets em árabe e hebraico são renderizados da direita para a esquerda automaticamente. Você também pode escolher entre unidades métricas ou imperiais e um relógio de 12 ou 24 horas.

Como criar seu primeiro widget

Você pode experimentar o construtor e a pré-visualização ao vivo antes de entrar. Uma conta é necessária apenas quando você quiser salvar o widget e receber seu código de incorporação.

1. Abra o construtor de widgets

Abra o construtor de widgets do Sunset Predictor e experimente a pré-visualização pública. A pré-visualização é atualizada à medida que você altera o tema, tamanho, layout, cor, idioma e outras configurações de exibição. Arraste o controle deslizante de pontuação para ver como cada faixa de classificação aparece, e alterne a largura do slot (240 px, 320 px, 400 px ou total) para testar locais estreitos e largos.

Dica: você pode abrir o construtor com sua própria cidade já selecionada, adicionando suas coordenadas ao endereço, por exemplo o predefinido do construtor para Lisboa.

Quando estiver pronto para salvar, faça login ou crie uma conta gratuita. No painel do seu widget, selecione Criar Widget. O plano Gratuito cobre um widget em um site pessoal e não comercial; para um site empresarial, escolha um plano pago.

2. Nomeie o widget para seu próprio painel

Insira um nome interno curto, como “Página Inicial do Hotel Lisboa” ou “Webcam de Brighton.” Os visitantes veem o rótulo da localização selecionada, não este nome de gerenciamento, então use algo que ajude sua equipe a reconhecer o widget mais tarde.

3. Procure o local da previsão

Digite pelo menos três caracteres e selecione a cidade correta nos resultados. As coordenadas escolhidas determinam a previsão e a hora local do pôr do sol.

Você também pode inserir um nome de exibição opcional. Isso é útil quando o local de exibição tem um nome mais específico ou familiar do que o resultado da cidade. Por exemplo:

• Use “Nossa Vista do Terraço” em vez de “Bucareste, Romênia”
• Use “Praia de Copacabana” em vez de “Rio de Janeiro, Brasil”
• Use “Câmera da Costa Norte” em vez do município mais próximo

Escolha com cuidado: a localização da previsão de um widget não pode ser alterada após a criação. Crie um novo widget se você precisar de um local diferente mais tarde. O nome de exibição ainda pode ser editado.

4. Escolha onde o widget será colocado

O construtor pergunta Onde ele será colocado? e oferece quatro predefinições de um clique. Cada predefinição define o tamanho, largura e descrição juntos, e você pode ajustar tudo depois.

Predefinição	Tamanho	Largura	Descrição
Barra lateral	Padrão	Fixo 300 px	Desligado
Coluna de conteúdo	Personalizado	Preenche a coluna, até 800 px	Ligado
Faixa de cabeçalho ou rodapé	Compacto	Preenche a faixa	Desligado
Caixa de reserva	Padrão	Preenche a caixa	Ligado

Em planos sem o tamanho Personalizado, a predefinição da coluna de conteúdo usa o tamanho Padrão com a descrição ativada.

Sob Largura, escolha Fixo (220–480 px) ou Preencher contêiner com uma largura máxima opcional, e alinhe o widget ao início ou ao centro do espaço. O widget se adapta à largura que realmente recebe, não ao tamanho da tela:

• Abaixo de 260 px, ele muda para um layout estreito com um anel menor.
• A partir de 480 px de largura, a explicação e os detalhes meteorológicos se movem ao lado da pontuação em vez de abaixo dela.

Um widget de largura fixa ainda encolhe quando seu contêiner é mais estreito, de modo que não transborda em telefones.

5. Escolha a aparência e as informações

As melhores configurações dependem de onde o widget aparecerá:

Configuração	Opções	Orientação prática
Tema	Claro, escuro, auto	Use o auto quando o site host já seguir o tema do sistema do visitante.
Tamanho	Compacto, Padrão, Personalizado	Compacto combina com faixas e espaços apertados; Padrão equilibra detalhes e espaço; Personalizado adiciona uma grade climática.
Cor de destaque	Cores predefinidas ou personalizadas	Combine com uma cor de marca mantendo contraste suficiente em torno do anel de pontuação.
Descrição	Ligado ou desligado	Adicione uma breve explicação de por que a previsão recebeu sua pontuação. Não disponível no tamanho Compacto.
Idioma	14 idiomas suportados	Combine com o idioma da página em que o widget aparecerá.
Unidades	Métrico ou imperial	Escolha o formato esperado por seus visitantes.
Tempo	12 horas ou 24 horas	Combine com a convenção usada em outros lugares do seu site.
Atualização	15 a 120 minutos	Frequência disponível depende do plano da conta.
Branding	Mostrar ou ocultar o rodapé “Powered by Sunset Predictor”	Ocultar está disponível nos planos Pro, Business e Enterprise.

Para o tamanho Personalizado, selecione e reordene os detalhes meteorológicos que importam para seu público. Um fotógrafo pode priorizar nuvens, visibilidade e probabilidade de chuva. Um hotel pode preferir temperatura, nuvens e vento.

6. Crie o widget e copie o código de incorporação

Selecione Criar Widget. A próxima tela mostra a pré-visualização salva e três abas de instalação: Tag de Script, iFrame e WordPress.

Opção de incorporação	Melhor para	O que saber
Tag de Script	A maioria dos sites e layouts personalizados	Carrega de forma assíncrona e renderiza o widget diretamente na página, isolado do seu CSS.
iFrame	Construtores de sites e plataformas CMS que bloqueiam scripts de terceiros	Mantém o widget em seu próprio documento. O ouvinte incluído ajusta a altura do frame automaticamente.
WordPress	Qualquer site em WordPress, editor de blocos ou editor clássico	O código do iframe com instruções passo a passo para WordPress. Nenhum plugin é necessário.

A opção Tag de Script se parece com isso, com seu ID único de widget inserido automaticamente:

<script src="https://sunset-predictor.com/api/widget/embed.js?v=3"
        data-widget-id="wgt_your_widget_id"
        async></script>
<a href="https://sunset-predictor.com/location/your-city/?ref=widget_seo">Previsão do pôr do sol para Sua Cidade</a>

O script insere o widget diretamente após ele mesmo, para que você não precise de um elemento contêiner separado. O pequeno link de texto abaixo é um link de atribuição simples para a página de previsão para sua localização. Permanece legível, mesmo que os scripts estejam bloqueados. Planos Enterprise podem removê-lo.

A opção de iframe contém um <iframe> além de um pequeno script que redimensiona o quadro para ajustar ao widget:

<iframe id="sunset-widget-wgt_your_widget_id"
        src="https://sunset-predictor.com/widget/wgt_your_widget_id"
        title="Previsão do pôr do sol para Sua Cidade"
        height="200" frameborder="0" scrolling="no"
        style="display: block; width: 100%; border: none; color-scheme: normal;"></iframe>
<script>
  /* ouvinte de redimensionamento — incluído automaticamente no código copiado */
</script>

Use o botão Copiar Código em vez de editar o ID gerado manualmente.

7. Cole o snippet no seu site

Adicione o código onde você deseja que o widget apareça. A localização exata depende da plataforma:

• Em um site de código personalizado, coloque-o no template de página relevante ou bloco de conteúdo.
• No WordPress, abra a aba WordPress. No editor de blocos, adicione um bloco HTML Personalizado. No editor clássico, mude para a aba Texto. Para uma barra lateral ou rodapé, vá até Aparência → Widgets e adicione um widget HTML Personalizado. Publicar HTML incorporado precisa da função de Administrador ou Editor (Super Admin em uma rede Multisite).
• Em um construtor de páginas como Wix, Squarespace, Webflow ou Elementor, use um elemento de HTML, incorporação ou código.
• Em um CMS com regras estritas para scripts, use a aba iFrame.

Publique ou atualize a página, depois abra a URL ao vivo e verifique o widget tanto no desktop quanto no celular. Confirme se a localização, idioma, formato do relógio, unidades e espaçamento se ajustam à página ao redor.

Se seu CMS bloquear o código de incorporação ou o widget não aparecer, contate o suporte do Sunset Predictor para obter ajuda com a instalação.

O que acontece depois que o widget está ao vivo?

O widget solicita dados de previsão novos automaticamente de acordo com seu intervalo de atualização configurado. O intervalo disponível depende do seu plano, de a cada 120 minutos no Gratuito a cada 15 minutos no Enterprise.

Do seu painel você pode:

• Editar o nome, rótulo, aparência, largura, idioma, unidades, formato de tempo e intervalo de atualização sem substituir o código de incorporação. As alterações aparecem em páginas ao vivo dentro de alguns minutos.
• Ver impressões totais (renderização do widget) e cliques (visitantes que seguiram o link do widget)
• Copiar o código de incorporação novamente
• Pausar, retomar ou excluir um widget

Qual plano se adapta ao seu site?

Você pode criar um widget com marca no plano Gratuito. Planos pagos suportam uso comercial, mais widgets, limites de visualização mensais mais altos, atualizações mais rápidas, tamanho Personalizado e remoção de marca opcional. Você pode comparar planos atuais e preços antes de escolher um nível.

Plano	Widgets	Visualizações mensais	Atualização mais rápida	Tamanho Personalizado	Remover branding	Uso comercial
Gratuito	1	2.000	120 minutos	Não	Não	Não
Pro	5	25.000	60 minutos	Sim	Sim	Sim
Business	25	150.000	30 minutos	Sim	Sim	Sim
Enterprise	Ilimitado	1.000.000	15 minutos	Sim	Sim	Sim

O plano Plus do consumidor tem os mesmos limites de widget do Gratuito. As opções de layout — predefinições de colocação, largura fixa ou total, e alinhamento — estão disponíveis em todos os planos, incluindo o Gratuito.

Se um widget atingir sua cota mensal de visualizações, ele continua funcionando: visualizações extras param de contar e a marca Sunset Predictor é exibida até o próximo mês. Um pico de tráfego nunca transforma sua página em um estado de erro.

Lembre-se de que widgets ativos e pausados ​​contam para o número de widgets permitido pelo seu plano. Exclua um widget se você não precisar mais dele e quiser liberar esse slot.

Maneiras práticas de usar o widget

A colocação mais forte conecta a previsão a uma decisão que o visitante já está tomando. Cada exemplo abaixo se vincula a um modelo ao vivo na página de demonstração no contexto.

Hotéis e resorts

Coloque um widget Padrão em uma página de comodidades, bar na cobertura ou experiências locais, ou use a predefinição Caixa de reserva ao lado do seu formulário de reserva. Use o nome público da propriedade como rótulo de exibição e combine a cor de destaque com a marca do hotel. Veja o widget em uma página inicial de hotel de exemplo, ou leia como hotéis usam o widget de pôr do sol, incluindo o piloto gratuito de 30 dias.

Restaurantes, bares e terraços

Um terraço com vista para o mar vende mais mesas em uma boa noite de pôr do sol. Coloque um widget Padrão com a descrição ao lado do botão “Reserve uma mesa”, para que os convidados possam escolher o horário certo. Veja o widget em uma página de terraço de restaurante de exemplo.

Sites de turismo e destino

Adicione widgets específicos de localização a guias de cidades ou regiões. Uma página sobre pontos de observação do pôr do sol em Barcelona pode mostrar a previsão atual de Barcelona, enquanto um guia separado de Tenerife pode usar seu próprio widget. Veja o widget dentro de um post de blog de viagem de exemplo.

Sites de webcam e surf

Coloque um widget Compacto próximo a uma câmera ao vivo ou painel de condições atuais. A pontuação do pôr do sol adiciona contexto rápido sem competir com o feed de vídeo. Veja o widget Compacto em uma página de webcam de exemplo.

Guias de fotografia

Use o tamanho Personalizado para mostrar nuvens, probabilidade de chuva, visibilidade e vento junto com a pontuação. Isso dá aos leitores mais contexto ao decidir se devem explorar um local ou empacotar equipamentos.

Páginas de eventos e locais

Para locais ao ar livre onde a vista faz parte da experiência, um widget pode ajudar os visitantes a entender a perspectiva do pôr do sol para o local fixo. Mantenha a descrição ativada se seu público se beneficiar de uma explicação em linguagem simples da pontuação.

Telas de lobby e painéis de casas inteligentes

Abra o URL do iframe do widget (o endereço src no código do iframe) em uma tela de lobby, tablet de recepção, quiosque ou cartão de página web do Home Assistant. A página se atualiza no intervalo do plano, mesmo quando permanece aberta por dias. Se a conexão cair, a última previsão permanece na tela em vez de uma página de erro.

Dicas para uma melhor incorporação

Antes de publicar amplamente o widget, faça algumas escolhas deliberadas:

1. Coloque-o perto de conteúdo relacionado. Uma previsão ao lado de uma descrição do terraço da cobertura é mais útil do que uma escondida em um rodapé genérico.
2. Use um rótulo de exibição específico. “Terraço do Porto” oferece mais contexto para os visitantes do que um nome de cidade amplo quando a localização já é óbvia.
3. Mantenha a densidade de informação apropriada. O Compacto funciona para layouts apertados; o Personalizado funciona quando o detalhe do clima é parte do propósito da página.
4. Não coloque um widget “Preencher contêiner” dentro de um elemento que se dimensione conforme seu conteúdo, como uma caixa de bloco inline. Dê ao widget uma largura fixa lá.
5. Revise as impressões periodicamente. Elas mostram se a colocação recebe tráfego e se seu plano atual ainda se ajusta.

Conclusão

Um widget de previsão do pôr do sol transforma dados climáticos em mudança em um recurso de site simples e relevante. Escolha uma localização significativa, escolha onde ele vai, adapte o design ao seu público, cole o código de incorporação gerado e gerencie o widget de um painel único. Compare os tamanhos na vitrine, veja-o em sites de exemplo, depois crie seu primeiro widget antes de decidir onde ele pertence no seu site.