Calculator Widget
Embed Orbit's price calculator on your website: installation, configuration options, styling, and where the widget's prices come from.
Embed Orbit's price calculator on your website: installation, configuration options, styling, and where the widget's prices come from.
Was this article helpful?
Did not find your answer?
Ask Luna, or write to our support team.
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.
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>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>The Calculator Widget can be customized using HTML data attributes. All configuration is done through data-* attributes on the widget container element.
| 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" |
| 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" |
| 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 |
| 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 can be set in three ways:
data-email-capture-enabled (evaluates to true)data-email-capture-enabled="true" or 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>Widget settings can be managed in Orbit MissionControl:
Navigate to Settings → Hub Settings → General Settings
Find the Calculator Widget section
Under Calculator Widget Products, select the products the widget may use for price calculation
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.
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.