Cómo agregar un widget de pronóstico de atardecer en vivo a tu sitio web

Tus visitantes no deberían tener que abrir otra aplicación meteorológica para decidir si vale la pena planificar alrededor del atardecer de esta noche. Un widget de pronóstico de atardecer pone la respuesta directamente en tu sitio web, junto a la habitación, destino, cámara web o información fotográfica que ya están viendo.

Los widgets de Sunset Predictor convierten una ubicación fija en un pronóstico actualizado automáticamente que puedes integrar sin construir tu propia integración meteorológica. El resultado es una característica compacta y útil para editores de viajes, hoteles, restaurantes, sitios web de turismo, páginas de cámaras web y fotógrafos. Los sitios web personales pueden usar el plan gratuito; los sitios web de negocios necesitan un plan pagado, y los hoteles pueden comenzar con una prueba piloto gratuita de 30 días.

Véalo antes de seguir leyendo:

• Abre el constructor de widgets y cambia el tema, tamaño y diseño en una vista previa en vivo, sin necesidad de cuenta.
• Explora todos los tamaños y temas lado a lado en la exhibición de widgets.
• Ve el widget dentro de sitios web realistas: un blog de viajes, una página de inicio de hotel, una terraza de restaurante, y una página de cámara web en vivo.

Lo que muestra el widget de pronóstico de atardecer

Cada widget proporciona a los visitantes la información esencial que necesitan de un vistazo:

• Un puntaje de calidad del atardecer de 0 a 100
• Una calificación clara: Épico, Bueno, Regular o Malo
• La hora local del atardecer para la ubicación seleccionada
• Un nombre de ubicación o tu propia etiqueta de visualización
• Una frase opcional que explica el pronóstico
• Detalles meteorológicos opcionales en el tamaño personalizado

El puntaje se presenta en un anillo codificado por colores, y el fondo de la tarjeta sigue la calificación, para que los visitantes puedan comprender la perspectiva antes de leer el número. Por ejemplo, un hotel en Santorini puede mostrar el pronóstico para Oia, mientras que un operador de cámara web en San Francisco puede etiquetar el mismo tipo de widget “Vista del Golden Gate”.

El tamaño personalizado también puede mostrar condiciones meteorológicas seleccionadas: temperatura, cobertura de nubes, probabilidad de lluvia, humedad, viento, visibilidad, presión y calidad del aire. Tú eliges qué valores aparecen y el orden en el que los visitantes los ven.

Cada widget enlaza a la página de pronóstico de Sunset Predictor para la ciudad más cercana (o a la página principal de Sunset Predictor cuando no hay una ciudad cercana), para que los visitantes curiosos puedan abrir la perspectiva completa en una nueva pestaña sin salir de tu página.

Widget de atardecer vs. un widget meteorológico regular

Un widget meteorológico regular muestra temperatura, lluvia y viento. No informa a los visitantes si el atardecer valdrá la pena verlo: eso depende de cómo la cobertura de nubes a diferentes alturas, la humedad, la visibilidad y la calidad del aire se combinan en el momento del atardecer. El widget de atardecer convierte esas condiciones en un puntaje y una calificación, para que los visitantes obtengan la respuesta sin leer una tabla de pronósticos. Si tus visitantes también necesitan información meteorológica general, el tamaño personalizado agrega una cuadrícula meteorológica debajo del puntaje.

Tres tamaños, tres temas

La forma más rápida de comparar las opciones es la exhibición de widgets, que muestra las nueve combinaciones con puntajes de muestra de cada banda de calificación.

Tamaño	Lo que muestra	Ubicación típica
Compacto	Una fila: puntaje, calificación, hora del atardecer, ubicación	Tiras de encabezado o pie de página, barras laterales estrechas, junto a un reproductor de video
Estándar	Anillo de puntaje, calificación, hora del atardecer, ubicación, explicación opcional	Barras laterales, cajas de reservas, columnas de artículos
Personalizado	Todo en Estándar más una cuadrícula meteorológica que configuras	Columnas de contenido, guías fotográficas, páginas de condiciones

