対象プラン： Miniプラン以上（旧プラン：Starterプラン以上）
Point：利用料金について
CHILLNN側：通常の予約受付時と同様に、サービス利用料と決済手数料がかかります。Studio連携による追加料金はかかりません。
Studio側：有料プランのプロジェクト利用料のみで利用できます。決済発生による追加料金はかかりません。
注意：
この記事には外部サービスの手順も含まれます。外部サービスの仕様や動作、記事内に記載のない手順については、チャット窓口でのサポート対象外となる場合があります。
外部サービスの画面や仕様は2026年6月時点の情報です。記事の内容と異なる場合は、CHILLNNの案内をご確認ください。
CHILLNNの予約フォームをStudioサイトに設置する手順
1. CHILLNNのIDを取得する
CHILLNNにログインし、管理画面を開きます。
[外部接続設定]内の[サイト埋め込み]のメニューを開きます。
[埋め込みタグ]のうち、該当施設を示すIDをコピーします。
2. StudioとCHILLNNを連携する
Studioにログインします。
CHILLNNと連携するプロジェクトの[ホーム]ダッシュボードを開きます。
画面左から[Apps]を開きます。
[CHILLNN]をクリックします。
表示される入力用モーダルに、CHILLNNで取得したIDを貼り付けて[保存]します。
3. Studioサイトにパーツを配置する
Studioのデザインエディタを開きます。
画面左の[追加]パネルを開きます。
[基本]タブを開きます。
CHILLNNのパーツを追加します。予約ボタン、予約フォーム、予約カレンダーから、用途に応じたパーツをクリックすると、スクリーンに配置されます。
予約ボタン
クリックすると予約フォームのモーダルが開くボタンです。フォーム本体を常時表示せずに設置できるため、サイトのデザインをスッキリと見せることができます。
予約フォーム
予約情報をそのまま入力できるフォームです。予約ボタンのクリックを挟むことなく、スムーズな入力を促せます。
フォーム自体のデザインは変更できません。
予約カレンダー
空き状況を表示し、任意の日付から予約を受け付けられるカレンダーです。
カレンダーのデザインは変更できません。背景となるボックスのサイズを変更しても、カレンダー部分のサイズは変わりません。
PCなどの大きな画面での閲覧時は2ヶ月分、モバイルなど画面幅の小さいデバイス（830px以下）での閲覧時には1ヶ月分が表示されます(*)。レスポンシブ設定を施しても、この仕様は変えられません。
注意：デザインエディタ上での予約カレンダー表示(*)
モバイルなど画面幅の小さいデバイスでの公開サイト閲覧時、予約カレンダーは1か月分が表示されます。一方、編集中のデザインエディタ上では、小さいデバイスのブレイクポイントに切り替えても2か月分が表示されます。
そのため、エディタ上ではカレンダーの両端が見切れたり、ボックスからはみ出て見えることがあります。編集中に実際のサイトでの表示を確認するには、ライブプレビューをモバイル端末でご確認ください。
4. サイトを更新する
公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は公開サイトに反映されません。
注意：ライブプレビューURL上での予約操作でも、CHILLNNでの予約は実行されます。
チルン ちるん ホテル 宿泊