Widget-Dokumentation
Vollständige Anleitung zur Einbettung und Anpassung des Currency.Wiki-Währungsrechner-Widgets auf Ihrer Website.
Inhaltsverzeichnis
1 Erste Schritte
Das Hinzufügen eines Währungsrechner-Widgets zu Ihrer Website ist einfach. Folgen Sie diesen Schritten:
- Gehen Sie zur Widget-Builder-Seite und passen Sie das Widget-Design an
- Wählen Sie Ihren bevorzugten Widget-Stil, Währungen und Design
- Kopieren Sie den generierten Einbettungscode (Script oder Iframe)
- Fügen Sie den Code in das HTML Ihrer Website ein, wo das Widget erscheinen soll
Tipp: Nutzen Sie die Schnellstart-Vorlagen im Widget-Builder, um schnell mit einem vorkonfigurierten Widget zu starten.
2 Einbettungsmethoden
Script-Einbettung (Empfohlen)
Die Script-Einbettung fügt das Widget direkt in Ihre Seite ein. Währungs-Dropdown-Menüs werden vor dem umgebenden Inhalt angezeigt und sind leicht auswählbar.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Dropdowns werden außerhalb des Widget-Containers angezeigt
- Ideal für interaktive Währungsauswahl
- Nahtlose Integration in Ihre Seite
Iframe-Einbettung
Die Iframe-Einbettung erstellt einen isolierten Container für das Widget. Diese Methode ist sicher und funktioniert bei strikten Content-Policies.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Vollständig isoliert von Ihren Seitenstilen
- Funktioniert mit strikten Content Security Policies
- Einfache und sichere Implementierung
Hinweis: Verwenden Sie die Script-Einbettung für volle Interaktivität (Dropdowns überlagern den Inhalt). Nutzen Sie die Iframe-Einbettung, wenn Sie Isolation oder CSP-Beschränkungen benötigen.
3 Widget-Stile
Wählen Sie aus 11 verschiedenen Widget-Stilen, passend zum Design Ihrer Website. Jeder Stil ist für unterschiedliche Anwendungsfälle und Anzeigegrößen optimiert.
mini
250x140px
Kompakter Einzeilen-Rechner. Perfekt für Kopfzeilen oder enge Bereiche.
square
250x250px
1:1-Widget mit Tauschen-Button. Ideal für Seitenleisten.
compact
300x180px
Kleiner Rechner mit allen wichtigen Funktionen.
inline
480x56px
Horizontales Layout. Ideal zur Einbettung in Inhalte oder Navigation.
tall
200x280px
Vertikales Seitenleisten-Layout mit klassischen Beschriftungen.
mini-chart
250x260px
Kompakter Rechner mit Sparkline-Diagramm zur Kursentwicklung.
multi-expandable
300x320px
Multi-Währungsrechner. Nutzer können Währungen hinzufügen/entfernen.
multi-fixed
300x300px
Feste Liste von Wechselkursen. Am besten zur Anzeige bestimmter Kurse.
rates-compact
250x320px
Kompakte Wechselkursliste mit Zeitstempel.
rates-viewer
300x500px
Vollständige Diagrammansicht mit detaillierten Kursinformationen.
rates-viewer-compact
300x400px
Kompakte Version des Kurs-Viewers mit Diagrammen.
4 URL-Parameter
Passen Sie Ihr Widget mit URL-Parametern an. Diese Parameter funktionieren mit beiden Einbettungsmethoden (Script und Iframe).
| Parameter | Standard | Beschreibung |
|---|---|---|
| style | compact | Widget-Stil (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Farbschema (light, dark oder auto) |
| from | USD | Quellwährungscode (z.B. USD, EUR, GBP) |
| to | EUR | Zielwährungscode (z.B. EUR, USD, JPY) |
| amount | 1000 | Standardbetrag für die Umrechnung |
| accent | #2563eb | Akzentfarbe im Hex-Format (ohne #) |
| lang | en | Widget-Sprachcode (z.B. en, es, fr, de) |
| flags | 1 | Länderflaggen anzeigen (1=anzeigen, 0=ausblenden) |
| display | iso | Währungsanzeigeformat (iso=USD, symbol=$) |
| lock | 0 | Währungen sperren (1=gesperrt, 0=entsperrt) |
| currencies | EUR,GBP,JPY | Kommagetrennte Liste von Währungen für Multi-Währungs-Widgets |
| dropdown | all | Währungen im Dropdown (all, top10, top20 oder kommagetrennte Liste) |
| branding | 1 | Branding anzeigen (1=anzeigen, 0=ausblenden) |
| brandinglink | 1 | Branding klickbar machen (1=Link, 0=nur Text) |
| format | auto | Zahlenformat (auto, us, eu, french, indian) |
| decimals | 2 | Anzahl der Dezimalstellen (0-6) |
| chart | 0 | Diagramm aktivieren (1=aktiviert, 0=deaktiviert) |
| chartperiod | 7d | Diagrammzeitraum (7d, 14d, 30d, 90d) |
Beispiele
Dunkles Design, kompaktes Widget:
?style=compact&theme=dark&from=USD&to=EUR
Multi-Währungs-Wechselkurse:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Mini-Rechner mit 30-Tage-Diagramm:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Währungssymbole statt Codes anzeigen:
?style=compact&display=symbol&from=USD&to=EUR
Gesperrte Währungen mit benutzerdefiniertem Betrag:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Anpassungsoptionen
Design-Optionen
- light - Heller Hintergrund mit dunkler Schrift
- dark - Dunkler Hintergrund mit heller Schrift
- auto - Passt sich automatisch der Systemeinstellung des Nutzers an
Währungsanzeigeformat
- iso - Zeigt ISO-Codes wie USD, EUR, GBP
- symbol - Zeigt Währungssymbole wie $, €, £
Zahlenformate
- auto - Erkennt automatisch die Browsereinstellungen des Besuchers
- us - US-Format: 1,234.56
- eu - Europäisches Format: 1.234,56
- french - Französisches Format: 1 234,56
- indian - Indisches Format: 1,23,456.78
Dropdown-Währungsoptionen
- all - Alle 170+ unterstützten Währungen
- top10 - Top 10 der beliebtesten Währungen
- top20 - Top 20 Währungen nach Handelsvolumen
- USD,EUR,GBP,... - Benutzerdefinierte Liste bestimmter Währungen
Tipp: Nutzen Sie den Widget-Builder, um alle Optionen visuell zu konfigurieren und den Einbettungscode automatisch zu generieren.
6 Fehlerbehebung
Widget wird nicht angezeigt
Stellen Sie sicher, dass der Einbettungscode korrekt in Ihrem HTML platziert ist. Bei Script-Einbettung muss das Container-div mit der richtigen ID existieren. Prüfen Sie die Browser-Konsole auf JavaScript-Fehler.
Dropdown funktioniert nicht
Bei Iframe-Einbettung scrollen Dropdowns innerhalb des Widget-Bereichs. Für volle Dropdown-Funktionalität mit Überlagerungen verwenden Sie die Script-Einbettung.
Stilkonflikte
Wenn das CSS Ihrer Website das Widget-Design beeinflusst, versuchen Sie die Iframe-Einbettung, die das Widget von Ihren Seitenstilen isoliert.
Content Security Policy Probleme
Bei strikter CSP müssen Sie currency.wiki zu Ihren erlaubten script-src und frame-src Direktiven hinzufügen. Beispiel: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Brauchen Sie Hilfe?
Sie finden nicht, was Sie suchen? Unser Support-Team hilft Ihnen gerne weiter.