Cada tamaño funciona con un tema claro, oscuro o auto. Auto sigue la configuración del sistema del visitante, lo que se adapta a sitios web que ya cambian entre modo claro y oscuro.

¿Por qué agregar un widget de atardecer a tu sitio web?

Un widget es más valioso cuando las condiciones del atardecer afectan lo que tus visitantes planean hacer. Una guía de destino puede describir dónde ver el atardecer; el widget responde si la noche parece prometedora, sin que los visitantes salgan de tu página para buscar en otro lugar.

Agrega una característica sin mantener un sistema de pronóstico

Los datos meteorológicos, puntajes, etiquetas, formato de tiempo y actualizaciones automáticas se manejan por ti. La instalación es un fragmento incrustado corto en lugar de un proyecto API personalizado con su propia interfaz, manejo de errores y mantenimiento continuo.

Si realmente deseas construir tu propia interfaz, las mismas predicciones están disponibles a través de la API de Sunset Predictor.

Adapta el widget a tu diseño existente

Tema, tamaño, color de acento, ancho y una etiqueta amigable para el visitante como “Terraza Oeste” permiten que el widget se adapte a tu página. El widget está aislado de la hoja de estilos de tu sitio. Tus propias reglas CSS para enlaces, relleno o fuentes no pueden distorsionarlo, y sus estilos no pueden filtrarse a tu página.

Atiende a visitantes internacionales

Los widgets son compatibles con 14 idiomas: inglés, francés, alemán, español, ruso, portugués, japonés, rumano, ucraniano, árabe, hebreo, chino simplificado, hindi e italiano. Los widgets en árabe y hebreo se renderizan de derecha a izquierda automáticamente. También puedes elegir unidades métricas o imperiales y un reloj de 12 horas o de 24 horas.

Cómo crear tu primer widget

Puedes probar el constructor y la vista previa en vivo antes de iniciar sesión. Solo se requiere una cuenta cuando deseas guardar el widget y recibir su código de incrustación.

1. Abre el constructor de widgets

Abre el constructor de widgets de Sunset Predictor y experimenta con la vista previa pública. La vista previa se actualiza mientras cambias el tema, tamaño, diseño, color, idioma y otras configuraciones de visualización. Arrastra el control deslizante de puntaje de vista previa para ver cómo se ve cada banda de calificación y cambia el ancho de la ranura (240 px, 320 px, 400 px o completo) para probar ubicaciones estrechas y anchas.

Consejo: puedes abrir el constructor con tu propia ciudad ya seleccionada agregando sus coordenadas a la dirección, por ejemplo el preajuste del constructor para Lisboa.

Cuando estés listo para guardar, inicia sesión o crea una cuenta gratuita. Desde tu panel de widgets, selecciona Crear Widget. El plan gratuito cubre un widget en un sitio web personal, no comercial; para un sitio web de negocios, elige un plan pagado.

2. Nombra el widget para tu propio panel

Ingresa un nombre interno corto como “Página de inicio del Hotel Lisboa” o “Cámara Web de Brighton”. Los visitantes ven la etiqueta de ubicación seleccionada, no este nombre de gestión, por lo que utiliza algo que ayude a tu equipo a reconocer el widget más tarde.

3. Busca la ubicación del pronóstico

Escribe al menos tres caracteres y selecciona la ciudad correcta de los resultados. Las coordenadas elegidas determinan el pronóstico y la hora local del atardecer.

También puedes ingresar un nombre de visualización opcional. Esto es útil cuando el lugar público tiene un nombre más específico o familiar que el resultado de la ciudad. Por ejemplo:

• Usa “Nuestra Vista desde la Azotea” en lugar de “Bucarest, Rumanía”
• Usa “Playa de Copacabana” en lugar de “Río de Janeiro, Brasil”
• Usa “Cámara Norte” en lugar de la municipalidad más cercana

Elige con cuidado: la ubicación del pronóstico de un widget no se puede cambiar después de la creación. Crea un nuevo widget si más tarde necesitas un lugar diferente. El nombre de visualización aún se puede editar.

