CHOPPER-DATENBANK WIDGET Code einbinden
Chopper-Datenbank Widget – Einbindung
✅ Fertig in 3 Minuten!
Mit diesem Widget bindest du die komplette Chopper-Datenbank mit über 97 Herstellern und 800+ Motorrädern in deine Webseite ein – inklusive Suche, Detailansichten und technischen Daten.
🌍 Funktioniert auf allen Plattformen!
Der Code ist plattform-unabhängig und funktioniert überall, wo HTML und JavaScript erlaubt sind:
🔷 WordPress | 🔶 Joomla | 🔴 phpBB | 🟣 Drupal | 🟢 Shopify | 🟠 Wix | ⚪ Reine HTML-Seiten | 🔵 Jede andere Webseite
1 Seite oder Beitrag öffnen
Öffne den Editor deiner Plattform und erstelle eine neue Seite oder einen neuen Beitrag.
WordPress: Gutenberg-Editor oder Classic-Editor
Joomla: Artikel-Editor im HTML-Modus
phpBB: Pages-Erweiterung im HTML-Modus
Reine HTML: Beliebiges HTML-Dokument
2 HTML-Block / Editor öffnen
Füge einen HTML-Block ein oder wechsle in den HTML/Text-Modus deines Editors.
💡 Tipp:
WordPress: Custom HTML Block (Gutenberg) oder Text-Modus (Classic)
Joomla: Umschalten auf “HTML” im TinyMCE-Editor
phpBB: Pages-Erweiterung → HTML-Modus
3 Widget-Code einfügen
Kopiere den folgenden Code und füge ihn in den HTML-Block ein (funktioniert auf allen Plattformen!):
📄 HTML
4 Farben anpassen (optional)
Du kannst die Farben des Widgets ganz einfach an dein Design anpassen:
Parameter Standardwert Beschreibung
data-main-color #8A6D4B Hauptfarbe für Überschriften, Buttons und Akzente
data-text-color #333333 Farbe für Texte und Beschreibungen
data-bg-color #f9f9f9 Hintergrundfarbe des Widgets
Beispiele für Farbvarianten:
🔵 Blau | data-main-color="#0066cc"
⚫ Dunkel | data-main-color="#2c3e50" data-bg-color="#1a1a2e"
🔴 Rot | data-main-color="#c0392b"
🟢 Grün | data-main-color="#27ae60"
5 Veröffentlichen
Klicke auf “Veröffentlichen” oder “Speichern” und deine Seite ist online!
🔧 Fehlerbehebung
❓ Das Widget wird nicht angezeigt
Lösung:
1. Prüfe, ob der Container <div id="chopper-widget-container"> korrekt gesetzt ist.
2. Überprüfe die Konsole (F12) auf JavaScript-Fehler.
3. Stelle sicher, dass die URL erreichbar ist: widget.js
❓ Die Daten werden nicht geladen
Lösung:
1. Prüfe die API: api.php?mode=hersteller
2. Stelle sicher, dass kein AdBlocker die Anfrage blockiert.
3. Prüfe die Server-Logs auf Fehler.
❓ Die Farben werden nicht übernommen
Lösung:
Die Farbparameter müssen direkt am <script>-Tag stehen. Beispiel:
🎯 Vorteile des Widgets
📚 700+ Motorräder | Zugriff auf die komplette Chopper-Datenbank mit technischen Daten und Wiki-Infos.
🔍 Live-Suche | Finde Hersteller und Modelle in Echtzeit.
📱 Responsive | Optimiert für Desktop, Tablet und Smartphone.
🎨 Anpassbar | Farben lassen sich einfach über data-Attribute ändern.
⚡ Schnell | Lädt nur die benötigten Daten via JSONP.
🆓 Kostenlos | Die Nutzung des Widgets ist komplett kostenlos.
🌍 Plattform-unabhängig | Funktioniert auf WordPress, Joomla, phpBB, HTML und vielen mehr.
🔗 SEO-freundlich | Do-Follow Backlinks für besseres Ranking.
📌 Nutzungsbedingungen
✅ Die Nutzung ist für private, nicht-kommerzielle Websites, Blogs und Foren kostenlos.
✅ Der Link “Bereitgestellt von chopper-motorrad.de” muss sichtbar bleiben.
✅ Die Weiterleitung darf nicht verändert werden.
✅ Bei kommerzieller Nutzung bitte vorher anfragen.
✅ Fertig in 3 Minuten!
Mit diesem Widget bindest du die komplette Chopper-Datenbank mit über 97 Herstellern und 800+ Motorrädern in deine Webseite ein – inklusive Suche, Detailansichten und technischen Daten.
🌍 Funktioniert auf allen Plattformen!
Der Code ist plattform-unabhängig und funktioniert überall, wo HTML und JavaScript erlaubt sind:
🔷 WordPress | 🔶 Joomla | 🔴 phpBB | 🟣 Drupal | 🟢 Shopify | 🟠 Wix | ⚪ Reine HTML-Seiten | 🔵 Jede andere Webseite
1 Seite oder Beitrag öffnen
Öffne den Editor deiner Plattform und erstelle eine neue Seite oder einen neuen Beitrag.
WordPress: Gutenberg-Editor oder Classic-Editor
Joomla: Artikel-Editor im HTML-Modus
phpBB: Pages-Erweiterung im HTML-Modus
Reine HTML: Beliebiges HTML-Dokument
2 HTML-Block / Editor öffnen
Füge einen HTML-Block ein oder wechsle in den HTML/Text-Modus deines Editors.
💡 Tipp:
WordPress: Custom HTML Block (Gutenberg) oder Text-Modus (Classic)
Joomla: Umschalten auf “HTML” im TinyMCE-Editor
phpBB: Pages-Erweiterung → HTML-Modus
3 Widget-Code einfügen
Kopiere den folgenden Code und füge ihn in den HTML-Block ein (funktioniert auf allen Plattformen!):
📄 HTML
Code: Alles auswählen
<!-- Chopper-Datenbank Widget -->
<div id="chopper-widget-container"></div>
<script
src="https://www.chopper-motorrad.de/biker-widget/chopper-datenbank/widget.js"
data-main-color="#8A6D4B"
data-text-color="#333333"
data-bg-color="#f9f9f9">
</script>Du kannst die Farben des Widgets ganz einfach an dein Design anpassen:
Parameter Standardwert Beschreibung
data-main-color #8A6D4B Hauptfarbe für Überschriften, Buttons und Akzente
data-text-color #333333 Farbe für Texte und Beschreibungen
data-bg-color #f9f9f9 Hintergrundfarbe des Widgets
Beispiele für Farbvarianten:
🔵 Blau | data-main-color="#0066cc"
⚫ Dunkel | data-main-color="#2c3e50" data-bg-color="#1a1a2e"
🔴 Rot | data-main-color="#c0392b"
🟢 Grün | data-main-color="#27ae60"
5 Veröffentlichen
Klicke auf “Veröffentlichen” oder “Speichern” und deine Seite ist online!
🔧 Fehlerbehebung
❓ Das Widget wird nicht angezeigt
Lösung:
1. Prüfe, ob der Container <div id="chopper-widget-container"> korrekt gesetzt ist.
2. Überprüfe die Konsole (F12) auf JavaScript-Fehler.
3. Stelle sicher, dass die URL erreichbar ist: widget.js
❓ Die Daten werden nicht geladen
Lösung:
1. Prüfe die API: api.php?mode=hersteller
2. Stelle sicher, dass kein AdBlocker die Anfrage blockiert.
3. Prüfe die Server-Logs auf Fehler.
❓ Die Farben werden nicht übernommen
Lösung:
Die Farbparameter müssen direkt am <script>-Tag stehen. Beispiel:
Code: Alles auswählen
<script src="..." data-main-color="#yourcolor"></script>📚 700+ Motorräder | Zugriff auf die komplette Chopper-Datenbank mit technischen Daten und Wiki-Infos.
🔍 Live-Suche | Finde Hersteller und Modelle in Echtzeit.
📱 Responsive | Optimiert für Desktop, Tablet und Smartphone.
🎨 Anpassbar | Farben lassen sich einfach über data-Attribute ändern.
⚡ Schnell | Lädt nur die benötigten Daten via JSONP.
🆓 Kostenlos | Die Nutzung des Widgets ist komplett kostenlos.
🌍 Plattform-unabhängig | Funktioniert auf WordPress, Joomla, phpBB, HTML und vielen mehr.
🔗 SEO-freundlich | Do-Follow Backlinks für besseres Ranking.
📌 Nutzungsbedingungen
✅ Die Nutzung ist für private, nicht-kommerzielle Websites, Blogs und Foren kostenlos.
✅ Der Link “Bereitgestellt von chopper-motorrad.de” muss sichtbar bleiben.
✅ Die Weiterleitung darf nicht verändert werden.
✅ Bei kommerzieller Nutzung bitte vorher anfragen.