Embed a 3D Print Quote Widget on Your Site

Overview

The Quote3D Embed Widget is a no-code/low-code solution that allows you to provide instant 3D printing quotes to your customers on any website. Whether you use a custom site, WordPress, or Shopify, you can bridge the gap between 3D model viewing and order placement seamlessly.

Key Features

• 3D Model Viewer: Interactive preview of uploaded STL, OBJ, 3MF and STEP files.
• Instant Pricing: Automated cost calculation based on your own material and printer profiles.
• Multi-Technology: Supports FDM, SLA, SLS, SLM and MJF, each with its own calculation logic.
• Custom Themes: Match your brand aesthetics with glassmorphism and custom color palettes.
• Zero Configuration for Clients: Your customers don't need to know technical slicing details; it's all handled by Quote3D.
• Platform Plugins: installable packages for WooCommerce, PrestaShop, OpenCart, Magento and Wix, plus ready-made code for Shopify, Webflow and Framer.
• Basic and Advanced Forms: Ask two plain questions, print quality and strength, instead of slicer settings, show every print setting, or let each customer switch between the two. Set it in the widget customizer or with the SDK's mode option.

What You Can Do

• Real-time eCommerce Sync: Use 'Add to Cart' events to link quotes directly to your store's basket.
• Automated Lead Generation: Capture customer requirements and model data automatically.
• Thumbnail Generation: Automatically capture and store model screenshots for manufacturing tracking.
• Flexible Redirects: Send customers to a specific landing page after a successful calculation. The redirect target must be an http or https URL.

Platform Integrations: WooCommerce, Shopify, PrestaShop, OpenCart, Magento and More

The widget runs on any website. For these platforms we provide installable packages or ready-made code; what happens to the cart differs per platform:

• Quote3D for WooCommerce
• Quote3D for PrestaShop
• Quote3D for OpenCart
• Quote3D for Magento
• Quote3D for Wix
• Quote3D for Shopify

Other platforms and custom stacks

• Wix: a Velo package that verifies the quote price in your site's backend and adds it to the Wix Stores cart (Premium plan; uses Wix's eCommerce Catalog service plugin, currently in beta). The cart line shows the carrier product's image, not the model thumbnail: Wix only accepts images from its Media Manager.
• Squarespace: embed the widget with a Code Block. Squarespace has no cart API, so orders go through a quote request, invoice or payment link.
• PrestaShop 8: an installable module that verifies the quote price on your server and adds it to the cart, with the Quote3D back office under Sell: quotes, production queue, colour stock, reports, model downloads and settings.
• OpenCart 3.0, 4.0.2.2+ and 4.1: an installable extension that verifies the quote price on your server and adds it to the cart, with a Quote3D admin menu: quotes, production queue, colour stock, reports, model downloads and settings.
• Magento Open Source / Adobe Commerce 2.4: a module that verifies the quote price on your server and adds it to the cart, with a Quote3D admin menu: quotes, production queue, colour stock, reports, model downloads and settings.
• Webflow: embed the widget with a Code Embed element. Quotes cannot be added to the Webflow Ecommerce cart.
• Framer: a React code component for the widget. Framer has no built-in cart.
• Custom Software: Can be integrated into any React, Vue or Vanilla JS project with the JS SDK.

Technical Working Principle

The Quote3D Widget operates as a high-performance Iframe or a modern JS SDK. Here is how it works:

• Isolated Operation: The widget runs in its own protected zone (Iframe), so it doesn't break your website's style.
• Real-time Communication: The widget transmits calculation results to your page via the 'postMessage' API. When you use the SDK, events are delivered only to the origin that embedded the widget rather than broadcast to any listener.
• Automatic Sizing: When using the SDK, the widget automatically adjusts its height based on the content.

Working with the API alongside the widget

The widget handles its own API traffic internally — you do not call those routes yourself. When you want to read or act on the same data from your own code, use the public v2 endpoints described in Core Concepts, targeting https://api.quote3d.com/v2 with a real API Bearer token rather than a token ID. To react to a shopper adding a configured part to their cart, subscribe to the widget.added_to_cart webhook instead of calling anything directly.

Security and Verification