4. Elige dónde irá el widget

El constructor pregunta ¿Dónde irá? y ofrece cuatro preajustes de un clic. Cada preajuste establece el tamaño, ancho y descripción juntos, y puedes ajustar todo después.

Preajuste	Tamaño	Ancho	Descripción
Barra lateral	Estándar	Fijo 300 px	Apagado
Columna de contenido	Personalizado	Llena la columna, hasta 800 px	Encendido
Tira de encabezado o pie de página	Compacto	Llena la tira	Apagado
Caja de reserva	Estándar	Llena la caja	Encendido

En planes sin el tamaño Personalizado, el preajuste de columna de contenido usa el tamaño Estándar con la descripción encendida.

Bajo Ancho, elige Fijo (220-480 px) o Llena el contenedor con un ancho máximo opcional, y alinea el widget al inicio o al centro de su espacio. El widget se adapta al ancho que realmente recibe, no al tamaño de la pantalla:

• Por debajo de 260 px, cambia a un diseño estrecho con un anillo más pequeño.
• A partir de 480 px de ancho, la explicación y los detalles meteorológicos se mueven junto al puntaje en lugar de debajo de él.

Un widget de ancho fijo aún se encoge cuando su contenedor es más estrecho, para que no se desborde en teléfonos.

5. Elige la apariencia e información

Las mejores configuraciones dependen de dónde aparecerá el widget:

Configuración	Opciones	Orientación práctica
Tema	Claro, oscuro, auto	Usa auto cuando el sitio web anfitrión ya sigue el tema del sistema del visitante.
Tamaño	Compacto, Estándar, Personalizado	Compacto se adapta a tiras y espacios reducidos; Estándar equilibra detalle y espacio; Personalizado añade una cuadrícula meteorológica.
Color de acento	Presets o color personalizado	Combina con un color de marca manteniendo suficiente contraste alrededor del anillo de puntaje.
Descripción	Encendida o apagada	Agrega una breve explicación de por qué el pronóstico recibió su puntaje. No disponible en el tamaño Compacto.
Idioma	14 idiomas soportados	Combina con el idioma de la página donde aparecerá el widget.
Unidades	Métricas o imperiales	Elige el formato que tus visitantes esperan.
Tiempo	12 horas o 24 horas	Combina con la convención utilizada en otro lugar en tu sitio web.
Refresco	15 a 120 minutos	La frecuencia disponible depende del plan de cuenta.
Marca	Mostrar o ocultar el pie de página “Provistos por Sunset Predictor”	Ocultarlo está disponible en Pro, Business y Enterprise.

Para el tamaño Personalizado, selecciona y reordena los detalles meteorológicos que importan a tu audiencia. Un fotógrafo podría priorizar nubes, visibilidad y probabilidad de lluvia. Un hotel puede preferir temperatura, nubes y viento.

6. Crea el widget y copia el código de incrustación

Selecciona Crear Widget. La siguiente pantalla muestra la vista previa guardada y tres pestañas de instalación: Etiqueta de Script, iFrame, y WordPress.

Opción de incrustación	Mejor para	Qué saber
Etiqueta de Script	La mayoría de los sitios web y diseños personalizados	Se carga de manera asíncrona y renderiza el widget directamente en la página, aislado de tu CSS.
iFrame	Constructores de sitios web y plataformas CMS que bloquean scripts de terceros	Mantiene el widget en su propio documento. El listener incluido ajusta la altura del marco automáticamente.
WordPress	Cualquier sitio de WordPress, editor de bloques o editor clásico	El código de iframe con instrucciones paso a paso para WordPress. No se requiere plugin.

La opción de Etiqueta de Script se ve así, con tu ID único de widget insertado automáticamente:

<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">Pronóstico de atardecer para tu ciudad</a>

El script inserta el widget directamente después de sí mismo, por lo que no necesitas un elemento contenedor separado. El pequeño enlace de texto debajo es un enlace de atribución simple a la página de pronóstico para tu ubicación. Permanece legible incluso si los scripts están bloqueados. Los planes Enterprise pueden eliminarlo.

