Cómo añadir un widget de previsión de atardeceres en vivo a tu sitio web

Tus visitantes no deberían tener que abrir otra aplicación del tiempo para decidir si vale la pena planear la noche. Un widget de previsión de atardeceres coloca 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 una previsión automáticamente actualizada que puedes incrustar sin construir tu propia integración meteorológica. El resultado es una función compacta y útil para editores de viajes, hoteles, sitios web de turismo, páginas de cámaras web y fotógrafos.

Qué muestra el widget de previsión de atardeceres

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

• Una puntuación de calidad del atardecer de 0 a 100
• Una calificación clara: Épico, Bueno, Regular o Pobre
• La hora local del atardecer para la ubicación seleccionada
• Un nombre de ubicación o tu propia etiqueta de visualización
• Una oración opcional explicando la previsión
• Detalles meteorológicos opcionales en el tamaño Personalizado

La puntuación se presenta en un anillo codificado por colores, para que los visitantes puedan entender el pronóstico antes de leer el número. Por ejemplo, un hotel en Santorini puede mostrar la previsión para Oia, mientras que un operador de cámara web en San Francisco puede etiquetar el mismo tipo de widget como “Vista del Puente Golden Gate”.

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

¿Por qué añadir un widget de atardeceres a tu sitio web?

Un widget es valioso cuando las condiciones del atardecer afectan lo que tus visitantes planean hacer. Añade información relevante y cambiante a una página que de otro modo podría permanecer estática.

Dar a los visitantes una razón práctica para quedarse

Una guía de destino puede describir dónde ver el atardecer. El widget añade la pregunta faltante: ¿qué tan prometedora parece esta noche? Los visitantes obtienen un contexto útil de planificación sin salir de tu página para buscar en otro lugar.

Añadir una función sin mantener un sistema de previsión

Los datos meteorológicos, puntuación, etiquetas, formato de hora y actualizaciones automáticas se manejan por ti. La instalación es un pequeño fragmento para incrustar en lugar de un proyecto API personalizado con su propia interfaz, manejo de errores y mantenimiento continuo.

Adaptar la información a tu audiencia

Un hotel puede querer una previsión refinada para una azotea. Un sitio web de turismo puede necesitar widgets separados para Lisboa, Oporto y Madeira. Un fotógrafo puede preferir una puntuación compacta al lado de una guía de ubicación. Cada widget está vinculado a una ubicación, por lo que su contexto permanece claro.

Encajar el widget en tu diseño existente

Elige un tema claro, oscuro o automático; selecciona un tamaño; y establece el color de acento del anillo de puntuación. También puedes reemplazar el nombre geográfico con una etiqueta amigable para el visitante, como “Terraza Oeste”, “Cámara de Playa” o “Mirador del Casco Antiguo”.

Servir a visitantes internacionales

Los widgets admiten 14 idiomas: inglés, francés, alemán, español, ruso, portugués, japonés, rumano, ucraniano, árabe, hebreo, chino simplificado, hindi e italiano. También puedes elegir unidades métricas o imperiales y un reloj de 12 o 24 horas.

Cómo crear tu primer widget

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

1. Abre el creador de Widgets

Abre el creador de Widgets de Sunset Predictor y experimenta con la vista previa pública. La vista previa se actualiza mientras cambias el tema, tamaño, color, idioma y otras configuraciones de visualización.

Cuando estés listo para guardar, inicia sesión o crea una cuenta gratuita. Desde tu panel de widgets, selecciona Crear Widget.

2. Nombra el widget para tu propio panel

Introduce un nombre interno corto como “Página Principal del Hotel Lisboa” o “Cámara de Brighton”. Los visitantes verán la etiqueta de ubicación seleccionada, no este nombre de gestión, así que usa algo que ayude a tu equipo a reconocer el widget más tarde.

3. Busca la ubicación de la previsión

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

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

• Usa “Vista desde nuestra Azotea” en lugar de “Bucarest, Rumania”
• Usa “Playa de Copacabana” en lugar de “Río de Janeiro, Brasil”
• Usa “Cámara de North Shore” en lugar del municipio más cercano

Elige cuidadosamente: la ubicación de la previsión de un widget no puede cambiarse después de su creación. Crea un nuevo widget si más tarde necesitas un lugar diferente. El nombre de visualización todavía se puede editar.

4. Elige la apariencia y la información

Usa la vista previa en vivo mientras configuras el widget. La mejor configuración depende de dónde aparecerá:

Configuración	Opciones	Guía práctica
Tema	Claro, oscuro, automático	Utiliza automático cuando el sitio web anfitrión ya sigue el tema del sistema del visitante.
Tamaño	Compacto, estándar, Personalizado	Compacto se adapta a las barras laterales; estándar equilibra detalle y espacio; Personalizado añade una cuadrícula meteorológica.
Color de acento	Predeterminados o color personalizado	Llama a un color de marca mientras mantienes suficiente contraste alrededor del anillo de puntuación.
Descripción	Activado o desactivado	Añade una breve explicación de por qué la previsión recibió su puntuación. No disponible en tamaño compacto.
Idioma	14 idiomas admitidos	Combina el idioma de la página donde aparecerá el widget.
Unidades	Métricas o imperiales	Elige el formato que esperan tus visitantes.
Hora	12 horas o 24 horas	Sigue la convención utilizada en otras partes de tu sitio web.
Actualización	15 a 120 minutos	La frecuencia disponible depende del plan de cuenta.

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 podría preferir temperatura, nubes y viento.