The widget calls Quote3D from the browser, so its token is visible to anyone who views the page source. Create a dedicated widget token, restrict it to the widget scope, and bind it to your storefront origins. Rotation preserves both restrictions, so a rotated widget token never becomes a full-access one.

Uploaded files and previews

Files uploaded through the widget are stored encrypted and are not publicly reachable. The add-to-cart payload gives you thumbnailUrl, an absolute link that renders from your own storefront: store it exactly as received. Rewriting it, stripping its query, or re-hosting it under your domain will break the image.

Prices your store can trust

• A widget-scoped token cannot set a price. A quote requested with it keeps only the options a shopper picks in the form; material, machine and fee prices always come from your own profiles.
• The widget.added_to_cart webhook reports the price, currency, quantity and material stored with the quote, not what the browser sent, and it is sent once per quote.
• The QUOTE3D_ADD_TO_CART message your page receives comes from the shopper's browser and can be altered there. Before you charge, check the price against the webhook or GET https://api.quote3d.com/v2/quotes/{quote_id}.

Widget Token Scope

A token created with the widget scope can only reach the endpoints the embedded experience actually needs. Everything else on the API is refused, so a token lifted from your page source cannot be turned against your account.

The widget scope permits:

• Reading your printer and material configuration so the quote form can render your options.
• Requesting an upload id and uploading a model file.
• Reading, and deleting, the file it uploaded.
• Starting an asynchronous quote for that file and polling the resulting job.
• Reading a quote by id, saving its thumbnail, and sending the add-to-cart event.

The widget scope refuses:

• Webhook management, so a stolen token cannot redirect your event stream to another server.
• Account details, your upload history, quote listings, analytics, usage and quota.
• License activation and every other endpoint not listed above.

Origin Binding

List the storefronts allowed to use the token, for example https://shop.example.com. A widget-scoped token needs at least one: Quote3D checks the page that embeds the widget when the iframe loads, and refuses to render on any site that is not on the list.

What origin binding needs from your page

• The check reads the referrer your browser sends when it loads the widget iframe. That is the default behaviour, so nothing is required of a normal page.
• If your page sets referrer-policy: no-referrer, the origin cannot be verified and the widget refuses to load. Use the browser default (strict-origin-when-cross-origin) or origin on pages that embed the widget.
• Direct API calls are checked separately: a request sent from a browser on a site outside the list is rejected, while server-to-server calls, which send no Origin header, are not affected.

What a widget token cannot read

The configuration endpoint returns only what the quote form renders — printer names, build volumes, materials, colours and layer limits. Your cost basis (material price per kilogram, machine hourly cost, support cost multiplier, power draw) is never sent to the browser; pricing is computed on the server.

Visitor sessions

A widget token is public, so a limit counted on the token would be shared by every shopper on your store, and one script could use it up and lock everyone else out. The widget therefore opens a short visitor session the first time a shopper uploads a file, and the steps that cost something are counted per session.

• The embedded widget does this by itself. The standard embed code needs no change.
• Uploading a file, starting a quote, saving a thumbnail and the add-to-cart event need a session. Reading your configuration, polling a job and fetching a quote do not, so a long calculation never leaves a shopper stranded.
• A session lasts 30 minutes. In each session, a shopper can request up to 30 uploads, 15 quotes, 30 thumbnail saves and 20 add-to-cart events per hour. One IP address can open up to 20 sessions per hour for the same token.
• Only widget-scoped tokens are held to this. A token without a scope is treated as a server integration and gets none of these protections, so the token in your storefront should always be a widget-scoped one.
• If you call these endpoints yourself with a widget-scoped token, open a session first: get a challenge from GET https://api.quote3d.com/v2/widget/challenge, find the number between 0 and maxnumber for which the SHA-256 of the salt followed by that number equals the challenge, and send it to POST https://api.quote3d.com/v2/widget/session. Send the returned value in the X-Widget-Session header. A missing or expired session is answered with 401 and error code AUTH_005; open a new session and repeat the call.
• Widget traffic has an hourly allowance of its own, separate from your server integration, so a busy storefront and your own backend cannot starve each other. You can also set a daily quote limit for the widget in the dashboard; when it is reached, shoppers are asked to try again the next day and you get an email.

Tokens created without a scope keep full access, so existing integrations continue to work unchanged. Adding a scope is how you opt a token into the restriction.