La opción de iframe contiene un <iframe> más un script corto que redimensiona el marco para que se ajuste al widget:

<iframe id="sunset-widget-wgt_your_widget_id"
        src="https://sunset-predictor.com/widget/wgt_your_widget_id"
        title="Pronóstico de atardecer para tu ciudad"
        height="200" frameborder="0" scrolling="no"
        style="display: block; width: 100%; border: none; color-scheme: normal;"></iframe>
<script>
  /* listener de redimensionamiento — incluido automáticamente en el código copiado */
</script>

Usa el botón Copiar código en lugar de editar el ID generado a mano.

7. Pega el fragmento en tu sitio web

Agrega el código donde quieras que aparezca el widget. La ubicación exacta depende de la plataforma:

• En un sitio codificado a medida, colócalo en la plantilla de página relevante o bloque de contenido.
• En WordPress, abre la pestaña WordPress. En el editor de bloques, agrega un bloque HTML Personalizado. En el editor clásico, cambia a la pestaña Texto. Para una barra lateral o pie de página, ve a Apariencia → Widgets y agrega un widget de HTML Personalizado. Publicar HTML incrustado requiere el rol de Administrador o Editor (Super Admin en una red Multisitio).
• En un creador de páginas como Wix, Squarespace, Webflow o Elementor, usa un elemento de HTML, incrustación o código.
• En un CMS con estrictas reglas de script, usa la pestaña iFrame.

Publica o actualiza la página, luego abre la URL en vivo y verifica el widget tanto en escritorio como en móvil. Confirma que la ubicación, idioma, formato de reloj, unidades y espaciado se ajustan a la página que lo rodea.

Si tu CMS bloquea el código de incrustación o el widget no aparece, contacta con el soporte de Sunset Predictor para obtener ayuda con la instalación.

¿Qué sucede después de que el widget está en vivo?

El widget solicita datos de predicción frescos automáticamente según su intervalo de actualización configurado. El intervalo disponible para ti depende de tu plan, desde cada 120 minutos en el plan gratuito hasta cada 15 minutos en el plan Enterprise.

Desde tu panel de control puedes:

• Editar el nombre, etiqueta, apariencia, ancho, idioma, unidades, formato de tiempo e intervalo de actualización sin reemplazar el código de incrustación. Los cambios aparecen en las páginas en vivo dentro de unos minutos.
• Ver impresiones totales (renderizados del widget) y clics (visitantes que siguieron el enlace del widget)
• Volver a copiar el código de incrustación
• Pausar, reanudar o eliminar un widget

¿Qué plan se adapta a tu sitio web?

Puedes crear un widget con marca en el plan gratuito. Los planes pagados soportan uso comercial, más widgets, límites de vista mensual más altos, actualizaciones más rápidas, el tamaño personalizado y la eliminación opcional de la marca. Puedes comparar los planes y precios actuales antes de elegir un nivel.

Plan	Widgets	Vistas mensuales	Mayor velocidad de actualización	Tamaño personalizado	Eliminar marca	Uso comercial
Gratis	1	2,000	120 minutos	No	No	No
Pro	5	25,000	60 minutos	Sí	Sí	Sí
Negocios	25	150,000	30 minutos	Sí	Sí	Sí
Enterprise	Ilimitado	1,000,000	15 minutos	Sí	Sí	Sí

El plan Plus para consumidores tiene los mismos límites de widgets que el gratuito. Las opciones de diseño — preajustes de ubicación, ancho fijo o completo, y alineación — están disponibles en cada plan, incluido el gratuito.

Si un widget alcanza su límite de vistas mensuales, sigue funcionando: las vistas adicionales dejan de contar y se muestra la marca de Sunset Predictor hasta el siguiente mes. Un pico de tráfico nunca convierte tu página en un estado de error.

Recuerda que los widgets activos y pausados cuentan para el número de widgets permitidos por tu plan. Elimina un widget si ya no lo necesitas y deseas liberar ese espacio.

