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

Quote3D 部件集成

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

概览

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

主要功能

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

您可以做什么

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

入门指南

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

前往组件设置

💡 价格说明

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

支持的平台

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

  • WooCommerce：使用我们现成的 PHP 插件，实现了与已完成购物车的兼容。
  • Shopify：支持基于 Liquid 的 App Block。
  • Wix：通过 Velo 和自定义元素提供高级集成。
  • Squarespace：通过代码块快速设置。
  • PrestaShop：与 Smarty 模板引擎兼容的结构。
  • OpenCart：基于 Twig 的现代主题支持。
  • 自定义软件：可以使用 JS SDK 集成到任何 React、Vue 或 Vanilla JS 项目中。

技术工作原理

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

  • 隔离运行：该 Widget 在其自身的保护区域（Iframe）中运行，因此不会破坏您网站的样式。
  • 实时通信：该 Widget 通过 'postMessage' API 立即将计算结果传输到您的网站。
  • 自动调整大小：在使用 SDK 时，该 Widget 会根据内容自动调整其高度。

小部件 API 端点

这些端点支持常见的小部件工作流，例如将计算出的报价同步到您的购物车以及存储生成的预览图。外部调用应指向 https://api.quote3d.com/v2，并且必须使用真实的 API Bearer token，而不是 token ID。

POST /v2/widget/add-to-cart

当小部件需要将完成的报价传递到您的电子商务流程时，请使用此端点。它会记录转化事件，存储报价/购物车关系，并可以触发 widget.added_to_cart webhook 以进行下游自动化。

  • 在重定向或打开购物车之前，发送您的商店需要的最终报价上下文。
  • 将其用作小部件结果与您的购物车/订单系统之间的服务器端桥梁。
  • 如果您依赖 Quote3D webhook 或审计跟踪，请将其视为规范的添加到购物车事件。

POST /v2/thumbnail/save

使用此端点来持久化客户端捕获的模型预览图像。保存的缩略图可以附加到购物车项目、订单元数据或制造工作流程。

  • 将生成的图像作为 base64 格式连同文件上下文一起发送，以便 Quote3D 能够将其存储在正确的上传位置。
  • 响应会返回一个保存的缩略图 URL，您可以将其保存在小部件有效载荷或下游订单数据中。
  • 这是持久化小部件屏幕截图的推荐方法，而不是存储临时仅浏览器可用的图像数据。

安全与验证

Widget 集成需要真实的 API Bearer token，以便嵌入式体验可以代表您的帐户调用 Quote3D。令牌列表中显示的 token ID 不能用于验证 API 调用。请在 Dashboard > Tokens 中为 Widget 生成专用 token，在创建时立即复制，定期轮换，尽可能使用较短的过期时间，并在信任购物车或转化事件之前使用 HMAC 签名在服务器端验证 webhook。