CamperScout Widget Integration
Willkommen an Board - wir freuen uns, dass Du Dich für die Teilnahme am CamperScout Partner-Programm entschieden hast.
In der folgenden Beschreibung möchten wir Dir ein kleines Tutorial an die Hand geben um Dir die Einbindung des CamperScout Widgets in Deine Webseite so einfach wie möglich zu machen. Solltest Du weitergehende Hilfe bei der Einbindung benötigen schreibe uns gerne eine E-Mail an partner@camperscout.de .
Widget Integration in Deine Webseite
Das CamperScout Widget wurde als Web-Component realisiert, vereinfacht gesagt handelt es sich bei einem Web-Component um ein Custom HTML-Tag <camperscout-widget></camperscout-widget> welches Du an beliebiger Stelle in Deinem Seiten-Quelltext einfügen kannst. Unser Widget ist vollständig responsive und passt sich automatisch auf verschiedene Device- und Rahmen-Größen an. Somit wird das Widget auf allen Endgeräten optimal dargestellt, unabhängig davon in welchem Seiten-Element Du das Widget einbindest. Für eine prominente Darstellung empfehlen wie das Widget im Content-Bereich Deiner Webseite einzubinden anstatt z.B. in einer Sidebar.
Bitte beachte, dass Du das Widget nur ein Mal pro Seite einbinden kannst, eine mehrfache Integration in der selben Seite z.B. im Content-Bereich UND gleichzeitig in der Sidebar ist nicht möglich. Selbsverständlich kannst Du das Widget aber auf verschiedenen (Unter-) Seiten einmalig integrieren.
Platzierung im HTML-Quelltext
Platziere das folgende HTML-Snippet an einer beliebigen Stelle in Deinem HTML-Quellcode ein. Sollte Deine Webseite auf einem Content Management System, beispielsweise WordPress basieren, füge das Snippet in der HTML-Ansicht des Editors ein.
Konfiguration des Widgets
Die Konfiguration des Widgets kann über die Angabe von Attributen im <camperscout-widget></camperscout-widget> Tag gesteuert werden:
API-KEY:
Die Angabe des api-key="" Attributes ist verpflichtend, bitte ersetzte den Wert YOUR-API-KEY mit Deinem persönlichen API-Key welchen wir Dir per E-Mail mitgeteilt haben. Der API-Key identifiziert Dich und Deine Webseite eindeutig und ermöglicht dadurch die Zuordnung von Buchungen und die Verrechnung Deiner Provisionen.
Sprache (optional):
Die Angabe des language="" Attributes ist optional und definiert die Sprache im Widget. Mögliche Werte sind: de und en - standardmäßig wird das Widget in deutscher Sprache ausgeliefert.
Land aus Vorauswahl (optional):
Die Angabe des default-country="" Attributes ist optional und definiert ein spezifisches Land als Vorauswahl im Kalkulator. Ist das Attribut gesetzt wird beim Klick in das Feld "Übernahmeort" eine Drop-Down Liste aller verfügbaren Orte angezeigt. Deine Besucher können jedoch auch weiterhin einen beliebigen Ort (auch außerhalb des Vorauswahl-Landes) durch Eingabe eines Suchbegriffs festlegen. Sofern wir im Zielland Wohnmobile zur Vermietung anbieten, kannst Du einen gültigen ISO 3166-1 Alpha 2 Code als Wert einsetzen.
Eigene Überschrift (optional):
Optional kannst Du auch eine eigene Headline definieren. Füge dazu innerhalb des <camperscout-widget></camperscout-widget> Tags eine H2 Überschrift zusammen mit dem Attribut slot="calculator-main-headline" ein.
Einbinding JavaScript Datei im HTML-Quelltext
Zusätzlich ist die folgende JavaScript Datei einbinden:
Du kannst die JavaScript Datei direkt unter dem <camperscout-widget></camperscout-widget> Tag einfügen, wir empfehlen zur Optimierung der Ladezeit jedoch die JS-Datei vor dem schließenden </body> Tag im HTML-Quellcode einzufügen.
Einbinding CSS Datei im HTML-Quelltext
Zusätzlich ist die folgende CSS Datei im <head> Bereich des Quelltextes einbinden:
Vollständiges Beispiel
Das folgende Beispiel zeigt Dir die vollständige Integration des Widgets in deutscher Sprache, Spanien als Vorwauswahl und mit einer eigenen Überschrift: