このドキュメントは、複数施設の予約フォームを埋め込みたい方向けになります。1 施設の埋め込みのみを行いたい場合はこちらのドキュメントをご確認ください。

概要

系列施設をまとめた紹介ページなど、同じページに複数の施設の予約ボタンやカレンダーを載せたい場合の書き方を紹介します。 埋め込み用タグ（script）は施設の数だけ増やすのではなく、1 ページに 1 本のままにします。 そのうえで、施設ごとのまとまり（ブロック）に data-chillnn-site-id を付けると、その中に置いた表示位置のタグはすべてその施設のものとして動きます。

• 埋め込み用タグ（script）… 1 ページに 1 本だけ。ここに書いたサイト ID は、施設の指定がない場所で使われる「デフォルト」になります
• 施設ごとのブロック（section や div など）… data-chillnn-site-id に各施設のサイト ID を書きます。中に置いたボタン・フォーム・カレンダーは、その施設の予約になります 各施設のサイトID は、施設管理画面のURL（添付画像）、または外部接続設定 ＞ サイト埋め込みより確認できます。

予約ボタンを複数施設ぶん載せる

<script
  src="https://cdn.chillnn.com/site-embed/latest/iife.js"
  data-chillnn-site-id="施設AのサイトID"
></script>

<section data-chillnn-site-id="施設AのサイトID">
  <button type="button" data-chillnn-reservation-button-trigger>施設Aを予約</button>
</section>

<section data-chillnn-site-id="施設BのサイトID">
  <button type="button" data-chillnn-reservation-button-trigger>施設Bを予約</button>
</section>

予約フォームを複数施設ぶん載せる

<script
  src="https://cdn.chillnn.com/site-embed/latest/iife.js"
  data-chillnn-site-id="施設AのサイトID"
></script>

<section data-chillnn-site-id="施設AのサイトID">
  <div data-chillnn-reservation-form></div>
</section>

<section data-chillnn-site-id="施設BのサイトID">
  <div data-chillnn-reservation-form></div>
</section>

予約カレンダーを複数施設ぶん載せる

<script
  src="https://cdn.chillnn.com/site-embed/latest/iife.js"
  data-chillnn-site-id="施設AのサイトID"
></script>

<section data-chillnn-site-id="施設AのサイトID">
  <div data-chillnn-reservation-calendar></div>
</section>

<section data-chillnn-site-id="施設BのサイトID">
  <div data-chillnn-reservation-calendar></div>
</section>

また、同じブロックの中に、ボタン・フォーム・カレンダーを組み合わせて置くこともできます。

注意事項

• 2026/09/10 現在、Studioでは未対応
• 埋め込み用タグ（script）を施設の数だけ並べないでください。 同じ要素に二重に表示されるなど、正しく動かなくなります
• どの施設のブロックにも入っていない表示位置のタグは、埋め込み用タグに書いたデフォルトの施設として動きます。
  • 意図しない施設の予約が開いてしまうため、複数施設を載せるページでは、表示位置のタグを必ず施設ごとのブロックの中に置いてください。
• 貼り付け後は、それぞれのボタン・カレンダーが正しい施設につながっているかを実際のページで確認してください

関連マニュアル

予約フォームやカレンダーを自社サイトに埋め込みたい(サイト埋め込み機能)