---
title: "Preisrechner-Widget"
description: "Binden Sie den Preisrechner von Orbit in Ihre Website ein: Installation, Konfigurationsoptionen, Gestaltung und woher die Preise des Widgets kommen."
url: "https://support.pr-4.orbit.do/de/advanced-features/calculator-widget"
locale: "de"
lastReviewed: "2026-10-09"
---

# Preisrechner-Widget

Binden Sie den Preisrechner von Orbit in Ihre Website ein: Installation, Konfigurationsoptionen, Gestaltung und woher die Preise des Widgets kommen.

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.

## Schnellstart

### 1. Das Skript einbinden

Fügen Sie das folgende Script-Tag in den HTML-Code Ihrer Website ein, am besten direkt vor dem schließenden `</body>`-Tag:

```html
<script
    type="module"
    src="https://orbit-widget-calculator.s3.eu-central-1.amazonaws.com/v1.2/orbit-widget-calculator.production.min.js">
</script>
```

### 2. Den Widget-Container einfügen

Fügen Sie das Preisrechner-Widget an der Stelle in Ihrem HTML ein, an der es erscheinen soll:

```html
<div
    class="orbit-widget-calculator"
    data-shop-id="your-shop-id"
    data-shop-url="https://myshop.orbit.do/book">
</div>
```

## Konfigurationsoptionen

Sie passen das Preisrechner-Widget über HTML-Datenattribute an. Die gesamte Konfiguration läuft über `data-*`-Attribute am Container-Element des Widgets.

### Pflichtattribute

| 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"` |

### Layout und Darstellung

| 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"` |

### Funktionsoptionen

| 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`            |

### Gestaltungsoptionen

| 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

Boolesche Attribute können Sie auf drei Arten setzen:

* **Vorhanden ohne Wert**: `data-email-capture-enabled` (ergibt `true`)
* **Mit ausdrücklichem Wert**: `data-email-capture-enabled="true"` oder `data-email-capture-enabled="false"`
* **Fehlt**: Attribut nicht vorhanden (ergibt `false`)

## Anwendungsbeispiele

### Einfaches vertikales Layout

```html
<div
    class="orbit-widget-calculator"
    data-shop-id="my-transport-company"
    data-shop-url="https://myshop.shop.orbit.do/book">
</div>
```

### Horizontales Layout mit E-Mail-Abfrage

```html
<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>
```

### Vollständig angepasstes Widget

```html
<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>
```

## Konfiguration in Orbit

Die Einstellungen des Widgets verwalten Sie in Orbit MissionControl:

1. Gehen Sie zu **Einstellungen → Hub Einstellungen → Allgemeine Einstellungen**
2. Suchen Sie den Abschnitt **Preisrechner-Widget**
3. Wählen Sie unter **Preisrechner-Widget Produkte** die Produkte, die das Widget für die Preisberechnung nutzen darf
4. 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.

## Woher die Preise kommen

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.