Comment ajouter un widget de prévision du coucher de soleil en direct à votre site Web

Vos visiteurs ne devraient pas avoir besoin d'ouvrir une autre application météo pour décider si la soirée vaut la peine d'être planifiée. Un widget de prévision du coucher de soleil met la réponse directement sur votre site, à côté de la chambre, la destination, la webcam ou les informations photographiques qu'ils consultent déjà.

Les widgets Sunset Predictor transforment un lieu fixe en une prévision mise à jour automatiquement que vous pouvez intégrer sans construire votre propre intégration météo. Le résultat est une fonctionnalité compacte et utile pour les éditeurs de voyage, les hôtels, les restaurants, les sites de tourisme, les pages de webcam et les photographes. Les sites personnels peuvent utiliser le plan gratuit ; les sites commerciaux ont besoin d'un plan payant, et les hôtels peuvent commencer avec un essai gratuit de 30 jours.

Voir avant de continuer :

• Ouvrez le générateur de widget et modifiez le thème, la taille et la disposition dans un aperçu en direct — aucun compte requis.
• Parcourez chaque taille et thème côte à côte dans la vitrine des widgets.
• Voyez le widget dans des sites Web réalistes: un blog de voyage, une page d'accueil d'hôtel, une terrasse de restaurant, et une page de webcam en direct.

Ce que montre le widget de prévision du coucher de soleil

Chaque widget offre aux visiteurs les informations essentielles dont ils ont besoin d'un coup d'œil :

• Un score de qualité du coucher de soleil de 0 à 100
• Une évaluation claire : Épique, Bon, Moyen, ou Médiocre
• L'heure locale du coucher de soleil pour le lieu sélectionné
• Un nom de lieu ou votre propre étiquette d'affichage
• Une phrase optionnelle expliquant la prévision
• Détails météo optionnels sur la taille Personnalisée

Le score est présenté dans un anneau codé par couleur, et l'arrière-plan de la carte suit l'évaluation, de sorte que les visiteurs peuvent comprendre la perspective avant de lire le nombre. Par exemple, un hôtel à Santorin peut afficher la prévision pour Oia, tandis qu'un opérateur de webcam à San Francisco peut étiqueter le même type de widget "Vue du Golden Gate".

La taille Personnalisée peut également afficher des conditions météorologiques sélectionnées : température, couverture nuageuse, probabilité de pluie, humidité, vent, visibilité, pression, et qualité de l'air. Vous choisissez quelles valeurs apparaissent et l'ordre dans lequel les visiteurs les voient.

