3D プリント見積もりウィジェットの埋め込み

概要

Quote3D 埋め込みウィジェットは、ノーコード / ローコードソリューションであり、あらゆるウェブサイトで顧客に即時の3D プリント見積もりを提供できます。カスタムサイト、WordPress、Shopify などを使用している場合でも、3D モデルの表示と注文の配置の間のギャップをシームレスに埋めることができます。

主な機能

• 3D モデルビューワー: アップロードされた STL、OBJ、3MF、STEP ファイルのインタラクティブなプレビュー。
• 即時価格計算: 独自の材料とプリンタープロファイルに基づいた自動コスト計算。
• マルチテクノロジー: FDM、SLA、SLS、SLM、MJF に対応し、それぞれ専用の計算ロジックを持ちます。
• カスタムテーマ: グラスモーフィズムとカスタムカラーパレットでブランドの美学に合わせることができます。
• クライアント向けの設定不要: お客様は技術的なスライシングの詳細を知る必要はありません。すべては Quote3D によって処理されます。
• プラットフォームプラグイン: WooCommerce、PrestaShop、OpenCart、Magento、Wix 向けのインストール可能なパッケージと、Shopify、Webflow、Framer 向けの既製コード。
• ベーシックとアドバンスのフォーム: スライサー設定の代わりに「印刷品質」と「強度」だけをたずねる、すべての印刷設定を表示する、またはお客様が両方を切り替えられるようにする、から選べます。ウィジェットのカスタマイズ画面か SDK の mode オプションで設定します。

できること

• リアルタイムの e コマース同期: ' カートに追加 ' イベントを利用して、見積もりをストアのバスケットに直接リンクできます。
• 自動リード生成: 顧客の要件とモデルデータを自動的に取得します。
• サムネイル生成: 製造追跡のために、モデルのスクリーンショットを自動的にキャプチャして保存します。
• 柔軟なリダイレクト: 計算成功後に顧客を特定のランディングページへ送れます。リダイレクト先は http または https の URL である必要があります。

プラットフォーム連携: WooCommerce、Shopify、PrestaShop、OpenCart、Magento など

ウィジェットはどのウェブサイトでも動作します。以下のプラットフォームにはインストール可能なパッケージまたは既製コードを用意しています。カートで何が起こるかはプラットフォームによって異なります:

• WooCommerce 向け Quote3D
• PrestaShop 向け Quote3D
• OpenCart 向け Quote3D
• Magento 向け Quote3D
• Wix 向け Quote3D
• Shopify 向け Quote3D

その他のプラットフォームとカスタム構成

• Wix: 見積価格をサイトのバックエンドで検証し、Wix Stores のカートに追加する Velo パッケージ (Premium プラン。現在ベータ版の Wix eCommerce Catalog service plugin を使用)。カートの行にはモデルのサムネイルではなくキャリア商品の画像が表示されます。Wix は Media Manager の画像しか受け付けないためです。
• Squarespace: Code Block でウィジェットを埋め込みます。Squarespace にはカート API がないため、注文は見積もり依頼、請求書、支払いリンクで処理します。
• PrestaShop 8: 見積もり価格をサーバーで検証してカートに追加するインストール可能なモジュール。Sell メニューに Quote3D 管理画面 (見積もり、生産キュー、色の在庫、レポート、モデルのダウンロード、設定) があります。
• OpenCart 3.0、4.0.2.2+、4.1: 見積もり価格をサーバーで検証してカートに追加するインストール可能な拡張機能。管理画面に Quote3D メニュー (見積もり、生産キュー、色の在庫、レポート、モデルのダウンロード、設定) があります。
• Magento Open Source / Adobe Commerce 2.4: 見積もり価格をサーバーで検証してカートに追加するモジュール。管理画面に Quote3D メニュー (見積もり、生産キュー、色の在庫、レポート、モデルのダウンロード、設定) があります。
• Webflow: Code Embed 要素でウィジェットを埋め込みます。見積もりを Webflow Ecommerce のカートに追加することはできません。
• Framer: ウィジェット用の React コードコンポーネント。Framer には組み込みのカートがありません。
• カスタムソフトウェア: JS SDK を使用して、React、Vue、または Vanilla JS プロジェクトに統合できます。

