自分のサイトに予約ウィジェットを埋め込む

2026年9月22日更新連携

設定 → 連携では、予約ウィジェットを自分のサイトに埋め込んで、訪問者をこちらに送らずにそのまま予約を受け付けられます。

1. ドメインを許可する

許可するドメインに、ウィジェットを設置するサイトのオリジンを正確に入力します。スキームとホストだけを書き、パスと末尾のスラッシュは含めません:

https://apply.acme.com     ✓
https://acme.com:8443      ✓
acme.com                   ✗  スキームがない
https://acme.com/book      ✗  パスが付いている
https://acme.com/          ✗  末尾にスラッシュがある

https://www.acme.com と https://acme.com は別のオリジンです。訪問者がどちらでもアクセスできるなら、両方を登録してください。

この一覧はオンとオフの切り替えも兼ねています。空のあいだはウィジェットをどこにも埋め込めません。ドメインは50件まで追加でき、削除するとすぐに反映されます。

2. スニペットを貼り付ける

承認済みのサービスごとに専用のスニペットがあります。コピーして、ウィジェットを表示したい位置に貼り付けてください:

<div class="scheduling-embed" data-service="SERVICE_ID"></div>
<script src="https://embed.example.com/embed.js" async></script>

<div> が表示位置を示します。スクリプトタグはページのどこに置いても構わず、ウィジェットが複数あっても1回だけで足ります。埋め込める承認済みサービスがまだありませんと表示される場合、そのサービスはまだ審査中です。承認されるとスニペットが表示されます。

3. 言語を設定する

このページのウィジェットの言語が、訪問者に表示される言語を決めます。ページの言語に合わせるのままにしておくと、ウィジェットはページの <html> タグの lang 属性を読み取ります。検索エンジンやスクリーンリーダーが使うのと同じ属性なので、すでに多言語化されたサイトなら追加の設定は要りません:

<!doctype html>
<html lang="es">      <!-- ウィジェットはスペイン語で表示されます -->
  <head>…</head>
  <body>…</body>
</html>

地域付きのタグも使えます。lang="pt-BR" は拒否されず、対応している言語のうち最も近いものに解決されます。

1つのウィジェットだけページと違う言語にしたい場合は、埋め込み用の div に data-locale を追加します。ページの言語よりも、このページの設定よりも優先されます:

<div class="scheduling-embed" data-service="SERVICE_ID" data-locale="de"></div>

サイトに独自の言語切り替えがある場合は、ウィジェットにも追従させてください。その場で言語だけが入れ替わるので、訪問者がすでに入力した内容は保持されます:

window.SchedulerEmbed.setLocale("sr");

まとめると、先に設定されているものが優先されます: data-locale、ページの <html lang>、ウィジェットの言語、訪問者のブラウザ、そして英語の順です。

その他のオプション

埋め込み用の div に次を追加できます:

data-mode="popup"：ウィジェットをその場に置く代わりに、ボタンを押すとオーバーレイで開くようにします。

data-label="今すぐ予約"：ポップアップ表示のときのボタンの文言です。

data-min-height="480"：ウィジェットが実際の高さを伝えるまでに使う高さ(ピクセル)です。読み込み時に表示が飛ぶようなら大きくしてください。

サイトがコンテンツを動的に追加したり、コンバージョンを計測したりする場合は、次の2つも使えます:

// ウィジェット用の div を追加したあとにページを読み直します
window.SchedulerEmbed.refresh();

// 訪問者が予約を完了したときに実行されます
window.SchedulerEmbed.onBooking(function (e) {
  console.log(e.bookingId, e.serviceId);
});

ウィジェットが表示されないとき

ページのオリジンが許可リストにないか、完全に一致していません。https ではなく http になっている、www が抜けている、それだけで表示されなくなります。

スニペットがスクリプトを実行できない場所に入っています。サイトビルダーのプレーンテキスト欄や、HTMLが制限されたブロックがこれにあたります。

data-service の値が変わっています。IDを打ち直さず、スニペットをそのまま貼り付けてください。

サービスが非公開になったか、承認済みではなくなっています。