Chaque widget renvoie à la page de prévision Sunset Predictor pour la ville la plus proche (ou à la page d'accueil Sunset Predictor lorsqu'aucune ville n'est à proximité), afin que les visiteurs curieux puissent ouvrir la perspective complète dans un nouvel onglet sans quitter votre page.

Widget de coucher de soleil vs. un widget météo classique

Un widget météo classique affiche la température, la pluie et le vent. Il ne dit pas aux visiteurs si le coucher de soleil vaut la peine d'être observé : cela dépend de la façon dont la couverture nuageuse à différentes hauteurs, l'humidité, la visibilité et la qualité de l'air se combinent à l'heure du coucher du soleil. Le widget de coucher de soleil transforme ces conditions en un score et une évaluation, de sorte que les visiteurs obtiennent la réponse sans lire un tableau de prévision. Si vos visiteurs ont également besoin de la météo générale, la taille Personnalisée ajoute une grille météo sous le score.

Trois tailles, trois thèmes

La façon la plus rapide de comparer les options est la vitrine des widgets, qui montre toutes les neuf combinaisons avec des scores d'échantillon de chaque bande d'évaluation.

Taille	Ce qu'il montre	Placement typique
Compact	Une ligne : score, évaluation, heure du coucher de soleil, lieu	Bandes d'en-tête ou de pied de page, barres latérales étroites, à côté d'un lecteur vidéo
Standard	Anneau du score, évaluation, heure du coucher de soleil, lieu, explication optionnelle	Barres latérales, boîtes de réservation, colonnes d'article
Personnalisé	Tout dans Standard plus une grille météo que vous configurez	Colonnes de contenu, guides photographiques, pages de conditions

Chaque taille fonctionne avec un thème clair, sombre, ou auto. L'auto suit le réglage système du visiteur, ce qui convient aux sites qui basculent déjà entre le mode clair et sombre.

Pourquoi ajouter un widget de coucher de soleil à votre site Web ?

Un widget est le plus utile lorsque les conditions de coucher de soleil affectent ce que vos visiteurs prévoient de faire. Un guide de destination peut décrire où voir le coucher de soleil ; le widget répond si ce soir semble prometteur, sans que les visiteurs quittent votre page pour chercher ailleurs.

Ajouter une fonctionnalité sans maintenir un système de prévision

Les données météo, scoring, étiquettes, formatage de l'heure, et actualisations automatiques sont gérés pour vous. L'installation est un court extrait intégré plutôt qu'un projet API personnalisé avec sa propre interface, gestion des erreurs, et maintenance en cours.

Si vous souhaitez construire votre propre interface, les mêmes prévisions sont disponibles via l'API Sunset Predictor.

Adapter le widget à votre conception existante

Le thème, la taille, la couleur d'accent, la largeur, et une étiquette conviviale pour les visiteurs telle que "West Terrace" permettent au widget de correspondre à votre page. Le widget est isolé de la feuille de style de votre site. Vos propres règles CSS pour les liens, l'espacement, ou les polices ne peuvent pas le déformer, et ses styles ne peuvent pas fuir sur votre page.

Servir des visiteurs internationaux

Les widgets prennent en charge 14 langues : anglais, français, allemand, espagnol, russe, portugais, japonais, roumain, ukrainien, arabe, hébreu, chinois simplifié, hindi et italien. Les widgets en arabe et en hébreu s'affichent automatiquement de droite à gauche. Vous pouvez également choisir des unités métriques ou impériales et une horloge de 12 ou 24 heures.

Comment créer votre premier widget

Vous pouvez essayer le générateur et l'aperçu en direct avant de vous connecter. Un compte est uniquement requis lorsque vous souhaitez enregistrer le widget et recevoir son code intégré.

1. Ouvrir le générateur de widget

Ouvrez le générateur de widget Sunset Predictor et expérimentez avec l'aperçu public. L'aperçu se met à jour à mesure que vous changez le thème, la taille, la disposition, la couleur, la langue, et d'autres paramètres d'affichage. Faites glisser le curseur de score pour voir à quoi ressemble chaque bande d'évaluation, et changez la largeur de l'emplacement (240 px, 320 px, 400 px, ou pleine) pour tester les placements étroits et larges.

Conseil : vous pouvez ouvrir le générateur avec votre propre ville déjà sélectionnée en ajoutant ses coordonnées à l'adresse, par exemple le préréglage de générateur pour Lisbonne.

Quand vous êtes prêt à enregistrer, connectez-vous ou créez un compte gratuit. Depuis votre tableau de bord widget, sélectionnez Créer Widget. Le plan gratuit couvre un widget sur un site personnel non commercial ; pour un site commercial, choisissez un plan payant.

2. Nommez le widget pour votre propre tableau de bord

Entrez un nom interne court tel que "Page d'accueil de l'hôtel Lisbonne" ou "Webcam Brighton". Les visiteurs voient l'étiquette de lieu sélectionnée, pas ce nom de gestion, alors utilisez quelque chose qui aidera votre équipe à reconnaître le widget plus tard.

3. Recherchez le lieu de prévision

Tapez au moins trois caractères et sélectionnez la ville correcte parmi les résultats. Les coordonnées choisies déterminent la prévision et l'heure locale du coucher de soleil.

Vous pouvez également entrer un nom d'affichage optionnel. Ceci est utile lorsque le lieu public a un nom plus spécifique ou familier que le résultat de la ville. Par exemple :

• Utilisez "Notre vue de rooftop" au lieu de "Bucarest, Roumanie"
• Utilisez "Plage de Copacabana" au lieu de "Rio de Janeiro, Brésil"
• Utilisez "Caméra North Shore" au lieu de la municipalité la plus proche

Choisissez avec soin : le lieu de prévision d'un widget ne peut être changé après la création. Créez un nouveau widget si vous devez changer de lieu plus tard. Le nom d'affichage peut toujours être modifié.

4. Choisissez où ira le widget

Le générateur demande Où ira-t-il ? et propose quatre préréglages en un clic. Chaque préréglage définit la taille, la largeur, et la description ensemble, et vous pouvez affiner tout après.

Préréglage	Taille	Largeur	Description
Barre latérale	Standard	Fixe 300 px	Désactivée
Colonne de contenu	Personnalisée	Remplit la colonne, jusqu'à 800 px	Activée
Bande d'en-tête ou de pied de page	Compacte	Remplit la bande	Désactivée
Boîte de réservation	Standard	Remplit la boîte	Activée

Sur les plans sans taille Personnalisée, le préréglage de la colonne de contenu utilise la taille Standard avec la description activée.

Sous Largeur, choisissez Fixe (220–480 px) ou Remplir le conteneur avec une largeur maximale optionnelle, et alignez le widget au début ou au centre de son espace. Le widget s'adapte à la largeur qu'il reçoit vraiment, pas à la taille de l'écran :

• En dessous de 260 px, il passe à une disposition étroite avec un anneau plus petit.
• À partir de 480 px de large, l'explication et les détails météo se déplacent à côté du score au lieu de dessous.

Un widget de largeur fixe se rétrécit encore lorsque son conteneur est plus étroit, de sorte qu'il ne déborde pas sur les téléphones.

5. Choisissez l'apparence et l'information

Les meilleurs réglages dépendent de l'endroit où le widget apparaîtra :

Réglage	Options	Guide pratique
Thème	Clair, sombre, auto	Utilisez auto lorsque le site hôte suit déjà le thème système du visiteur.
Taille	Compacte, Standard, Personnalisée	La compacte convient aux bandes et espaces restreints ; la standard équilibre détail et espace ; la personnalisée ajoute une grille météo.
Couleur d'accent	Préréglages ou couleur personnalisée	Harmonisez avec une couleur de marque tout en conservant suffisamment de contraste autour de l'anneau du score.
Description	Activée ou désactivée	Ajoutez une brève explication de la raison pour laquelle la prévision a reçu son score. Non disponible dans la taille compacte.
Langue	14 langues prises en charge	Faites correspondre la langue de la page où le widget apparaîtra.
Unités	Métriques ou impériales	Choisissez le format que vos visiteurs attendent.
Temps	12 heures ou 24 heures	Adaptez à la convention utilisée ailleurs sur votre site Web.
Actualisation	15 à 120 minutes	La fréquence disponible dépend du plan de compte.
Marque	Afficher ou masquer le pied de page "Powered by Sunset Predictor"	Le masquage est disponible sur les plans Pro, Business et Enterprise.

Pour la taille Personnalisée, sélectionnez et réorganisez les détails météo qui importent à votre public. Un photographe pourrait prioriser les nuages, la visibilité et la probabilité de pluie. Un hôtel peut préférer la température, les nuages et le vent.

6. Créez le widget et copiez le code intégré

Sélectionnez Créer Widget. L'écran suivant montre l'aperçu enregistré et trois onglets d'installation : Script Tag, iFrame et WordPress.

Option d'intégration	Meilleur pour	À savoir
Script Tag	La plupart des sites Web et mises en page personnalisées	Se charge de manière asynchrone et rend le widget directement sur la page, isolé de votre CSS.
iFrame	Constructeurs de sites Web et plates-formes CMS qui bloquent les scripts tiers	Maintient le widget dans son propre document. L'écouteur inclus ajuste la hauteur du cadre automatiquement.
WordPress	Tout site WordPress, éditeur de blocs ou éditeur classique	Le code iframe avec des instructions WordPress étape par étape. Aucun plugin requis.

L'option Script Tag ressemble à ceci, avec votre identifiant de widget unique inséré automatiquement :

<script src="https://sunset-predictor.com/api/widget/embed.js?v=3"
        data-widget-id="wgt_votre_widget_id"
        async></script>
<a href="https://sunset-predictor.com/location/votre-city/?ref=widget_seo">Prévision du coucher de soleil pour Votre Ville</a>

Le script insère le widget directement après lui-même, vous n'avez donc pas besoin d'un élément conteneur séparé. Le petit lien de texte en dessous est un simple lien d'attribution à la page de prévision pour votre localisation. Il reste lisible même si les scripts sont bloqués. Les plans Enterprise peuvent le retirer.

L'option iframe contient un <iframe> plus un court script qui redimensionne le cadre pour s'adapter au widget :

<iframe id="sunset-widget-wgt_votre_widget_id"
        src="https://sunset-predictor.com/widget/wgt_votre_widget_id"
        title="Prévision du coucher de soleil pour Votre Ville"
        height="200" frameborder="0" scrolling="no"
        style="display: block; width: 100%; border: none; color-scheme: normal;"></iframe>
<script>
  /* écouteur de redimensionnement — inclus automatiquement dans le code copié */
</script>

Utilisez le bouton Copier le code plutôt que de modifier l'identifiant généré manuellement.

7. Collez l'extrait dans votre site Web

Ajoutez le code à l'endroit où vous souhaitez que le widget apparaisse. L'emplacement exact dépend de la plate-forme :

• Sur un site codé sur mesure, placez-le dans le modèle de page pertinent ou le bloc de contenu.
• Dans WordPress, ouvrez l'onglet WordPress. Dans l'éditeur de blocs, ajoutez un bloc HTML personnalisé. Dans l'éditeur classique, passez à l'onglet Texte. Pour une barre latérale ou un pied de page, allez dans Apparence → Widgets et ajoutez un widget HTML personnalisé. La publication de HTML intégré nécessite le rôle d'administrateur ou d'éditeur (Super Admin sur un réseau multisite).
• Dans un constructeur de pages comme Wix, Squarespace, Webflow, ou Elementor, utilisez un élément HTML, intégré ou de code.
• Dans un CMS avec des règles strictes sur les scripts, utilisez l'onglet iFrame.

Publiez ou mettez à jour la page, puis ouvrez l'URL en direct et vérifiez le widget à la fois sur ordinateur et mobile. Confirmez que le lieu, la langue, le format de l'horloge, les unités et les espaces s'adaptent à la page autour d'elle.

Si votre CMS bloque le code intégré ou si le widget n'apparaît pas, contactez le support Sunset Predictor pour obtenir de l'aide pour l'installation.

Que se passe-t-il après que le widget est en ligne ?

Le widget demande automatiquement de nouvelles données de prévision selon son intervalle de rafraîchissement configuré. L'intervalle disponible dépend de votre plan, de toutes les 120 minutes sur Gratuit à toutes les 15 minutes sur Enterprise.

Depuis votre tableau de bord, vous pouvez :

• Modifier le nom, l'étiquette, l'apparence, la largeur, la langue, les unités, le format de l'heure et l'intervalle de rafraîchissement sans remplacer le code intégré. Les changements apparaissent sur les pages en direct sous quelques minutes.
• Voir les impressions totales (rendus du widget) et les clics (visiteurs ayant suivi le lien du widget)
• Copier à nouveau le code intégré
• Mettre en pause, reprendre ou supprimer un widget

Quel plan convient à votre site Web ?

Vous pouvez créer un widget marqué sur le plan Gratuit. Les plans payants prennent en charge l'utilisation commerciale, plusieurs widgets, des limites de vues mensuelles plus élevées, des rafraîchissements plus rapides, la taille Personnalisée et l'option de suppression de la marque. Vous pouvez comparer les plans et les tarifs actuels avant de choisir un niveau.

Plan	Widgets	Vues mensuelles	Rafraîchissement le plus rapide	Taille personnalisée	Retirer la marque	Utilisation commerciale
Gratuit	1	2 000	120 minutes	Non	Non	Non
Pro	5	25 000	60 minutes	Oui	Oui	Oui
Business	25	150 000	30 minutes	Oui	Oui	Oui
Enterprise	Illimité	1 000 000	15 minutes	Oui	Oui	Oui

Le plan Plus de consommateur a les mêmes limites de widgets que Gratuit. Les options de mise en page — préréglages de placement, largeur fixe ou pleine, et alignement — sont disponibles sur chaque plan, y compris Gratuit.

Si un widget atteint son allocation de vues mensuelles, il continue à fonctionner : les vues supplémentaires cessent d'être comptabilisées et la marque Sunset Predictor est affichée jusqu'au mois suivant. Un pic de trafic ne transforme jamais votre page en un état d'erreur.

Rappelez-vous que les widgets actifs et en pause comptent tous les deux pour le nombre de widgets autorisés par votre plan. Supprimez un widget si vous n'en avez plus besoin et souhaitez libérer cet emplacement.

Façons pratiques d'utiliser le widget

Le placement le plus fort connecte la prévision à une décision que le visiteur est déjà en train de prendre. Chaque exemple ci-dessous renvoie à une maquette en direct sur la page de démonstration en contexte.

Hôtels et complexes

Placez un widget Standard sur une page d'aménagements, de bar sur le toit ou d'expériences locales, ou utilisez le préréglage Boîte de réservation à côté de votre formulaire de réservation. Utilisez le nom public du site comme l'étiquette d'affichage et harmonisez la couleur d'accent avec la marque de l'hôtel. Voir le widget sur une page d'accueil d'hôtel exemple, ou lisez comment les hôtels utilisent le widget de coucher de soleil, y compris l'essai gratuit de 30 jours.

Restaurants, bars, et terrasses

Une terrasse avec vue sur la mer vend plus de tables par un soir de coucher de soleil. Placez un widget Standard avec la description à côté de votre bouton "Réserver une table", pour que les invités puissent choisir le bon créneau horaire. Voir le widget sur une page de terrasse de restaurant exemple.

Sites touristiques et de destination

Ajoutez des widgets spécifiques au lieu à des guides de ville ou régionaux. Une page sur les points de vue des couchers de soleil à Barcelone peut afficher la prévision actuelle de Barcelone, tandis qu'un guide séparé de Tenerife peut utiliser son propre widget. Voir le widget dans un exemple d'article de blog de voyage.

Sites de webcam et de surf

Placez un widget Compact à proximité d'un panneau de caméra en direct ou de conditions actuelles. Le score du coucher de soleil ajoute un contexte rapide sans concurrencer le flux vidéo. Voir le widget Compact sur une page de webcam exemple.

Guides photographiques

Utilisez la taille Personnalisée pour afficher les nuages, la probabilité de pluie, la visibilité et le vent aux côtés du score. Cela donne aux lecteurs plus de contexte lorsqu'ils décident de s'il faut explorer un lieu ou emporter de l'équipement.

Pages d'événements et de lieux

Pour les lieux extérieurs où la vue fait partie de l'expérience, un widget peut aider les visiteurs à comprendre la perspective du coucher de soleil pour le lieu fixe du lieu. Gardez la description activée si votre audience bénéficie d'une explication en langage clair du score.

Écrans d'accueil et tableaux de commande domotique

Ouvrez l'URL du cadre du widget (l'adresse src dans le code iframe) sur un écran de hall, une tablette de réception, un kiosque, ou une carte de page Web Home Assistant. La page s'actualise elle-même sur l'intervalle du plan, même lorsqu'elle reste ouverte pendant des jours. Si la connexion est interrompue, la dernière prévision reste à l'écran au lieu d'une page d'erreur.

