Quick start

In this guide you add the quoting widget to a page on your site and listen to what the buyer does. When you finish, a buyer can drop a 3D file on your page, see the part, pick a material and get a price computed from your machines, your materials and your rates, with no e-mail and no waiting.

Before you begin

• A Quotometry account with access to the console.
• At least one published configuration (see Your first configuration).
• A page you can edit as HTML, and its origin (for example https://yourshop.com).

1. Create a widget and copy its key

1. In the console, open Widgets and create a widget.
2. Attach the published configuration you want buyers to be priced from.
3. Copy the widget key. A new widget starts in test mode with a key like wgt_test_…; when you choose Go live, it gets a wgt_live_… key and the test key stops working.

The widget key is publishable on purpose: it identifies the widget, it does not authorise anything, and it is safe in page source.

2. Add your site to the allowed origins

In the widget’s settings, add your site to Allowed origins. The API answers a browser only when the page’s Origin is on that list. That check is the whole security model of a publishable key, and it is why copying someone else’s key into your page gets you a 403.

A test widget also answers on localhost, so you can try it locally before you add any origin.

3. Add two lines to your page

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

The first line is a loader of about a kilobyte. It downloads the widget itself only when a <quotometry-quote> element is on the page, so a script tag in a global footer costs almost nothing on pages without a quoting form.

The element renders into a shadow root, so your CSS cannot leak in and its CSS cannot leak out. It brings its own typeface (Inter); everything about its look, including the font, is themable.

4. Listen to what the buyer does

The element emits ordinary DOM events, so no framework is needed:

const el = document.querySelector('quotometry-quote');
el.addEventListener('quotometry:quote-updated', (e) => console.log(e.detail.totals));
el.addEventListener('quotometry:order-submitted', (e) => console.log('order', e.detail.number));
el.addEventListener('quotometry:cart-add', (e) => addToMyCart(e.detail)); // a quote id and signature, never a price

The full list is in the widget reference.

5. Try it in test mode first

A widget is either live or test. A test widget quotes with the same engine and the same configuration, but everything it produces is marked test: it is excluded from your analytics and your bill, and the test/live filter in the Inbox keeps it apart from real work. Point your staging site at a test widget and break things there.

No website to put it on?

Every widget can serve its own page. Switch on the hosted quoting page in the widget editor and you get a …/q/your-shop address to send people, with an optional custom domain. See Embedding without a website.

Explore the documentation

Next steps

• Concepts: the ideas behind the API, in six short sections.
• Embedding: React, Vue, WordPress, Shopify and site builders.
• Widget reference: every attribute, event, method and theming variable.
• Cart recipes: turn a quote into a line in the cart you already have.