Calculator Widget

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:


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


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

Layout & Display

Attribute	Type	Default	Description	Example
`data-layout`	`"vertical"`	`"horizontal"`	`"vertical"`	Controls the widget layout orientation
`data-label-mode`	`"label"`	`"placeholder"`	`"label"`	Whether to show field labels above inputs or as placeholders

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`
`data-shop-url`	`string`	Default shop URL	Required. URL to redirect users to after form submission. Typically the url of a public booking flow created in Hub Settings.	`data-shop-url="myshop.shop.orbit.do/book-signup"`

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


<div
    class="orbit-widget-calculator"
    data-shop-id="my-transport-company">
</div>

Horizontal Layout with Email Capture


<div
    class="orbit-widget-calculator"
    data-shop-id="my-transport-company"
    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://ppp.shop.orbit.do/my-booking-flow>"
    >
</div>

Configuration in Orbit

Widget settings can be managed in Orbit Mission:

Navigate to Settings → Hub → General
Find the Calculator Widget section
Configure available products for price calculation
Copy the embed code with your shop ID

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