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, and 3MF files.
• Instant Pricing: Automated cost calculation based on your own material and printer profiles.
• Multi-Technology: Supports FDM, SLA, and SLS technologies with specific 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: Ready-to-use plugins for WooCommerce and Shopify.

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: Shopify, WooCommerce and More

The Quote3D Widget is built with modern web technologies and works on virtually any platform. We have ready integration solutions for popular systems:

Other platforms and custom stacks

• Wix: Advanced integration via Velo and Custom Elements.
• Squarespace: Fast setup via code blocks.
• PrestaShop: Structures compatible with the Smarty template engine.
• OpenCart: Modern theme support based on Twig.
• 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.

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. 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. Leave it empty and the token works anywhere.

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 a token without an origin restriction on such pages.
• 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.

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.