埋め込み

埋め込みを使うと、SupDesk のフォームを自分のウェブサイトに直接設置できます。訪問者はサイトを離れることなく、ウェイトリストに登録したり、メッセージを送ったり、ベータに申し込んだりできます。

フォームではなくチャットの吹き出しをお探しですか。ライブチャットには専用のローダー（chat.js）と専用のスニペットがあります。ライブチャットをご覧ください。

埋め込めるフォームは 3 つです。

フォーム	機能	必要な条件
`waitlist`	ウェイトリストの登録を集める	ウェイトリストが有効
`contact`	プロジェクトの受信トレイに会話を作成する	プライベートメッセージ Pro
`beta`	1 つのベータプログラムへの公開申し込み	ベータが有効、プログラムがアクティブかつ公開申し込みが有効

埋め込みを追加する

各フォームのスニペットはコンソールで生成されます。コピーして、自分のページのフォームを表示したい位置に貼り付けてください。

ウェイトリスト — プロジェクトのウェイトリストセクション、設定カードの下
お問い合わせ — プロジェクトの設定ページ、お問い合わせフォームの埋め込み
ベータ — ベータプログラムのページ、埋め込み

スニペットは次のような形です。


<script src="https://acme.supdesk.app/embed.js"
        data-supdesk="contact"
        data-title="Acme へのお問い合わせ" data-height="520" async></script>
<noscript>
  <iframe src="https://acme.supdesk.app/embed/contact" width="100%" height="520"
          style="border:0" title="Acme へのお問い合わせ"></iframe>
</noscript>

スクリプトはタグのある位置にフォームを挿入し、フォームの高さが変わるとサイズを調整します。たとえば入力エラーが表示されたときや、送信後に短い確認表示へ切り替わったときです。<noscript> ブロックは通常の iframe なので、JavaScript を無効にしている訪問者でもフォームを利用できます。

すべてはあなた自身のポータルドメインから配信されます。カスタムドメインを設定していればコンソールはそのドメインのスニペットを生成し、設定していなければ *.supdesk.app のサブドメインが使われます。

カスタムドメインとルートドメイン

カスタムドメインとスニペットが指すオリジンは、埋め込みのフレームがローダーと通信するために 同じルートドメインを共有する必要があります。コンソールは常にアクティブなポータルのオリジンでスニペットを生成するため、カスタムドメインの設定後にコピーしたスニペットは考慮不要です。スクリプトもフォームもカスタムドメインから配信され、同一オリジンになります。

注意が必要なのはカスタムドメインを追加する前にコピーしたスニペットです。以前のオリジンへのリクエストはカスタムドメインにリダイレクトされますが、ローダーは両者がルートドメインを共有する場合にのみそのリダイレクトを受け入れます。たとえばポータルのサブドメイン feedback.apibot.dev とカスタムドメイン www.apibot.dev はどちらも apibot.dev 上にあります。カスタムドメインがまったく別のルート上にある場合、リダイレクトはドメインをまたぐため埋め込みは機能しません。カスタムドメインが有効になったら、コンソールからスニペットをコピーし直してください。

属性

属性	必須	説明
`data-supdesk`	はい	埋め込むフォーム: `waitlist`、`contact`、`beta`
`data-program`	ベータのみ	ベータプログラムのスラッグ
`data-title`	いいえ	フレームのアクセシブルなタイトル。既定値は `SupDesk form`
`data-height`	いいえ	最初のサイズ調整前の初期の高さ(ピクセル)。既定値は `360`
`data-ref`	いいえ	登録を紐づけるウェイトリストの紹介コード

1 つのページに複数の埋め込みを置けます。それぞれに専用の <script> タグを付けてください。

Content Security Policy

自分のサイトが Content-Security-Policy ヘッダーを送信している場合、2 つのディレクティブでポータルのオリジンを許可してください。許可しないとブラウザーが埋め込みをブロックします。


script-src https://acme.supdesk.app;
frame-src  https://acme.supdesk.app;

スニペットがカスタムドメインを使っている場合は、ここでもそのドメインを指定してください。ほかに許可すべきものはありません。埋め込みはあなたのページにサードパーティのスクリプトを読み込まず、独自のネットワークリクエストも行いません。

スパム対策

埋め込みフォームはポータルと同じ保護を利用します。訪問者ごと・プロジェクトごとにレート制限がかかり、プロジェクトに Turnstile を設定していれば、チャレンジは埋め込みの中にも表示されます。

Turnstile のキーはあなた自身のドメインに登録されており、埋め込みも同じドメインから配信されるため、追加の設定なしでキーが機能します。

プライバシーとサインイン

埋め込みフォームがポータルのサインインセッションを読み書きすることはありません。ブラウザーは仕様上、他人のページ内のフレームにそれらの Cookie を送信しないからです。そのため、どの埋め込みもメール優先で動作します。訪問者がメールアドレスを送信すると、リンクがメールで届きます。

埋め込みを設置する際に知っておくべき点が 1 つあります。訪問者はあなたのページの中ではなく、通常のブラウザータブで手続きを完了します。

ウェイトリスト — 登録はすぐに記録されます。メールには順位と個人用の紹介リンクが含まれます
ベータ — メールには登録を完了する承認リンクが含まれます
お問い合わせ — メッセージはすぐに受信トレイに届きます。メールは受領確認であり、あなたの返信を確認するためにも使えます

埋め込み経由で作成されたウェイトリストのエントリーはソースが embed として記録されるため、エントリー一覧や CSV エクスポートでポータル経由の登録と区別できます。

訪問者に表示される内容

埋め込みはフォームそのものだけを表示します。ポータルのヘッダー、フッター、ナビゲーションは含まれません。プロジェクトのブランドカラーを引き継ぐため、スタイル調整をしなくてもアクセントカラーがそのまま反映されます。

埋め込みページは検索エンジンにインデックスされません。インデックス対象となる正規のページは、公開ポータルのページです。

旧来のウェイトリストスニペット

スクリプトローダーが登場する前、ウェイトリストの埋め込みは /waitlist/embed を指すだけの iframe でした。


<iframe src="https://acme.supdesk.app/waitlist/embed" width="100%" height="360"
        style="border:0" title="ウェイトリスト"></iframe>

これは引き続き動作します — 変更の必要はありません。現在のスニペットに置き換えると高さが自動調整されます。旧 iframe の唯一の実質的な難点は height が固定であることです。