サイトに3Dプリント見積もりウィジェットを埋め込む
Quote3Dの強力な3D見積もりエンジンを、お客様自身のウェブサイトまたはeコマースプラットフォームに直接組み込みます。
概要
Quote3D埋め込みウィジェットは、ノーコード/ローコードソリューションであり、あらゆるウェブサイトで顧客に即時の3Dプリント見積もりを提供できます。カスタムサイト、WordPress、Shopifyなどを使用している場合でも、3Dモデルの表示と注文の配置の間のギャップをシームレスに埋めることができます。
主な機能
- 3Dモデルビューワー：アップロードされたSTL、OBJ、3MFファイルのインタラクティブなプレビュー。
- 即時価格計算：独自の材料とプリンタープロファイルに基づいた自動コスト計算。
- マルチテクノロジー：FDM、SLA、SLSテクノロジーを特定の計算ロジックでサポート。
- カスタムテーマ：グラスモーフィズムとカスタムカラーパレットでブランドの美学に合わせることができます。
- クライアント向けの設定不要：お客様は技術的なスライシングの詳細を知る必要はありません。すべてはQuote3Dによって処理されます。
- プラットフォームプラグイン：WooCommerceとShopify向けのすぐに使用できるプラグイン。
できること
- リアルタイムのeコマース同期：'カートに追加'イベントを利用して、見積もりをストアのバスケットに直接リンクできます。
- 自動リード生成：顧客の要件とモデルデータを自動的に取得します。
- サムネイル生成：製造追跡のために、モデルのスクリーンショットを自動的にキャプチャして保存します。
- 柔軟なリダイレクト：計算成功後に顧客を特定のランディングページへ送れます。リダイレクト先はhttpまたはhttpsのURLである必要があります。
はじめに
統合の準備はできましたか？ダッシュボードからウィジェットのテーマ、言語、色、リダイレクト動作、セッションの永続性をカスタマイズし、必要な埋め込みコードまたはプラットフォームスニペットを生成できます。
ウィジェット設定へ価格に関する注意
WooCommerceでは価格が完全に自動的に更新されます。Shopify、PrestaShop、OpenCartなどのクローズドシステムでは、カート段階で価格が自動的に「上書き」されるようにするために、ストアに1ユニット（例：$1）の製品を定義し、価格と同じ量だけ数量を送信するか、プラットフォームのAPIを介して価格更新フックを使用することをお勧めします。ウィジェットは、計算されたすべての技術的詳細と価格を「プロパティ」としてシステムに完全に送信します。
プラットフォーム連携：Shopify、WooCommerceなど
Quote3Dウィジェットは最新のWebテクノロジーで構築されており、事実上あらゆるプラットフォームで動作します。一般的なシステム向けの統合ソリューションを準備しています:
WooCommerce向け3Dプリント見積もりプラグイン
PHPプラグインをインストールしてウィジェットトークンを貼り付けると、計算された価格が明細メタとしてWooCommerceのカートへ直接流れ込みます — 手動での価格上書きは不要です。
Shopify向け3Dプリント見積もりアプリブロック
テーマエディターから任意のLiquidテンプレートにアプリブロックを配置します。Shopifyは価格を商品単位で固定するため、見積もり価格をそのままチェックアウトへ届けるには、後述の1ユニット商品パターンと組み合わせてください。
その他のプラットフォームとカスタム構成
- Wix: VeloとCustom Elementsによる高度な統合。
- Squarespace: コードブロックによる迅速なセットアップ。
- PrestaShop: Smartyテンプレートエンジンに対応した構造。
- OpenCart: Twigベースの最新テーマサポート。
- カスタムソフトウェア: 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を購読します。
自分のコードからAPIを呼び出す
v2 APIは、設定されたQuote3Dオリジンに対してのみクロスオリジンリクエストに応答します。ストアのJavaScriptからではなくサーバーから呼び出してください。ウィジェット自体はiframe内のQuote3Dオリジンで動作するため、自身のリクエストは影響を受けません。
セキュリティと検証
ウィジェットはブラウザーからQuote3Dを呼び出すため、そのトークンはページのソースを見た誰にでも見えます。専用のウィジェットトークンを作成し、ウィジェットスコープに限定し、ストアのオリジンに紐付けてください。ローテーションは両方の制限を保持するので、ローテーションしたウィジェットトークンがフルアクセスになることはありません。
アップロードされたファイルとプレビュー
ウィジェットを通じてアップロードされたファイルは暗号化されて保存されており、公開アクセスはできません。カート追加のペイロードに含まれる thumbnailUrl は、自身のストアフロントからレンダリングされる絶対リンクです。受け取った形式のまま正確に保存してください。URLの書き換え、クエリの削除、または自身のドメインでの再ホストを行うと、画像が表示されなくなります。
ウィジェットトークンのスコープ
ウィジェットスコープで作成したトークンは、埋め込み体験が実際に必要とするエンドポイントにしか到達できません。API上のそれ以外はすべて拒否されるため、ページのソースから抜き取られたトークンをアカウントに対して悪用することはできません。
ウィジェットスコープが許可すること：
- 見積もりフォームが選択肢を表示できるよう、プリンターと材料の設定を読み取ること。
- アップロードIDを要求し、モデルファイルをアップロードすること。
- 自身がアップロードしたファイルを読み取り、削除すること。
- そのファイルの非同期見積もりを開始し、生成されたジョブをポーリングすること。
- IDで見積もりを読み取り、サムネイルを保存し、カート追加イベントを送信すること。
ウィジェットスコープが拒否すること：
- Webhook管理。盗まれたトークンがイベントストリームを別のサーバーへ転送できないようにします。
- アカウント情報、アップロード履歴、見積もり一覧、分析、使用状況、割り当て。
- ライセンス有効化、および上記に挙げていないその他すべてのエンドポイント。
オリジンの紐付け
トークンの使用を許可するストアを列挙してください。例：https://shop.example.com。Quote3Dはiframe読み込み時にウィジェットを埋め込んでいるページを確認し、リストにないサイトでは表示を拒否します。空のままにするとトークンはどこでも機能します。
オリジン紐付けがページに求めるもの
- この確認は、ブラウザーがウィジェットのiframeを読み込む際に送るリファラーを読み取ります。これは既定の動作なので、通常のページで必要な作業はありません。
- ページがreferrer-policy: no-referrerを設定している場合、オリジンを検証できずウィジェットは読み込みを拒否します。そうしたページではオリジン制限のないトークンを使用してください。
- 直接のAPI呼び出しは別途確認されます。リスト外のサイト上のブラウザーから送られたリクエストは拒否されますが、Originヘッダーを送らないサーバー間呼び出しは影響を受けません。
ウィジェットトークンが読み取れないもの
設定エンドポイントは見積もりフォームが表示する内容のみを返します — プリンター名、造形サイズ、材料、色、レイヤー上限です。原価情報（材料のkg単価、機械の時間コスト、サポートコスト係数、消費電力）がブラウザーへ送られることはなく、価格計算はサーバー上で行われます。
スコープなしで作成されたトークンはフルアクセスを保持するため、既存の連携はそのまま動作し続けます。トークンを制限の対象にするにはスコープを追加します。