---
title: "Calculator Widget"
description: "Embed Orbit's price calculator on your website: installation, configuration options, styling, and where the widget's prices come from."
url: "https://support.pr-4.orbit.do/en/advanced-features/calculator-widget"
locale: "en"
lastReviewed: "2026-10-09"
---

# Calculator Widget

Embed Orbit's price calculator on your website: installation, configuration options, styling, and where the widget's prices come from.

The Orbit Calculator Widget provides your customers with an easy way to calculate transport prices directly on your website or landing page. The widget integrates seamlessly with your Orbit pricing models and can be fully customized to match your brand.

## Quick Start

### 1. Include the Script

Add the following script tag to your website's HTML, preferably just before the closing `</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. Add the Widget Container

Insert the calculator widget anywhere in your HTML where you want it to appear:

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

## Configuration Options

The Calculator Widget can be customized using HTML data attributes. All configuration is done through `data-*` attributes on the widget container element.

### Required Attributes

| Attribute       | Type     | Description                                                                                                                                                                 | Example                                                    |
| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| `data-shop-id`  | `string` | **Required.** Your unique shop identifier from Orbit                                                                                                                        | `data-shop-id="my-shop"`                                   |
| `data-shop-url` | `string` | **Required.** URL to redirect users to after form submission. Typically the URL of a public booking flow created in your Hub settings. The widget does not load without it. | `data-shop-url="https://myshop.shop.orbit.do/book-signup"` |

### Layout & Display

| Attribute         | Type                           | Default      | Description                                                                              | Example                         |
| ----------------- | ------------------------------ | ------------ | ---------------------------------------------------------------------------------------- | ------------------------------- |
| `data-layout`     | `"vertical"` or `"horizontal"` | `"vertical"` | Controls the widget layout orientation. On narrow screens the widget is always vertical. | `data-layout="horizontal"`      |
| `data-label-mode` | `"label"` or `"placeholder"`   | `"label"`    | Whether to show field labels above inputs or as placeholders                             | `data-label-mode="placeholder"` |

### Functionality Options

| Attribute                    | Type      | Default | Description                                                                             | Example                      |
| ---------------------------- | --------- | ------- | --------------------------------------------------------------------------------------- | ---------------------------- |
| `data-email-capture-enabled` | `boolean` | `false` | Enables email collection before price calculation. Email will be reused in Hub Booking. | `data-email-capture-enabled` |
| `data-hide-price`            | `boolean` | `false` | Hides price display and shows "Request Quote" instead                                   | `data-hide-price`            |

### Styling Options

| Attribute                     | Type     | Default          | Description                                    | Example                                 |
| ----------------------------- | -------- | ---------------- | ---------------------------------------------- | --------------------------------------- |
| `data-corner-radius`          | `number` | `6`              | Border radius for inputs and buttons in pixels | `data-corner-radius="12"`               |
| `data-button-color`           | `string` | Shop theme color | Primary button background color (hex format)   | `data-button-color="#007bff"`           |
| `data-button-hover-color`     | `string` | `"black"`        | Button background color on hover (hex format)  | `data-button-hover-color="#0056b3"`     |
| `data-input-background-color` | `string` | `"#ffffff"`      | Background color for input fields (hex format) | `data-input-background-color="#f8f9fa"` |

### Boolean Attributes

Boolean attributes can be set in three ways:

* **Present without value**: `data-email-capture-enabled` (evaluates to `true`)
* **With explicit value**: `data-email-capture-enabled="true"` or `data-email-capture-enabled="false"`
* **Absent**: Attribute not present (evaluates to `false`)

## Usage Examples

### Basic Vertical Layout

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

### Horizontal Layout with Email Capture

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

### Fully Customized 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>
```

## Configuration in Orbit

Widget settings can be managed in Orbit MissionControl:

1. Navigate to **Settings → Hub Settings → General Settings**
2. Find the **Calculator Widget** section
3. Under **Calculator Widget Products**, select the products the widget may use for price calculation
4. Copy the embed code with your shop ID

> **Note:** The widget will automatically use your shop's theme colors and restrictions as configured in Orbit.

## Where the Prices Come From

The widget doesn't hold its own price list. It calculates each estimate from the `sales` `Products` you've selected for the widget under **Settings → Hub Settings → General Settings**. Whatever those products would quote for a given route and cargo is exactly what the customer sees.

When none of your products can return an automatic price for a particular request, the widget shows **Request Quote** instead of a number. This is a normal outcome, not an error. It simply means that transport needs a manual quote, and the customer is guided to your booking flow to request one.