Webflow 連携#
Webflow のカスタムコードと CMS/EC のフィールドを使用し、商品コードが ideal.house カタログと一致する Room Visualizer ボタンを描画します。
検証状況: 2026年9月7日 に Webflow ヘルプセンターのドキュメントを確認しました。顧客の Webflow サイトは利用できませんでした。カスタムコードはプレビューまたは公開後に実行され、Webflow は埋め込み内でサーバー側コードを実行しません。公開したステージング用ドメインでテストしてください。
SDK を読み込む前に: ダッシュボード → 設定を開き、オンラインストアのオリジンを Allowed Origins (CORS) に追加して 保存 をクリックします。公開サイトのホスト名と、利用するプレビューまたはステージングのオリジンを含めます。複数のオリジンはカンマで区切ってください。設定手順を参照してください。
前提条件と制限#
カスタムコードまたはコード埋め込みを使用する権限、ステージング用ドメイン、Shop ID、Publishable Key、インポート済みカタログの SKU 一つが必要です。JavaScript の埋め込みには Webflow のプラン要件が適用されます。ブラウザーに Publishable Key は含められますが、Client Secret や AI API キーは含めないでください。
SDK は Webflow の EC データを自動で読み取りません。テンプレートで SKU を公開するか、利用側のアダプターで信頼できる CMS フィールドから取得する必要があります。
SDK の最小構成#
<script
src="https://sdk.ideal.house/sdk.js"
data-shop-id="<SHOP_ID>"
data-publishable-key="<PUBLISHABLE_KEY>"
async
></script>
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
data-product-code は、インポート先の ideal.house の sku と完全に一致する必要があります。
ローダーの設置#
サイト設定 → カスタムコード を開き、フッターまたは body の末尾に SDK スクリプトタグを追加します。プレースホルダーを置き換え、保存して公開します。サイト全体に一度だけ設置し、CMS の各項目で繰り返し追加しないでください。
Webflow の Designer キャンバスではスクリプトが実行されない場合があります。プレビューまたは公開済みステージングの URL で検証し、実際のページソースを調べます。
項目単位のボタンの追加#
例えば Idealhouse SKU という名前のプレーンテキストの CMS フィールドを作成します。ideal.house の sku としてインポートした値と同じ値を設定します。商品または CMS コレクションのテンプレートで、ボタンを配置する場所にコード埋め込みを追加します。
<div
data-idealhouse-button-container
data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>
埋め込みエディターの Webflow の フィールドを追加 機能で、現在の項目の値を挿入します。上の角かっこ内の指示は、本番用マークアップにそのまま記載する文字列ではありません。公開後に DOM を調べ、次のような通常の文字列になっていることを確認します。
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
静的ページでは、SKU の実際の値を貼り付けます。インポート先の ideal.house の SKU と完全に同じ値である場合を除き、ページのスラッグや Webflow の項目 ID を使用しないでください。
バリエーションと動的な描画#
Webflow の標準 Designer バインディングでは、すべての EC レイアウトで任意のカスタムコードから最終的なバリエーションの SKU を取得できるとは限りません。見た目の選択肢ごとに異なる ideal.house アセットが必要な場合は、対応する Webflow 連携または自身のデータ層から選択中のバリエーションを受け取り、コンテナを置き換えるアダプターを実装します。
function showIdealhouseVariant(host, sku) {
host.replaceChildren();
const code = typeof sku === 'string' ? sku.trim() : '';
if (!code) return;
const node = document.createElement('div');
node.dataset.idealhouseButtonContainer = '';
node.dataset.productCode = code;
host.append(node);
}
これは利用側のコードです。実際に使用するバリエーションツールの公開されたコールバックから呼び出してください。表示されている選択肢のテキストを取得したり、非公式の Webflow イベントを仮定したりしないでください。
Webflow のインタラクション、CMS フィルター、外部のページ分割機能、SPA のような画面遷移では、コレクション項目が追加または置き換えられる場合があります。各項目のテンプレート内に埋め込みを配置するか、ツールの公開された描画コールバック後に橋渡し処理を呼び出します。処理済みの SDK マークアップを複製せず、必ず新しいコンテナを作成してください。
カタログデータのインポート#
Webflow の商品/CMS フィールドをエクスポートし、Idealhouse SKU を sku に対応付けます。商品アップロードからアップロードし、商品インポート、ジョブの状態、商品一覧、商品更新、商品削除、エラーと再試行に従います。
ブラウザー用 SDK は Webflow の自動同期を提供しません。CMS の API エクスポート、Webhook、自動化は利用側で管理します。
検証と削除#
ステージングに公開し、対応付け済みの項目、フィールドがない項目、不明な SKU、コレクション一覧、商品テンプレート、フィルターとページ分割、モーダル、モバイルのブレークポイント、同意管理、ブラウザーの戻る・進むをテストします。SDK が一度だけ読み込まれ、描画された各コードが現在の項目と一致し、HTML にサーバー用認証情報がないことを確認します。
削除するには、サイト全体の SDK カスタムコードと、各埋め込みまたはボタンのバインディングを削除して再公開し、プロキシ/CDN のキャッシュを消去します。公開サイトからスクリプトのリクエストと data-idealhouse-* 要素がなくなったことを確認します。