Conseils pour un meilleur intégration

Avant de publier le widget largement, faites quelques choix délibérés :

1. Placez-le près du contenu associé. Une prévision à côté d'une description de toit est plus utile qu'une cachée dans un pied de page générique.
2. Utilisez une étiquette d'affichage spécifique. "Terrasse du port" donne plus de contexte aux visiteurs qu'un nom de ville large lorsque le lieu est déjà évident.
3. Gardez la densité d'information appropriée. Compact fonctionne pour les mises en page serrées ; Personnalisé fonctionne lorsque le détail météo fait partie du but de la page.
4. Ne placez pas un widget "Remplir le conteneur" dans un élément qui se dimensionne à son contenu, tel qu'une boîte en ligne-bloc. Donnez au widget une largeur fixe là-bas à la place.
5. Examinez périodiquement les impressions. Elles montrent si le placement reçoit du trafic et si votre plan actuel convient toujours.

Conclusion

Un widget de prévision du coucher de soleil transforme les données météo changeantes en une fonctionnalité de site Web simple et pertinente. Choisissez un lieu significatif, sélectionnez où il ira, adaptez le design à votre audience, collez le code intégré généré, et gérez le widget depuis un tableau de bord unique. Comparez les tailles dans la vitrine, voyez-le sur des sites Web exemple, puis créez votre premier widget avant de décider où il appartient sur votre site.