Bodensee Widget für Ihre Website
Integrieren Sie aktuelle Bodensee-Daten kostenlos auf Ihrer Website. Perfekt für Hotels, Ferienwohnungen, Bootsverleih und Tourismusportale.
Widget konfigurieren
Wählen Sie die Informationen, die angezeigt werden sollen
Inhalte auswählen
Bestimmt die Quelle für Wasserstand und Temperatur
Größe
Design
Standardsprache
Besucher können die Sprache auch direkt im Widget wechseln.
Embed-Code
<div style="max-width: 350px;">
<iframe
src="https://bodenseepegel-embed.netlify.app/?level=1&trend=1&temp=1&warn=1&size=medium&theme=light&lang=de"
width="350"
height="200"
frameborder="0"
style="display: block; border: 0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
title="Bodensee Wasserstand Widget"
id="bodensee-widget-iframe"
></iframe>
<script>window.addEventListener('message',function(e){if(e.data&&e.data.type==='bodensee-widget:resize'){var f=document.getElementById('bodensee-widget-iframe');if(f)f.style.height=e.data.height+'px';}});</script>
<a href="https://bodenseepegel.de" target="_blank" rel="noopener" style="display: block; text-align: right; font-size: 11px; color: #666; text-decoration: none; margin-top: 4px;">
📊 Daten von bodenseepegel.de
</a>
</div>Vorschau
So wird das Widget auf Ihrer Website aussehen
Kostenlos
Das Widget ist komplett kostenlos. Keine versteckten Kosten, keine Registrierung nötig.
Echtzeit-Daten
Automatische Aktualisierung alle 15 Minuten. Immer aktuelle Wasserstände und Temperaturen.
Responsive
Optimiert für alle Geräte. Perfekte Darstellung auf Desktop, Tablet und Smartphone.
Bodensee Wasserstand Widget – Echtzeit-Pegelstand für Ihre Website
Mit unserem kostenlosen Bodensee Pegel Widget können Sie den aktuellen Wasserstand Bodensee live auf Ihrer Website anzeigen. Das Widget zeigt Echtzeit-Daten der Messstation Konstanz und ist ideal für Hotels am Bodensee, Ferienwohnungen, Bootsverleihe, Segelschulenund Tourismusportale.
Für wen ist das Bodensee Widget geeignet?
- •Hotels & Ferienwohnungen – Zeigen Sie Gästen aktuelle Wasserstände
- •Bootsverleihe & Yachthäfen – Wasserstände für Bootsführer
- •Segelschulen & Wassersportanbieter – Wichtige Daten für Teilnehmer
- •Tourismusportale & Gemeinden – Regionale Informationen
- •Campingplätze am Bodensee – Informationen für Camper
- •Strandbäder & Badeplätze – Wassertemperatur für Schwimmer
Widget-Funktionen im Überblick
- Aktueller Pegel Konstanz – Wasserstand in Echtzeit (cm)
- Pegeltrend – Steigend, fallend oder stabil
- Wassertemperatur Bodensee – Aktuelle Temperatur in °C
- NINA & DWD Warnungen – Unwetterwarnungen anzeigen
Technische Details & Integration
Kopieren Sie den iframe-Code und fügen Sie ihn auf Ihrer Website ein – keine Programmierkenntnisse nötig.
Wasserstände werden alle 15 Minuten aktualisiert. Daten stammen von der IGKB (Internationale Gewässerschutzkommission).
Das Widget speichert keine Nutzerdaten und ist vollständig datenschutzkonform.
Häufig gestellte Fragen zum Bodensee Widget
Integrations-Dokumentation
Hier finden Sie detaillierte Anleitungen zur Integration des Bodensee-Widgets auf verschiedenen Plattformen.
Standard HTML / Statische Websites
Fügen Sie diesen Code an der gewünschten Stelle in Ihrem HTML ein:
<!-- Bodensee Wasserstand Widget --> <iframe src="https://bodenseepegel.de/embed?level=1&trend=1&temp=1&warn=1&size=medium&theme=light&lang=de" width="350" height="140" frameborder="0" style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" title="Bodensee Wasserstand Widget" loading="lazy" ></iframe>
React / Next.js / Vite
Für React-basierte Projekte verwenden Sie JSX-Syntax:
// BodenseeWidget.tsx
export default function BodenseeWidget() {
return (
<iframe
src="https://bodenseepegel.de/embed?level=1&trend=1&temp=1&warn=1&size=medium&theme=light&lang=de"
width={350}
height={140}
frameBorder="0"
style={{ borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}
title="Bodensee Wasserstand Widget"
loading="lazy"
/>
);
}WordPress
In WordPress fügen Sie einen "Individuelles HTML"-Block (Gutenberg) oder einen HTML-Widget-Bereich hinzu:
- Öffnen Sie Ihre Seite/Beitrag im Gutenberg-Editor
- Klicken Sie auf + → Suchen Sie nach "HTML"
- Wählen Sie Individuelles HTML
- Fügen Sie den Widget-Code ein
<!-- In WordPress HTML-Block einfügen -->
<div style="max-width: 100%; overflow: hidden;">
<iframe
src="https://bodenseepegel.de/embed?level=1&trend=1&temp=1&warn=1&size=medium&theme=light&lang=de"
width="350"
height="140"
frameborder="0"
style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); max-width: 100%;"
title="Bodensee Wasserstand Widget"
loading="lazy"
></iframe>
</div>Wix / Squarespace / Jimdo
Bei Baukasten-Systemen fügen Sie ein "Embed" oder "HTML einbetten" Element hinzu:
- Wix: Element hinzufügen → Einbetten → HTML einbetten
- Squarespace: Block hinzufügen → Einbettungen → Code
- Jimdo: Inhalt hinzufügen → Weitere Inhalte → Widget/HTML
URL-Parameter Referenz
Passen Sie das Widget über URL-Parameter an:
| Parameter | Werte | Beschreibung |
|---|---|---|
| level | 1 | 0 | Wasserstand anzeigen |
| trend | 1 | 0 | Pegeltrend anzeigen |
| temp | 1 | 0 | Wassertemperatur anzeigen |
| warn | 1 | 0 | Warnungen anzeigen |
| weather | 1 | 0 | Wetter anzeigen |
| weatherLocation | Konstanz, Friedrichshafen, etc. | Standort für Wetter |
| size | badge | small | medium | large | Widget-Größe |
| theme | light | dark | auto | Farbschema |
| lang | de | en | fr | es | it | Sprache |
Größen-Referenz
Jetzt Widget einbinden – kostenlos!
Wählen Sie oben Ihre gewünschten Optionen, kopieren Sie den Code und fügen Sie ihn in Ihre Website ein. Bei Fragen kontaktieren Sie uns gerne über unser Kontaktformular.