Formas prácticas de usar el widget

La colocación más fuerte conecta el pronóstico con una decisión que el visitante ya está tomando. Cada ejemplo a continuación enlaza a un simulacro en vivo en la página de demostración en contexto.

Hoteles y resorts

Coloca un widget Estándar en una página de comodidades, bar en la azotea o experiencias locales, o usa el preajuste Caja de reserva junto a tu formulario de reserva. Usa el nombre público del establecimiento como la etiqueta de visualización y combina el color de acento con la marca del hotel. Ve el widget en una página de inicio de hotel de muestra, o lee cómo los hoteles usan el widget de atardecer, incluida la prueba piloto gratuita de 30 días.

Restaurantes, bares y terrazas

Una terraza con vista al mar vende más mesas en una noche de buen atardecer. Coloca un widget Estándar con la descripción junto a tu botón “Reservar una mesa”, para que los huéspedes puedan elegir el momento adecuado. Ve el widget en una página de terraza de restaurante de muestra.

Sitios web de turismo y destinos

Agrega widgets específicos para ubicaciones a guías de ciudades o regiones. Una página sobre puntos de vista para atardeceres en Barcelona puede mostrar el pronóstico actual de Barcelona, mientras que una guía separada de Tenerife puede usar su propio widget. Ve el widget dentro de una publicación de blog de viajes de muestra.

Sitios web de cámaras web y surf

Coloca un widget Compacto cerca de una cámara en vivo o panel de condiciones actuales. El puntaje de atardecer agrega contexto rápido sin competir con la transmisión de video. Ve el widget Compacto en una página de cámara web de muestra.

Guías de fotografía

Usa el tamaño Personalizado para mostrar nubes, probabilidad de lluvia, visibilidad y viento junto al puntaje. Esto da a los lectores más contexto cuando deciden si explorar una ubicación o empacar equipo.

Páginas de eventos y lugares

Para lugares al aire libre donde la vista es parte de la experiencia, un widget puede ayudar a los visitantes a entender las perspectivas del atardecer para la ubicación fija del lugar. Mantén la descripción habilitada si tu audiencia se beneficia de una explicación en lenguaje claro del puntaje.

Pantallas de lobby y paneles de hogar inteligente

Abre la URL del iframe del widget (la dirección src en el código del iframe) en una pantalla de lobby, tableta de recepción, quiosco o tarjeta de página web de Home Assistant. La página se actualiza automáticamente en el intervalo del plan, incluso cuando permanece abierta durante días. Si la conexión se cae, el último pronóstico permanece en la pantalla en lugar de una página de error.

Consejos para una mejor incrustación

Antes de publicar ampliamente el widget, haz algunas elecciones deliberadas:

1. Ponlo cerca de contenido relacionado. Un pronóstico junto a una descripción de azotea es más útil que uno escondido en un pie de página genérico.
2. Usa una etiqueta de visualización específica. “Terraza del Puerto” da a los visitantes más contexto que un nombre de ciudad amplio cuando la ubicación ya es obvia.
3. Mantén la densidad de información adecuada. Compacto funciona para diseños ajustados; Personalizado funciona cuando el detalle meteorológico es parte del propósito de la página.
4. No coloques un widget de “Llena el contenedor” dentro de un elemento que se dimensiona a sí mismo según su contenido, como una caja de display inline-block. Dale al widget un ancho fijo allí.
5. Revisa las impresiones periódicamente. Muestran si la ubicación recibe tráfico y si tu plan actual todavía se ajusta.

Conclusión

Un widget de pronóstico de atardecer convierte datos meteorológicos cambiantes en una característica simple y relevante del sitio web. Elige una ubicación significativa, decide dónde se colocará, adapta el diseño a tu audiencia, pega el código de incrustación generado y gestiona el widget desde un panel único. Compara los tamaños en la exhibición, ve el widget en sitios web de muestra, luego crea tu primer widget antes de decidir dónde pertenece en tu sitio.