欢迎来到 Quote3D 文档！⏳
Quote3D LogoQuote3D文档

在您的网站上嵌入3D打印报价小组件

将 Quote3D 强大的 3D 报价引擎直接嵌入到您自己的网站或电子商务平台中。

概览

Quote3D 嵌入式部件是一个低代码解决方案，让您可以在任何网站上为客户提供即时 3D 打印报价。无论您使用自定义网站、WordPress 还是 Shopify，都可以无缝连接 3D 模型查看和订单放置。

主要特性

  • 3D 模型查看器：交互式预览上传的 STL、OBJ 和 3MF 文件。
  • 即时定价：基于您自己的材料和打印机配置自动计算成本。
  • 多技术支持：支持 FDM、SLA 和 SLS 技术，并具有特定的计算逻辑。
  • 自定义主题：使用毛玻璃效果和自定义调色板来匹配您的品牌美学。
  • 零配置客户体验：您的客户无需了解技术切片详情；一切均由 Quote3D 处理。
  • 平台插件：适用于 WooCommerce 和 Shopify 的即用型插件。

您可以做什么

  • 实时电商同步：使用“添加到购物车”事件将报价直接链接到您商店的购物车。
  • 自动化潜在客户生成：自动捕获客户需求和模型数据。
  • 缩略图生成：自动捕获并存储模型截图，用于制造跟踪。
  • 灵活跳转：计算成功后将客户引导至指定落地页。跳转目标必须是 http 或 https 的URL。

入门指南

准备好开始集成了吗？您可以在仪表板中自定义组件的主题、语言、颜色、重定向行为和会话持久性，然后生成所需的嵌入代码或平台代码片段。

前往组件设置

价格说明

价格在 WooCommerce 中完全自动更新。对于 Shopify、PrestaShop 和 OpenCart 等封闭系统，为了确保价格在购物车阶段被自动“覆盖”，建议在您的商店中定义一个 1 单位（例如 $1）的产品，并将数量发送为价格那么多，或者通过平台的 API 使用价格更新钩子。该 Widget 会将所有计算出的技术细节和价格作为“属性”完全传输到您的系统。

平台集成：Shopify、WooCommerce及更多

Quote3D 组件基于现代 Web 技术构建，几乎可以在任何平台上运行。我们为流行的系统提供了现成的集成解决方案：

WooCommerce 3D打印报价插件

安装PHP插件，粘贴您的小组件令牌，计算出的价格会作为行项目元数据直接进入WooCommerce购物车——无需手动覆盖价格。

Shopify 3D打印报价应用区块

在主题编辑器中把应用区块放入任意Liquid模板。由于Shopify在商品层面固定价格，请配合下文介绍的1单位商品模式，让报价价格完整传递到结账环节。

其他平台与自定义技术栈

  • Wix：通过 Velo 和自定义元素提供高级集成。
  • Squarespace：通过代码块快速设置。
  • PrestaShop：与 Smarty 模板引擎兼容的结构。
  • OpenCart：基于 Twig 的现代主题支持。
  • 自定义软件：可以使用 JS SDK 集成到任何 React、Vue 或 Vanilla JS 项目中。

技术工作原理

Quote3D Widget 以高性能 Iframe 或现代 JS SDK 的形式运行。其工作原理如下：

  • 隔离运行：该 Widget 在其自身的保护区域（Iframe）中运行，因此不会破坏您网站的样式。
  • 实时通信：小组件通过 'postMessage' API 将计算结果传送到您的页面。使用SDK时，事件只会投递给嵌入小组件的来源，而不会广播给任意监听者。
  • 自动调整大小：在使用 SDK 时，该 Widget 会根据内容自动调整其高度。

在使用小组件的同时调用API

小组件在内部处理自己的API流量——这些路由无需您自行调用。若想用自己的代码读取或处理同一批数据，请使用核心概念中介绍的公开v2端点，指向 https://api.quote3d.com/v2，并使用真实的API Bearer令牌而非令牌ID。若要在买家把配置好的零件加入购物车时做出响应，请订阅 widget.added_to_cart Webhook，而不要直接调用任何接口。

从您自己的代码调用API

v2 API 仅对已配置的Quote3D来源响应跨域请求。请从您的服务器调用，而不要从店铺前端JavaScript调用；小组件本身运行在iframe内的Quote3D来源上，因此其自身请求不受影响。

安全与验证

小组件从浏览器调用Quote3D，因此任何查看页面源代码的人都能看到它的令牌。请创建专用的小组件令牌，限制为小组件作用域，并绑定到您的店铺来源。轮换会保留这两项限制，因此轮换后的小组件令牌绝不会变成完全访问令牌。

已上传的文件及预览

通过小部件上传的文件采用加密存储，且无法通过公开途径访问。“加入购物车”负载会提供 thumbnailUrl，这是一个从您自己的店面渲染的绝对链接：请务必按接收到的原样进行存储。重写该链接、剥离其查询参数或将其重新托管到您的域名下都会导致图片无法显示。

小组件令牌作用域

以小组件作用域创建的令牌只能访问嵌入式体验真正需要的端点。API上的其他一切都会被拒绝，因此从您页面源代码中窃取的令牌无法被用来危害您的账户。

小组件作用域允许：

  • 读取您的打印机与材料配置，以便报价表单能呈现您的选项。
  • 请求上传ID并上传模型文件。
  • 读取并删除它自己上传的文件。
  • 为该文件发起异步报价，并轮询由此产生的任务。
  • 按ID读取报价、保存其缩略图，并发送加入购物车事件。

小组件作用域拒绝：

  • Webhook管理，以免被窃取的令牌把您的事件流转发到其他服务器。
  • 账户信息、上传历史、报价列表、分析、用量与额度。
  • 许可证激活，以及上面未列出的其他所有端点。

来源绑定

列出允许使用该令牌的店铺，例如 https://shop.example.com。iframe加载时，Quote3D会检查嵌入小组件的页面，并拒绝在名单之外的任何站点上渲染。留空则该令牌在任何地方都可用。

来源绑定对您页面的要求

  • 该检查读取浏览器加载小组件iframe时发送的引荐来源。这是默认行为，因此普通页面无需任何额外设置。
  • 如果您的页面设置了 referrer-policy: no-referrer，则无法验证来源，小组件将拒绝加载。在这类页面上请使用不带来源限制的令牌。
  • 直接的API调用会单独检查：从名单之外站点的浏览器发出的请求会被拒绝，而不发送 Origin 标头的服务器间调用则不受影响。

小组件令牌读不到什么

配置端点只返回报价表单需要呈现的内容——打印机名称、成型尺寸、材料、颜色和层数限制。您的成本基础（每公斤材料价格、机器小时成本、支撑成本系数、功耗）绝不会发送到浏览器；定价在服务器端完成计算。

未设置作用域创建的令牌保持完全访问权限，因此现有集成可继续正常运行。为令牌添加作用域即是让它进入受限模式的方式。