技術的な動作原理

Quote3D ウィジェットは、高性能な Iframe または最新の JS SDK として動作します。その仕組みは以下のとおりです。

• 独立した動作: ウィジェットは独自の保護された領域 (Iframe) で実行されるため、ウェブサイトのスタイルを壊すことはありません。
• リアルタイム通信: ウィジェットは計算結果を 'postMessage' API でページへ送信します。SDK を使う場合、イベントは任意のリスナーへ配信されるのではなく、ウィジェットを埋め込んだオリジンにのみ届きます。
• 自動サイズ調整: SDK を使用する場合、ウィジェットはコンテンツに基づいて高さを自動的に調整します。

ウィジェットと併せて API を利用する

ウィジェットは自身の API 通信を内部で処理します — これらのルートをお客様が呼び出すことはありません。同じデータを自分のコードから読み取ったり操作したりしたい場合は、コアコンセプトで説明した公開 v2エンドポイントを、トークン ID ではなく実際の API Bearer トークンで https://api.quote3d.com/v2 に対して使用してください。購入者が設定済みの部品をカートに追加したことに反応するには、直接何かを呼び出すのではなく widget.added_to_cart Webhook を購読します。

セキュリティと検証

ウィジェットはブラウザーから Quote3D を呼び出すため、そのトークンはページのソースを見た誰にでも見えます。専用のウィジェットトークンを作成し、ウィジェットスコープに限定し、ストアのオリジンに紐付けてください。ローテーションは両方の制限を保持するので、ローテーションしたウィジェットトークンがフルアクセスになることはありません。

アップロードされたファイルとプレビュー

ウィジェットを通じてアップロードされたファイルは暗号化されて保存されており、公開アクセスはできません。カート追加のペイロードに含まれる thumbnailUrl は、自身のストアフロントからレンダリングされる絶対リンクです。受け取った形式のまま正確に保存してください。URL の書き換え、クエリの削除、または自身のドメインでの再ホストを行うと、画像が表示されなくなります。

ストアが信頼できる価格

• ウィジェットスコープのトークンは価格を指定できません。このトークンで依頼された見積もりには、顧客がフォームで選んだオプションだけが使われ、材料・機械・手数料の価格は常にお客様自身のプロファイルから取得されます。
• widget.added_to_cart Webhook は、ブラウザーが送信した内容ではなく、見積もりとともに保存された価格・通貨・数量・材料を通知し、見積もりごとに1回だけ送信されます。
• ページが受け取る QUOTE3D_ADD_TO_CART メッセージは顧客のブラウザーから送られるもので、そこで改ざんされる可能性があります。課金する前に、Webhook または GET https://api.quote3d.com/v2/quotes/{quote_id} で価格を確認してください。

ウィジェットトークンのスコープ

ウィジェットスコープで作成したトークンは、埋め込み体験が実際に必要とするエンドポイントにしか到達できません。API 上のそれ以外はすべて拒否されるため、ページのソースから抜き取られたトークンをアカウントに対して悪用することはできません。

ウィジェットスコープが許可すること:

• 見積もりフォームが選択肢を表示できるよう、プリンターと材料の設定を読み取ること。
• アップロード ID を要求し、モデルファイルをアップロードすること。
• 自身がアップロードしたファイルを読み取り、削除すること。
• そのファイルの非同期見積もりを開始し、生成されたジョブをポーリングすること。
• ID で見積もりを読み取り、サムネイルを保存し、カート追加イベントを送信すること。

ウィジェットスコープが拒否すること:

