自分のサイトに予約ウィジェットを埋め込む
設定 → 連携では、予約ウィジェットを自分のサイトに埋め込んで、訪問者をこちらに送らずにそのまま予約を受け付けられます。
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);
});AI アシスタント
予約ウィジェットは、提案段階のウェブ標準であるWebMCPを通じて、AI アシスタント向けのツールも提供しています。訪問者のブラウザで手助けをするアシスタントは、このツールで提供内容と料金を確認し、空いている時間を探し、訪問者に見える形で時間を選択できます。予約まで行うこともできますが、予約は訪問者の同意が必要な操作として指定されているため、アシスタントは先に訪問者に確認します。ログイン、アカウントの作成、支払いは常に訪問者自身が行います。
設定は不要です。スニペットがすでにこれを許可しています。スニペットを使わず独自の <iframe> タグでウィジェットを設置している場合のみ、そのタグに allow="payment; tools" を追加してください。
アシスタント側の対応はまだ始まったばかりです。ChatGPTのデスクトップアプリは内蔵ブラウザでこれらのツールをすでに使っており、当サイトにあるご自身の掲載のページと、予約リンクを共有で得られるリンクで動作します。他のサイトに埋め込まれたウィジェット内のツールにはまだ対応していません。ウィジェット側は、対応したアシスタントをいつでも受け入れられる状態です。いずれの場合も、訪問者はいつでも自分で予約できます。
ウィジェットが表示されないとき
ページのアドレスが許可リストにないか、完全に一致していません。https ではなく http になっている、www が抜けている、それだけで表示されなくなります。
スニペットがスクリプトを実行できない場所に入っています。サイトビルダーのプレーンテキスト欄や、HTMLが制限されたブロックがこれにあたります。
data-service の値が変わっています。IDを打ち直さず、スニペットをそのまま貼り付けてください。
掲載が非公開になったか、承認済みではなくなっています。