Preisrechner-Widget
Binden Sie den Preisrechner von Orbit in Ihre Website ein: Installation, Konfigurationsoptionen, Gestaltung und woher die Preise des Widgets kommen.
Binden Sie den Preisrechner von Orbit in Ihre Website ein: Installation, Konfigurationsoptionen, Gestaltung und woher die Preise des Widgets kommen.
War dieser Artikel hilfreich?
Keine Antwort gefunden?
Fragen Sie Luna oder schreiben Sie unserem Support-Team.
Mit dem Orbit Preisrechner-Widget können Ihre Kunden Transportpreise direkt auf Ihrer Website oder Landingpage berechnen. Das Widget arbeitet nahtlos mit Ihren Preismodellen in Orbit zusammen, und Sie können es vollständig an Ihre Marke anpassen.
Fügen Sie das folgende Script-Tag in den HTML-Code Ihrer Website ein, am besten direkt vor dem schließenden </body>-Tag:
<script
type="module"
src="https://orbit-widget-calculator.s3.eu-central-1.amazonaws.com/v1.2/orbit-widget-calculator.production.min.js">
</script>Fügen Sie das Preisrechner-Widget an der Stelle in Ihrem HTML ein, an der es erscheinen soll:
<div
class="orbit-widget-calculator"
data-shop-id="your-shop-id"
data-shop-url="https://myshop.orbit.do/book">
</div>Sie passen das Preisrechner-Widget über HTML-Datenattribute an. Die gesamte Konfiguration läuft über data-*-Attribute am Container-Element des Widgets.
| Attribut | Typ | Beschreibung | Beispiel |
|---|---|---|---|
data-shop-id | string | Pflichtfeld. Ihre eindeutige Shop-Kennung aus Orbit | data-shop-id="my-shop" |
data-shop-url | string | Pflichtfeld. URL, zu der Nutzer nach dem Absenden des Formulars weitergeleitet werden. Meist die URL eines öffentlichen Buchungsablaufs, den Sie in den Hub-Einstellungen angelegt haben. Ohne dieses Attribut lädt das Widget nicht. | data-shop-url="https://myshop.shop.orbit.do/book-signup" |
| Attribut | Typ | Standard | Beschreibung | Beispiel |
|---|---|---|---|---|
data-layout | "vertical" oder "horizontal" | "vertical" | Steuert die Ausrichtung des Widget-Layouts. Auf schmalen Bildschirmen ist das Widget immer vertikal. | data-layout="horizontal" |
data-label-mode | "label" oder "placeholder" | "label" | Ob Feldbeschriftungen über den Eingabefeldern oder als Platzhalter erscheinen | data-label-mode="placeholder" |
| Attribut | Typ | Standard | Beschreibung | Beispiel |
|---|---|---|---|---|
data-email-capture-enabled | boolean | false | Fragt vor der Preisberechnung eine E-Mail-Adresse ab. Die E-Mail-Adresse wird in der Hub-Buchung wiederverwendet. | data-email-capture-enabled |
data-hide-price | boolean | false | Blendet die Preisanzeige aus und zeigt stattdessen „Request Quote“ | data-hide-price |
| Attribut | Typ | Standard | Beschreibung | Beispiel |
|---|---|---|---|---|
data-corner-radius | number | 6 | Eckenradius für Eingabefelder und Schaltflächen in Pixeln | data-corner-radius="12" |
data-button-color | string | Theme-Farbe des Shops | Hintergrundfarbe der primären Schaltfläche (Hex-Format) | data-button-color="#007bff" |
data-button-hover-color | string | "black" | Hintergrundfarbe der Schaltfläche beim Überfahren mit der Maus (Hex-Format) | data-button-hover-color="#0056b3" |
data-input-background-color | string | "#ffffff" | Hintergrundfarbe der Eingabefelder (Hex-Format) | data-input-background-color="#f8f9fa" |
Boolesche Attribute können Sie auf drei Arten setzen:
data-email-capture-enabled (ergibt true)data-email-capture-enabled="true" oder data-email-capture-enabled="false"false)<div
class="orbit-widget-calculator"
data-shop-id="my-transport-company"
data-shop-url="https://myshop.shop.orbit.do/book">
</div><div
class="orbit-widget-calculator"
data-shop-id="my-transport-company"
data-shop-url="https://myshop.shop.orbit.do/book"
data-layout="horizontal"
data-email-capture-enabled>
</div><div
class="orbit-widget-calculator"
data-shop-id="my-transport-company"
data-layout="horizontal"
data-label-mode="placeholder"
data-corner-radius="8"
data-button-color="#2563eb"
data-button-hover-color="#1d4ed8"
data-input-background-color="#f1f5f9"
data-hide-price
data-email-capture-enabled
data-shop-url="https://myshop.shop.orbit.do/my-booking-flow">
</div>Die Einstellungen des Widgets verwalten Sie in Orbit MissionControl:
Gehen Sie zu Einstellungen → Hub Einstellungen → Allgemeine Einstellungen
Suchen Sie den Abschnitt Preisrechner-Widget
Wählen Sie unter Preisrechner-Widget Produkte die Produkte, die das Widget für die Preisberechnung nutzen darf
Kopieren Sie den Einbettungscode mit Ihrer Shop-ID
Note
Das Widget nutzt automatisch die Theme-Farben und Einschränkungen Ihres Shops, wie Sie sie in Orbit eingestellt haben.
Das Widget hat keine eigene Preisliste. Es berechnet jede Schätzung aus den sales-Produkten (Products), die Sie für das Widget unter Einstellungen → Hub Einstellungen → Allgemeine Einstellungen ausgewählt haben. Was diese Produkte für eine bestimmte Strecke und Ladung anbieten würden, sieht der Kunde genau so.
Kann keines Ihrer Produkte für eine bestimmte Anfrage einen automatischen Preis liefern, zeigt das Widget Request Quote statt einer Zahl. Das ist ein normales Ergebnis und kein Fehler: Dieser Transport braucht einfach ein manuelles Angebot, und das Widget leitet den Kunden zu Ihrem Buchungsablauf, wo er eines anfragen kann.