Embedding

This guide shows how to put the quoting widget on any kind of site: a hand-written page, a JavaScript framework, a platform you do not control, or no website at all. Every method uses the same widget and the same configuration, so you can start with one and switch later.

Before you begin

• A widget key (wgt_test_… or wgt_live_…) from Widgets in the console. See the quick start.
• Your site’s origin in the widget’s Allowed origins. The iframe embed checks the same list.

Plain HTML

<script async src="https://cdn.quotometry.example/widget/v1/loader.js"></script>
<quotometry-quote widget="wgt_live_YOURKEY"></quotometry-quote>

The script tag can live in a global footer. It is a loader of about a kilobyte and downloads the widget only when a <quotometry-quote> element is on the page. Copy the exact snippet for your widget from the Put it on your website card in the widget editor.

React

A custom element is just an element. React 19 passes unknown attributes through, so attributes need nothing special. Events need a ref, because React’s synthetic event system does not know the quotometry:* events.

import { useEffect, useRef } from 'react';

export function Quote({ widgetKey, onCartAdd }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const handler = (e) => onCartAdd(e.detail);
    el.addEventListener('quotometry:cart-add', handler);
    return () => el.removeEventListener('quotometry:cart-add', handler);
  }, [onCartAdd]);
  return <quotometry-quote ref={ref} widget={widgetKey} />;
}

On React 18 or earlier, set the attributes yourself in the same effect: those versions pass props to custom elements inconsistently.

Vue

<template>
  <quotometry-quote :widget="widgetKey" @quotometry:cart-add="onCartAdd" />
</template>

<script setup>
defineProps(['widgetKey']);
</script>

Tell Vue that the element is not one of its components, or it warns on every render:

app.config.compilerOptions.isCustomElement = (tag) => tag === 'quotometry-quote';

Svelte, Angular, Astro and plain Web Components

Nothing extra is needed. These frameworks treat unknown elements as elements and DOM events as DOM events.

Single-page apps

Call reset() when the buyer leaves the page that had the widget, so the next visit starts at the drop zone rather than in the middle of the previous draft:

router.afterEach(() => document.querySelector('quotometry-quote')?.reset());

Unmounting the element also works: it clears its shadow root when it is removed from the page.

A platform that strips script tags

Some site builders do not let you add a <script>. Use an iframe that points at the widget’s embed page, /w/ followed by your widget key, and let it tell the parent page how tall it is:

<iframe id="quotometry" src="https://api.quotometry.example/w/wgt_live_YOURKEY" style="width:100%;border:0"
        height="600" title="Instant quote"></iframe>
<script>
  addEventListener('message', (e) => {
    if (e.data?.quotometry === 'resize') document.getElementById('quotometry').height = e.data.height;
  });
</script>

The embed page passes the widget’s events to the parent as { quotometry: 'quote-updated' | 'order-submitted' | 'rfq-submitted' | 'cart-add', detail }. If you cannot add even that small script, leave the iframe at a fixed height: the widget scrolls inside it.

WordPress and WooCommerce

1. Install the Quotometry Quoting plugin.
2. Open Settings → Quotometry Quoting and enter your widget key. For WooCommerce, also enter your secret key and your shop’s shared secret.
3. Add the Instant quote block, or the [quotometry_quote] shortcode, to a page.

The plugin loads the widget script only on requests that render a widget.

With WooCommerce active, a finished quote becomes a basket line:

widget → quotometry:cart-add (a signed quote id, never a price)
       → POST /wp-json/quotometry/v1/cart
       → PHP checks the signature against your shared secret
       → PHP fetches the quote with your secret key
       → basket line at that price
       → checkout re-fetches the quote and stamps its id on the order line
       → payment creates the Quotometry order

The browser never names an amount, so there is nothing on the page worth tampering with. The secret key stays in PHP; only the widget key is printed in the page. A quote in a currency other than the shop’s is refused rather than converted.

If your theme strips inline scripts, use the redirect hand-off instead: set the widget’s return address and the buyer comes back to your site with ?quotometry_quote=…&quotometry_sig=…. The plugin picks both up and removes them from the address, so a refresh cannot add the same part twice.

Shopify

1. Install the Quotometry app.
2. In the theme editor, add the Instant quote block to a page and enter your widget key.

Shopify does not let an app put an arbitrary price on a storefront cart line, and it is right not to: anything the storefront can be told, a customer can tell it. So a configured part becomes a draft order. The app fetches the quote on the server, creates a one-line draft order at that price tagged quotometry, and sends the buyer to its invoice. The buyer pays through your own checkout, with your taxes, shipping and payment providers. When Shopify sends orders/create, the app reads quotometry_quote_id from the order and converts the quote.

Wix, Squarespace, Webflow and Framer

All four accept an embed. Paste the same two lines into the platform’s raw-HTML element:

Platform	Where to paste the snippet
Wix	Add → Embed Code → Embed HTML, then choose Code, not Website address. Make the element taller than you think you need: Wix does not grow it.
Squarespace	Add Block → Code, with Display Source switched off. Code blocks need the Business plan or above; on a lower plan, link to your hosted quoting page instead.
Webflow	An Embed element, or Project Settings → Custom Code → Footer for the loader plus an Embed element for the widget.
Framer	Insert → Embed → HTML, or a Code Override on a section.

If a builder strips <script>, or your plan forbids custom code, use the iframe embed. It needs no script on your site at all.

Google Tag Manager

You can inject the loader through a Custom HTML tag, and it works, but we recommend against it. The widget is part of the page, not analytics: through a tag manager it loads after consent, after the tag manager itself, and not at all for visitors whose ad blocker blocks the tag manager. Put the loader in your site’s own footer and let the tag manager listen instead: the widget’s quotometry:* events are ordinary DOM events and make good triggers.

No website

Every widget can serve its own page. In the widget editor, open the Hosted page and domain tab and switch on the hosted quoting page. You get:

• https://api.quotometry.example/q/your-shop: your logo, your colours, your copy and the same widget;
• optionally your own domain (quote.yourshop.com), by pointing a CNAME record at Quotometry and verifying it;
• a QR code, for a sign on the shop wall or a card in a parcel.

It is the same widget and the same configuration, so a shop with no website at all can be quoting the same afternoon.

Next steps

• Widget reference: every attribute, event and method.
• Cart recipes: add a quote to WooCommerce, Shopify or your own cart.
• Widgets and theming: keys, origins and colours in the console.
• Troubleshooting: origin errors and content security policy.