Quotation Web Component

Stable

The Shipthis Quotation Form Wrapper is a prebuilt web component you can embed in your website. It connects to your Shipthis ERP account and lets prospects generate accurate quotes in real time.

Get a quote

FROMSGSIN

TODEHAM

Ocean FCL

$2,840

BEST

Continue →

Interactive Sandbox

Customize colors, layout, and visibility live — copy the exact snippet.

Quick start

html

<shipthis-quotation
  organisation-id="YOUR_ORG_ID"
  api-key="YOUR_API_KEY"
  captcha-key="YOUR_CAPTCHA_KEY"
  title="Request a Quote"
  layout="accordion"
  show-header="true"
  show-footer="true"
  show-clear-button="true"
></shipthis-quotation>

<!-- Add before </body> -->
<script type="module"
  src="https://cdn.jsdelivr.net/gh/shipthisco/quotation-web-component@master/dist/qwc.js">
</script>

Installation

Add the script before </body>:

html

<script type="module"
  src="https://cdn.jsdelivr.net/gh/shipthisco/quotation-web-component@master/dist/qwc.js">
</script>

Basic usage

html

<shipthis-quotation
  organisation-id="YOUR_ORG_ID"
  api-key="YOUR_API_KEY"
  captcha-key="YOUR_CAPTCHA_KEY"
  title="Request a Quote"
  layout="accordion"
></shipthis-quotation>

Required attributes

Attribute	Description
organisation-id	Your organisation's unique ID
api-key	API key to authenticate requests
captcha-key	Your Google reCAPTCHA v2 site key

Optional attributes

Attribute	Description	Default
title	Widget heading	"Request a Quote"
description	Subtitle text	""
layout	fullform · stepper · accordion · tabs	fullform
show-header	Show header section	true
show-footer	Show footer section	true
show-clear-button	Show clear button	true
submit-button-text	Submit button label	"Submit"
clear-button-text	Clear button label	"Clear"
success-message	Message shown after submission	""
theme	JSON theme object (see Theming)	—

Theming

Pass a JSON string to the theme attribute to customise colors and radius:

html

<shipthis-quotation
  organisation-id="YOUR_ORG_ID"
  api-key="YOUR_API_KEY"
  captcha-key="YOUR_CAPTCHA_KEY"
  theme='{
    "mode": "dark",
    "radius": "8px",
    "dark": {
      "primary": "#d4af37",
      "background": "#121212",
      "secondary": "#333333",
      "accent": "#ffd700",
      "text": "#e0e0e0",
      "submitButton": { "background": "#d4af37", "text": "#000000" }
    }
  }'
></shipthis-quotation>

Slots

Inject custom HTML into the footer slot:

html

<shipthis-quotation organisation-id="YOUR_ORG_ID" api-key="YOUR_API_KEY" captcha-key="YOUR_CAPTCHA_KEY">
  <div slot="footer">Powered by your-brand.com</div>
</shipthis-quotation>

All components Resources