Встройте виджет расчёта 3D-печати на свой сайт

Обзор

Виджет Quote3D Embed – это решение без кода/с минимальным кодированием, которое позволяет вам предоставлять мгновенные расчеты стоимости 3D-печати вашим клиентам на любом веб-сайте. Независимо от того, используете ли вы собственный сайт, WordPress или Shopify, вы можете беспрепятственно соединить просмотр 3D-модели и размещение заказа.

Ключевые особенности

• Просмотрщик 3D-моделей: Интерактивный предварительный просмотр загруженных файлов STL, OBJ и 3MF.
• Мгновенный расчет цены: Автоматический расчет стоимости на основе ваших собственных профилей материалов и принтеров.
• Поддержка нескольких технологий: поддерживает технологии FDM, SLA и SLS со специализированной логикой расчетов.
• Пользовательские темы: настройте внешний вид в соответствии с фирменным стилем, используя glassmorphism и собственные цветовые палитры.
• Нулевая конфигурация для клиентов: Вашим клиентам не нужно знать технические детали слайсинга; всем этим управляет Quote3D.
• Плагины для платформ: Готовые к использованию плагины для WooCommerce и Shopify.

Что вы можете сделать

• Синхронизация с интернет-магазином в реальном времени: используйте события «Добавить в корзину», чтобы напрямую связать расчеты со корзиной вашего магазина.
• Автоматизированный сбор лидов: Автоматически собирайте требования клиентов и данные модели.
• Автоматическая генерация эскизов: автоматически захватывайте и сохраняйте скриншоты моделей для отслеживания производства.
• Гибкие перенаправления: отправляйте клиентов на нужную страницу после успешного расчёта. Адрес перенаправления должен быть URL с http или https.

Интеграции с платформами: Shopify, WooCommerce и другие

Виджет Quote3D разработан с использованием современных веб-технологий и работает практически на любой платформе. У нас есть готовые решения для интеграции с популярными системами:

Другие платформы и собственные стеки

• Wix: Продвинутая интеграция через Velo и Custom Elements.
• Squarespace: Быстрая настройка через блоки кода.
• PrestaShop: Структуры, совместимые с шаблонизатором Smarty.
• OpenCart: Поддержка современных тем на основе Twig.
• Пользовательское программное обеспечение: Может быть интегрировано в любой React, Vue или Vanilla JS проект с помощью JS SDK.

Технический принцип работы

Виджет Quote3D работает как высокопроизводительный Iframe или современный JS SDK. Вот как это работает:

• Изолированная работа: Виджет работает в своей защищенной зоне (Iframe), поэтому он не нарушает стиль вашего сайта.
• Обмен в реальном времени: виджет передаёт результаты расчёта на вашу страницу через API 'postMessage'. При использовании SDK события доставляются только источнику, встроившему виджет, а не рассылаются всем слушателям.
• Автоматическое изменение размера: При использовании SDK виджет автоматически регулирует свою высоту в зависимости от контента.

Работа с API вместе с виджетом

Виджет обрабатывает свой трафик API внутри себя — эти маршруты вы не вызываете сами. Когда нужно прочитать или обработать те же данные из собственного кода, используйте публичные эндпоинты v2, описанные в основных понятиях, обращаясь к https://api.quote3d.com/v2 с настоящим Bearer-токеном API, а не с идентификатором токена. Чтобы реагировать на добавление настроенной детали в корзину, подпишитесь на вебхук widget.added_to_cart вместо прямых вызовов.

Безопасность и верификация

Виджет обращается к Quote3D из браузера, поэтому его токен виден каждому, кто откроет исходный код страницы. Создайте отдельный токен виджета, ограничьте его областью виджета и привяжите к источникам вашей витрины. Обновление сохраняет оба ограничения, поэтому обновлённый токен виджета никогда не станет токеном с полным доступом.

Загруженные файлы и превью

Файлы, загруженные через виджет, хранятся в зашифрованном виде и не доступны публично. В payload при добавлении в корзину передается thumbnailUrl — абсолютная ссылка, которая отображается в вашем магазине: сохраняйте её именно в том виде, в котором она была получена. Изменение ссылки, удаление параметров запроса или размещение на вашем домене приведет к ошибке отображения изображения.

Область токена виджета

Токен, созданный с областью виджета, достигает только тех эндпоинтов, которые действительно нужны встроенному интерфейсу. Всё остальное в API запрещено, поэтому токен, извлечённый из исходного кода страницы, нельзя обратить против вашего аккаунта.

Область виджета разрешает:

• Читать конфигурацию принтеров и материалов, чтобы форма расчёта могла показать ваши варианты.
• Запрашивать идентификатор загрузки и загружать файл модели.
• Читать и удалять загруженный им файл.
• Запускать асинхронный расчёт для этого файла и опрашивать созданное задание.
• Читать расчёт по идентификатору, сохранять его миниатюру и отправлять событие добавления в корзину.

Область виджета запрещает:

• Управление вебхуками, чтобы украденный токен не смог перенаправить ваш поток событий на другой сервер.
• Данные аккаунта, историю загрузок, списки расчётов, аналитику, использование и лимиты.
• Активацию лицензии и все прочие эндпоинты, не перечисленные выше.

Привязка к источнику

Перечислите витрины, которым разрешено использовать токен, например https://shop.example.com. При загрузке iframe Quote3D проверяет страницу, встраивающую виджет, и отказывается отображаться на сайтах вне списка. Оставьте поле пустым — и токен будет работать везде.

Что привязка к источнику требует от вашей страницы

• Проверка читает реферер, который браузер отправляет при загрузке iframe виджета. Это поведение по умолчанию, поэтому от обычной страницы ничего не требуется.
• Если ваша страница задаёт referrer-policy: no-referrer, источник проверить невозможно и виджет откажется загружаться. На таких страницах используйте токен без ограничения по источнику.
• Прямые вызовы API проверяются отдельно: запрос из браузера на сайте вне списка отклоняется, а вызовы сервер-сервер, которые не отправляют заголовок Origin, не затрагиваются.

Что токен виджета прочитать не может

Эндпоинт конфигурации возвращает только то, что отображает форма расчёта, — названия принтеров, области построения, материалы, цвета и ограничения по слоям. Ваша себестоимость (цена материала за килограмм, стоимость машино-часа, множитель стоимости поддержек, потребляемая мощность) в браузер не передаётся; цена рассчитывается на сервере.

Токены, созданные без области, сохраняют полный доступ, поэтому существующие интеграции продолжают работать без изменений. Добавление области — это и есть способ включить для токена ограничение.