概要

このガイドでは、管理画面で取得した埋め込み用タグを、自社サイトのページへ貼り付ける手順を案内します。 サイトのページを編集できる担当者（表示の位置を決めたり、タグを貼り付けたりできる方）向けです。 サイト制作の担当が別にいらっしゃる場合は、その担当者に本ガイドを案内してください。 「サイト埋め込み」は、お客様の見ている自社サイトの画面上に、「予約ボタン」「予約フォーム」「予約カレンダー」を出す仕組みです。 貼り付けるコードは、CHILLNN の管理画面からコピーできます（埋め込み用タグと表示位置のタグの 2 つです）。 画面によっては、表示位置のタグの欄の見出しが別の表記になることがありますが、コピーする内容は本ガイドの「表示位置のタグ」と同じです。どちらも画面に出ているとおり、そのまま貼り付けるのがもっとも安全です。

• 埋め込み用タグ ページに貼ると、CHILLNN のサービスとサイトが結びつきます。どの施設の予約か、といった情報はここにくるので、コピーした内容をいじらないのが基本です。細かい内部の設定を自分で書き足す必要はありません。
• 表示位置のタグ 「ここにボタンを出す」「ここにフォームを出す」と決めるためのタグです。ボタンや空の枠など、表示したい場所に置きます。同じ種類を複数置けば、そのぶん並んで表示されます。 表示位置を指定した要素をどれもページに置いていないと、画面上には何も現れません。

管理画面で埋め込み用タグを取得する

外部接続設定 → サイト埋め込みの画面です。埋め込みタグの欄に、埋め込み用タグと表示位置のタグのコピー用テキストが並びます（各コピー欄の内容をそのまま使ってください）。 次の流れで、ページに貼る元になる内容をコピーします。

• CHILLNN の管理画面にログインする
• 左のメニューから 外部接続設定 → サイト埋め込み を開く
• 埋め込み形式で、載せたいものを選ぶ（予約ボタン／予約フォーム／予約カレンダー）
• オプション設定で表示言語を選ぶ（多くは 自動（推奨）のままで問題ありません。来訪者のブラウザの設定に合わせて切り替わります）
• 埋め込みタグの欄にある 埋め込み用タグ と 表示位置のタグ を、それぞれコピーする 予約ボタン形式を選んだ場合は、押すと予約フォームが開く動きになります。見た目はボタンに限らず、リンクなど好みのスタイルにもできます（画面に出ている説明どおりです）。 管理画面のプレビューでは、カード入力など決済まわりは確かめることはできません。予約の挙動は、実際に埋め込んだ自社サイト側で確認してください。

サイトにタグを貼り付ける

埋め込みタグの主な属性表記

名前	必須	意味
`data-chillnn-site-id`	○	施設（サイト）を表す ID。管理画面の表示どおりにしてください
`data-chillnn-lang`	×	画面の言語。**省略すると、見ている人のブラウザの言葉設定にあわせて自動**になります。はっきり決めたいときだけ書きます

表示位置のタグの種別

ページ上では、次のような見え方になります。

• 予約ボタン形式では、クリックできるボタンやリンクの要素へ属性を付け、押すと予約へ進みます。
• 予約フォーム形式では、あらかじめ空の枠用に置いた要素の内側に、フォームの内容がはめ込まれます。
• 予約カレンダー形式では、同様に空の枠へカレンダーが表示されます。 次のいずれか（または組み合わせ）を、出したい位置の要素に付けます。管理画面の「表示位置のタグ」のコピー内容に出てくる名前と同じです。値は空のままで問題ありません。

属性名	どんなときに使うか
`data-chillnn-reservation-button-trigger`	クリックで予約に進めたい**ボタン**や**リンク**などに付けます（管理画面の「予約ボタン」形式向け）
`data-chillnn-reservation-form`	ページの中に**フォームをそのまま出したい**とき（多くは空の `div` に付けます）
`data-chillnn-reservation-calendar`	ページの中に**カレンダーをそのまま出したい**とき（多くは空の `div` に付けます）

対応が可能なサイト制作ツール

利用しているHPサービスごとの対応可否・貼り付け方法・難易度・注意事項をまとめた一覧です。

サービス	対応	貼り付け方法	難易度	注意事項・補足	公式ドキュメント
[Studio](https://studio.design/)	○	外部アプリ連携 App より CHILLNN を選択して サイト ID を入力	★	カスタムコード（head/body）は**有料プランのみ**。Embedボックスは全プラン対応だが iFrame 内展開のため公開後に動作確認必須。エディタ・プレビューでは動作しない	[Apps連携：CHILLNNを連携する](https://help.studio.design/ja/articles/15420623-apps%E9%80%A3%E6%90%BA-chillnn%E3%82%92%E9%80%A3%E6%90%BA%E3%81%99%E3%82%8B)
WordPress	○	カスタムHTMLブロック、またはテーマの `functions.php` / `header.php` に追記	★★	ブロックエディタならコード不要で貼り付け可。テーマ編集は子テーマ推奨	[公式](https://ja.wordpress.org/support/article/pages/)
HTML（自前サーバー）	○	HTMLファイルを直接編集して埋め込み用タグと表示位置タグを任意の場所に記述	★★	最も自由度が高く制約な。表示位置タグは script タグより**前**に記述すること	—
Canva	✗	ー	ー	Canvaのサイト作成機能（Canva Websites）はノーコード専用のビルダーであり、外部タグをページに追加する手段が提供されていないため、CHILLNNの埋め込みタグは使用不可	—

動作確認のチェックリスト

• [ ] サイト ID（data-chillnn-site-id）が、いま公開している施設のものと一致している
• [ ] 載せたい種類（予約ボタン／フォーム／カレンダー）について、対応する data-chillnn-reservation-*** 属性** が少なくとも 1 つ、適切な要素に付いている
• [ ] その要素は、埋め込み用の script タグより前にページへ書かれており、ページを開いた時点ですでに存在している（JavaScript であとから差し込むだけだと認識されない可能性があります）
• [ ] 同じ読み込みを、気づかずに 2 回書いていない
• [ ] ブラウザの開発者向けの画面（コンソール）にエラーが出ていないか見る

サポートに連絡するときに伝えるとスムーズなこと

• 問題が出ているページの URL
• 使いたかったもの（ボタン／フォーム／カレンダー）
• お使いのブラウザの名前とバージョン
• いつ頃から／いつ気づいたか

CHILLNN サポートでお手伝いできることの範囲

• このガイドに沿った通常の貼り付け方に関するご案内
• 表示されない・おかしいときの切り分けのヒント カスタマイズや、お客様サイト独自のプログラムの作成・修正の代行は行なっておりません。制作会社やエンジニアの方にご相談ください。