Publié le 10 mars 2025 • Lecture 6 min

Comment intégrer un widget météo sur son site web

Ajouter un widget météo à votre site web est l'une des intégrations les plus simples et les plus bénéfiques que vous puissiez réaliser. En quelques minutes, vous offrez à vos visiteurs une information utile et toujours à jour, sans aucune maintenance de votre part. Ce tutoriel vous guide à travers les différentes méthodes disponibles.

Méthode 1 : L'iframe (recommandé pour débuter)

L'iframe est la méthode la plus rapide. Copiez le code suivant et collez-le dans le code HTML de votre page, à l'endroit où vous souhaitez afficher le widget.

<iframe
  src="https://data-meteo-air-live-france.base44.app/"
  width="350" height="250"
  style="border: none; border-radius: 8px;"
  title="Widget météo en direct"
  loading="lazy">
</iframe>

C'est tout. Le widget météo gratuit s'affiche automatiquement avec les données de météo en temps réel. Vous pouvez ajuster les dimensions width et height selon votre mise en page.

Bonnes pratiques iframe

loading="lazy" — Charge le widget uniquement quand l'utilisateur scrolle jusqu'à lui. Améliore les performances de la page.
title — Indispensable pour l'accessibilité. Les lecteurs d'écran l'utilisent pour décrire le contenu de l'iframe.
HTTPS obligatoire — Assurez-vous que la source utilise HTTPS pour éviter les alertes de sécurité du navigateur.
Responsive — Utilisez width="100%" et un max-width pour que le widget s'adapte aux mobiles.

Méthode 2 : API REST (pour développeurs)

Si vous avez besoin d'un contrôle total sur l'affichage, les APIs météo sont la solution. Elles retournent les données brutes en JSON, que vous affichez avec votre propre code JavaScript et CSS.

// Exemple avec fetch API
const response = await fetch(
  "https://api.openweathermap.org/data/2.5/weather" +
  "?q=Paris&appid=VOTRE_CLE&units=metric&lang=fr"
);
const data = await response.json();
console.log(data.main.temp); // Température

Les principales APIs disponibles offrent des plans gratuits généreux. OpenWeatherMap propose 1 000 appels par jour gratuitement. Weatherstack offre 250 requêtes mensuelles. Pour des données françaises spécifiques, Météo-France Open Data donne accès à des données haute résolution.

Méthode 3 : Plugins CMS

Pour WordPress, plusieurs plugins gratuits permettent d'ajouter un widget météo en quelques clics : Weather Atlas, Location Weather, WP Weather. L'installation se fait via le menu Extensions, et la configuration est visuelle. Sur Shopify, des apps comme "Weather Widget" offrent la même fonctionnalité.

Intégrer aussi la qualité de l'air

Les widgets modernes vont au-delà de la météo classique. Proposer des données dequalité de l'air et l'indice de qualité de l'air apporte une dimension santé appréciée des utilisateurs. Les données de la météo en France peuvent également être intégrées pour fournir un contexte régional.

Pour aller plus loin dans la personnalisation, consultez notre page dédiée sur commentintégrer la météo sur votre site avec des exemples de code avancés.