埋め込み&iframe
iframeを使用してインタラクティブな3Dガウシアンスプラットビューアを任意のWebサイトに埋め込む
埋め込み&iframe
Splat Labsプロジェクトを任意のWebサイトに直接埋め込んで、訪問者がページから離れることなく3Dシーンを探索できるようにします。アプリ、プラグイン、アカウント不要です。
概要
すべてのSplat Labsプロジェクトには標準HTMLの<iframe>タグを使用してWebサイトに埋め込める共有ビューアURLが付与されます。埋め込みビューアは完全にインタラクティブです。
対応プラットフォーム:
- カスタムWebサイトとランディングページ
- CMSプラットフォーム(WordPress、Squarespace、Webflow、Wix、Shopify)
- 不動産物件サイト(Zillow、MLS、Realtor.com)
- ドキュメントツール(Notion、Confluence)
- React / Next.jsアプリケーション
共有埋め込みは全プランで無料でご利用いただけます(Splat Labsウォーターマーク付き)。BusinessおよびEnterpriseプランでは、ブランディングを削減またはホワイトラベル化できます。
埋め込みコードの取得方法
ステップ1: 共有ダイアログを開く
- Splat Labs Cloudでプロジェクトを開く
- ビューアで左サイドバードロワーを確認
- サイドバー下部の**「Share」**ボタンをクリック
- 共有ダイアログが開きます
ステップ2: 埋め込みURLまたはコードを取得する
共有ダイアログで:
- **「Link sharing enabled」**にチェックが入っていることを確認
- **「EMBED」**ボタンをクリックして埋め込みセクションを展開
次の2つのフィールドが表示されます:
- Embed URL — 直接使用するか、Zillow、Notion、MLS等のプラットフォームに貼り付けるビューアURL
- Embed Code — コピー&ペーストできる完成済みのHTML iframeスニペット
Embed Codeフィールドには完全なiframeスニペットが含まれています。Webサイトの HTMLに貼り付けるだけです。手動でのコーディングは不要です。
ステップ3: Webサイトに貼り付ける
iframeコードをWebサイトのHTMLのビューアを表示したい場所に貼り付けるだけです。
width="100%"を設定すると、ビューアがあらゆる画面サイズのコンテナに合わせて広がります。レイアウトに合わせてheightを調整してください。500〜700ピクセルがほとんどのデザインに適しています。
カスタマイズオプション
レスポンシブ埋め込み(16:9アスペクト比)
トラブルシューティング
埋め込みが空白になる
最も一般的な原因は混合コンテンツのブロックです。Splat Labs CloudはHTTPSを使用しているため、Webサイトも同様にHTTPSを使用していることを確認してください。
埋め込みがContent Security Policyによってブロックされる
frame-srcディレクティブにhttps://cloud.rockrobotic.comを追加してください:
ブランディング&プラン
| プラン | 埋め込みブランディング |
|---|---|
| Free | Splat Labsウォーターマーク |
| Starter | Splat Labsウォーターマーク |
| Business | 削減されたブランディング |
| Enterprise | ホワイトラベル(お客様のロゴ) |
詳細は料金ページをご覧ください。
次のステップ
- プロジェクトの共有 — 共有リンクとプライバシー設定
- ポータル — 複数のシーンをウォークスルーに接続
- ブログの埋め込みチュートリアル(英語)でさらに詳しく