• Webhook 管理。盗まれたトークンがイベントストリームを別のサーバーへ転送できないようにします。
• アカウント情報、アップロード履歴、見積もり一覧、分析、使用状況、割り当て。
• ライセンス有効化、および上記に挙げていないその他すべてのエンドポイント。

オリジンの紐付け

トークンを使えるストアを列挙します (例: https://shop.example.com)。ウィジェット用トークンには1つ以上必要です。iframe の読み込み時に Quote3D はウィジェットを埋め込んだページを確認し、一覧にないサイトでは表示を拒否します。

オリジン紐付けがページに求めるもの

• この確認は、ブラウザーがウィジェットの iframe を読み込む際に送るリファラーを読み取ります。これは既定の動作なので、通常のページで必要な作業はありません。
• ページが referrer-policy: no-referrer を設定しているとオリジンを確認できず、ウィジェットは読み込まれません。ウィジェットを埋め込むページでは、ブラウザーの既定値 (strict-origin-when-cross-origin) または origin を使ってください。
• 直接の API 呼び出しは別途確認されます。リスト外のサイト上のブラウザーから送られたリクエストは拒否されますが、Origin ヘッダーを送らないサーバー間呼び出しは影響を受けません。

ウィジェットトークンが読み取れないもの

設定エンドポイントは見積もりフォームが表示する内容のみを返します — プリンター名、造形サイズ、材料、色、レイヤー上限です。原価情報 (材料の kg 単価、機械の時間コスト、サポートコスト係数、消費電力) がブラウザーへ送られることはなく、価格計算はサーバー上で行われます。

訪問者セッション

ウィジェットトークンは公開されているため、トークン単位で数える制限はストアのすべての顧客で共有され、1つのスクリプトがそれを使い切って他の全員を締め出すおそれがあります。そのためウィジェットは、顧客が初めてファイルをアップロードするときに短時間の訪問者セッションを開始し、コストのかかる操作をセッションごとに数えます。

• 埋め込みウィジェットはこれを自動で行います。標準の埋め込みコードを変更する必要はありません。
• ファイルのアップロード、見積もりの開始、サムネイルの保存、カート追加イベントにはセッションが必要です。設定の読み取り、ジョブのポーリング、見積もりの取得には不要なので、計算に時間がかかっても顧客が途中で取り残されることはありません。
• セッションの有効期間は30分です。1つのセッションで、顧客は1時間あたり最大30件のアップロード、15件の見積もり、30件のサムネイル保存、20件のカート追加イベントを行えます。1つの IP アドレスが同じトークンで開けるセッションは1時間あたり最大20件です。
• これらのルールはウィジェットスコープのトークンにのみ適用されます。スコープのないトークンはサーバー連携として扱われ、これらの保護を一切受けないため、ストアに置くトークンは必ずウィジェットスコープにしてください。
• ウィジェットスコープのトークンでこれらのエンドポイントを自分で呼び出す場合は、まずセッションを開いてください。GET https://api.quote3d.com/v2/widget/challenge でチャレンジを取得し、ソルトの後ろにその数を付けたものの SHA-256がチャレンジと一致する数 (0から maxnumber の間) を見つけて、POST https://api.quote3d.com/v2/widget/session に送信します。返された値を X-Widget-Session ヘッダーで送信してください。セッションがない、または期限切れの場合は401とエラーコード AUTH_005 が返されます。新しいセッションを開いて呼び出しを繰り返してください。
• ウィジェットのトラフィックには、サーバー連携とは別の独自の1時間あたりの枠があるため、混雑するストアとお客様自身のバックエンドが互いに妨げ合うことはありません。また、ダッシュボードでウィジェットの1日あたりの見積もり上限を設定できます。上限に達すると、顧客には翌日に再度試すよう案内され、お客様にメールが届きます。

スコープなしで作成されたトークンはフルアクセスを保持するため、既存の連携はそのまま動作し続けます。トークンを制限の対象にするにはスコープを追加します。