5. Crea el widget y copia el código para incrustar

Selecciona Crear Widget. La siguiente pantalla muestra la vista previa guardada y dos opciones de instalación: Etiqueta de Script e iFrame.

Opción para incrustar	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 dentro de la página.
iFrame	Plataformas CMS o páginas que aíslan contenido de terceros	Mantiene el widget en su propio documento e incluye ajuste automático de altura.

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

<div id="sunset-widget-wgt_your_widget_id"></div>
<script src="https://sunset-predictor.com/api/widget/embed.js?v=1"
        data-widget-id="wgt_your_widget_id"
        async></script>

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

6. Pega el fragmento en tu sitio web

Añade 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 o bloque de contenido relevante.
• En WordPress, usa un bloque HTML personalizado.
• En un constructor de páginas, usa un elemento HTML, para incrustar o de código.
• En un CMS con reglas estrictas de scripts, intenta la opción 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 del reloj, unidades y espaciado se ajustan a la página alrededor de él.

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é ocurre 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 Gratis hasta cada 15 minutos en el plan Empresarial.

No necesitas reemplazar el código de incrustación cuando cambias la mayoría de las configuraciones. Abre el widget desde tu panel, actualiza su apariencia u opciones de visualización y guarda. Los cambios en un widget ya incrustado aparecen en unos pocos minutos.

El panel también te permite:

• Ver impresiones y clics totales para cada widget
• Copiar el código de incrustación nuevamente
• Pausar y reanudar un widget
• Editar su nombre, etiqueta, apariencia, idioma, unidades, formato de hora e intervalo de actualización
• Eliminar un widget que ya no necesitas

Una impresión registra una renderización del widget, mientras que un clic registra un visitante siguiendo el enlace del widget a Sunset Predictor. Estos conteos te brindan una vista simple del uso sin requerir una configuración de análisis separada para el propio widget.

¿Qué plan se adapta a tu sitio web?

Puedes crear un widget de marca en el plan Gratis. Los planes de pago admiten uso comercial, más widgets, límites de vistas mensuales superiores, actualizaciones más rápidas, el tamaño Personalizado y la eliminación opcional de marca. Puedes comparar los planes y precios actuales antes de elegir un nivel.

Plan	Widgets	Vistas mensuales	Actualización más rápida	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í
Empresarial	Ilimitado	1,000,000	15 minutos	Sí	Sí	Sí

Si un widget alcanza su límite de vistas mensuales, continúa renderizándose. Las nuevas impresiones dejan de contar para ese mes, y se muestra la marca de Sunset Predictor. Esto evita que una página incrustada se convierta en un estado de error simplemente porque el tráfico fue mayor del esperado.

Recuerda que los widgets activos y pausados ambos 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 utilizar el widget

La ubicación más eficaz conecta la previsión a una decisión que el visitante ya está tomando.

Hoteles y resorts

Coloca un widget estándar en una página de servicios, bar en la azotea o experiencias locales. Usa el nombre de cara al público de la propiedad como la etiqueta de visualización y empareja el color de acento con la marca del hotel.

Sitios web de turismo y destinos

Añade widgets específicos de ubicación a guías de ciudad o región. Una página sobre puntos de vista del atardecer en Barcelona puede mostrar la previsión actual de Barcelona, mientras que una guía separada de Tenerife puede usar su propio widget.

Cámaras web y sitios de surf

Coloca un widget compacto cerca de una cámara en vivo o un panel actual de condiciones. La puntuación del atardecer añade contexto rápido sin competir con el video en vivo.

Guías fotográficas

Usa el tamaño Personalizado para mostrar nubes, probabilidad de lluvia, visibilidad y viento junto con la puntuación. Esto da a los lectores más contexto al decidir si explorar una ubicación o empaquetar 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 el panorama 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 sencillo de la puntuación.

Consejos para una mejor incrustación

Antes de publicar el widget ampliamente, toma algunas decisiones deliberadas:

1. Ponlo cerca del contenido relacionado. Una previsión junto a una descripción de azotea es más útil que una escondida 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 amplio de ciudad cuando la ubicación ya es obvia.
3. Combina el idioma de la página, unidades y reloj. Pequeñas inconsistencias hacen que una función incrustada se sienta desconectada del resto del sitio web.
4. Mantén la densidad de información apropiada. Compacto funciona para diseños ajustados; Personalizado funciona cuando el detalle meteorológico es parte del propósito de la página.
5. Verifica el espaciado móvil tras la instalación. El widget es solo una parte de la página, así que prueba cómo queda junto a tus propios encabezados, imágenes y botones.
6. Revisa impresiones periódicamente. Te ayudan a ver si la ubicación está recibiendo tráfico y si tu plan actual todavía se ajusta.

Conclusión

Un widget de previsión de atardecer convierte los datos meteorológicos cambiantes en una función de sitio web simple y relevante. Elige una ubicación significativa, adapta el diseño a tu audiencia, pega el código de incrustación generado y gestiona el widget desde un solo panel. Puedes previsualizar y crear tu primer widget antes de decidir dónde debe ir en tu sitio.