Appearance
概要
このガイドでは、管理画面で取得した埋め込み用タグを、自社サイトのページへ貼り付ける手順を案内します。
サイトのページを編集できる担当者（表示の位置を決めたり、タグを貼り付けたりできる方）向けです。 サイト制作の担当が別にいらっしゃる場合は、その担当者に本ガイドを案内してください。
「サイト埋め込み」は、お客様の見ている自社サイトの画面上に、「予約ボタン」「予約フォーム」「予約カレンダー」を出す仕組みです。 貼り付けるコードは、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 に付けます） |
動作確認のチェックリスト
- [ ] サイト ID（
data-chillnn-site-id）が、いま公開している施設のものと一致している - [ ] 載せたい種類（予約ボタン／フォーム／カレンダー）について、対応する
data-chillnn-reservation-*属性 が少なくとも 1 つ、適切な要素に付いている - [ ] その要素は、埋め込み用の
scriptタグより前にページへ書かれており、ページを開いた時点ですでに存在している（JavaScript であとから差し込むだけだと認識されない可能性があります） - [ ] 同じ読み込みを、気づかずに 2 回書いていない
- [ ] ブラウザの開発者向けの画面（コンソール）にエラーが出ていないか見る
サポートに連絡するときに伝えるとスムーズなこと
- 問題が出ているページの URL
- 使いたかったもの（ボタン／フォーム／カレンダー）
- お使いのブラウザの名前とバージョン
- いつ頃から／いつ気づいたか
CHILLNN サポートでお手伝いできることの範囲
- このガイドに沿った通常の貼り付け方に関するご案内
- 表示されない・おかしいときの切り分けのヒントカスタマイズや、お客様サイト独自のプログラムの作成・修正の代行は行なっておりません。制作会社やエンジニアの方にご相談ください。