Aller au contenu principal

🌊 Widgets Météo Surf

Intégrez la météo des plages ou les conditions surf sur votre site en quelques secondes

🏖️ Widget Plage 🏄 Widget Surf

📊 2 Widgets selon votre Audience

🏖️

Widget Météo Plage

Pour le grand public :
Familles, baigneurs, touristes

Affiche :
  • 🌡️ Température air/eau
  • 🏊 Conditions baignade
  • ☀️ Météo (soleil/pluie)
  • 🌊 Hauteur vagues
🏄

Widget Météo Vagues

Pour les surfeurs :
Surf shops, écoles, passionnés

Affiche :
  • 📊 Indice surf (puissance)
  • 🌊 Houle (hauteur + période)
  • 💨 Vent (offshore/onshore)
  • ⭐ Houle optimale

🏖️ Widget Météo Plage (Grand Public)

🎯 Idéal pour : Hôtels, campings, locations de vacances, offices de tourisme

💻 Démo Live

Thème Clair

Thème Sombre

📦 Installation

Étape 1 : Ajoutez le script 
<script src="https://www.surf-spot.fr/widget/meteo-plage.js"></script>
Étape 2 : Insérez le widget 
<surf-spot-meteo-plage lat="43.4832" lon="-1.5586"></surf-spot-meteo-plage>

🏄 Widget Météo Vagues (Surfeurs)

🎯 Idéal pour : Surf shops, écoles de surf, blogs surf, forums de surfeurs

💻 Démo Live

Thème Clair

Thème Sombre

📦 Installation

Étape 1 : Ajoutez le script 
<script src="https://www.surf-spot.fr/widget/meteo-vagues.js"></script>
Étape 2 : Insérez le widget 
<surf-spot-meteo-vagues lat="43.4832" lon="-1.5586"></surf-spot-meteo-vagues>

🌊 Données Affichées (Spécial Surf)

📊 Indice Surf

Calculé selon la formule : Hauteur × Période^1.5
De 0 (faible) à 60+ (exceptionnel)

🌊 Houle Détaillée

Hauteur, période et direction de la houle
+ Indicateur "Houle Optimale"

💨 Qualité du Vent

✅ Offshore (vert) = Bon
➡️ Sideshore (orange) = Moyen
⚠️ Onshore (rouge) = Mauvais

⏰ Prévisions 8h

8 heures de prévisions avec indice surf,
houle et vent pour chaque heure

⚙️ Options de Configuration (Communes aux 2 widgets)

Attribut Type Requis Description Exemple
lat Number Oui Latitude de l'emplacement 43.4832
lon Number Oui Longitude de l'emplacement -1.5586
theme String Non Thème du widget : light ou dark light
width String Non Largeur du widget 100%
height String Non Hauteur du widget auto

📝 Exemples d'Utilisation

Pour : Hôtels, campings, locations (public familial) 

<!-- Widget Météo Plage - Biarritz -->
<script src="https://www.surf-spot.fr/widget/meteo-plage.js"></script>
<surf-spot-meteo-plage
    lat="43.4832"
    lon="-1.5586">
</surf-spot-meteo-plage>

Pour : Surf shops, écoles de surf, blogs surf (public surfeur) 

<!-- Widget Météo Vagues - Hossegor -->
<script src="https://www.surf-spot.fr/widget/meteo-vagues.js"></script>
<surf-spot-meteo-vagues
    lat="43.6616"
    lon="-1.4042"
    theme="dark">
</surf-spot-meteo-vagues>

Choisissez le widget adapté à votre audience :

<?php
// Dans footer.php avant </body>
?>

<!-- VERSION 1 : Grand Public (Familles) -->
<script src="https://www.surf-spot.fr/widget/meteo-plage.js"></script>
<surf-spot-meteo-plage lat="43.4832" lon="-1.5586"></surf-spot-meteo-plage>

<!-- OU VERSION 2 : Surfeurs -->
<script src="https://www.surf-spot.fr/widget/meteo-vagues.js"></script>
<surf-spot-meteo-vagues lat="43.4832" lon="-1.5586"></surf-spot-meteo-vagues>

🗺️ Comment trouver les coordonnées ?

  1. Google Maps : Clic droit sur un emplacement → "43.4832, -1.5586" (cliquer pour copier)
  2. OpenStreetMap : Clic droit → "Afficher l'adresse"
  3. Notre carte : Trouvez les spots près de chez vous

✨ Avantages

⚡

Ultra Rapide

Web Component natif, pas de jQuery ou framework lourd

🎨

Personnalisable

Thème clair/sombre, dimensions configurables

📱

Responsive

S'adapte automatiquement à tous les écrans

🔄

Toujours à Jour

Données actualisées toutes les heures

🔒

Isolé

Shadow DOM, n'interfère pas avec votre CSS

🎁

100% Gratuit

Aucune limite d'utilisation