Studio Help

Apps連携：CHILLNNを連携する

CHILLNNとStudioを連携し、予約ボタンやフォームをStudioサイト上に設置する方法を紹介します。連携すると、CHILLNNの予約導線の表示から予約完了までをStudioサイト上で一元的に行えます。

今週アップデートされました

対象プラン：有料プラン

Point：利用料金について
連携による追加料金は発生しません。CHILLNN・Studioそれぞれの利用料金は次のとおりです。

CHILLNN：サービス利用料と決済手数料（通常通り）
Studio：契約した有料プランのプロジェクト利用料

注意：

この記事には外部サービスの手順も含まれます。外部サービスの仕様や動作、記事内に記載のない手順については、チャット窓口でのサポート対象外となる場合があります。
外部サービスの画面や仕様は2026年6月時点の情報です。記事の内容と異なる場合は、CHILLNNの案内をご確認ください。

CHILLNNの予約フォームをStudioサイトに設置する手順

1. CHILLNNのIDを取得する

CHILLNNにログインし、管理画面を開きます。
[外部接続設定]内の[サイト埋め込み]のメニューを開きます。
[埋め込みタグ]のうち、該当施設を示すIDをコピーします。

2. StudioとCHILLNNを連携する

Studioにログインします。
CHILLNNと連携するプロジェクトの[ホーム]ダッシュボードを開きます。
画面左から[Apps]を開きます。
[CHILLNN]のカードで、右端の[＋]をクリックします。
表示される入力用モーダルに、CHILLNNで取得したIDを貼り付けて[保存]します。

Apps画面の[未連携]にあるCHILLNNのカードで、右端の[＋]が強調されている画面

3. Studioサイトにパーツを配置する

Studioのデザインエディタを開きます。
画面左の[追加]パネルを開きます。
[基本]タブを開きます。
CHILLNNのパーツを追加します。予約ボタン、予約フォーム、予約カレンダーから、用途に応じたパーツをクリックすると、スクリーンに配置されます。

予約ボタン

クリックすると予約フォームのモーダルが開くボタンです。フォーム本体を常時表示せずに設置できるため、サイトのデザインをスッキリと見せることができます。
色、テキスト、角丸、サイズなどのデザインを変更できます。

予約フォーム

予約情報をそのまま入力できるフォームです。予約ボタンのクリックを挟むことなく、スムーズな入力を促せます。
フォーム自体のデザインは変更できません。

予約カレンダー

空き状況を表示し、任意の日付から予約を受け付けられるカレンダーです。
カレンダーのデザインは変更できません。背景となるボックスのサイズを変更しても、カレンダー部分のサイズは変わりません。
PCなどの大きな画面での閲覧時は2ヶ月分、モバイルなど画面幅の小さいデバイス（830px以下）での閲覧時には1ヶ月分が表示されます(*)。レスポンシブ設定を施しても、この仕様は変えられません。

注意：デザインエディタ上での予約カレンダー表示(*)

モバイルなど画面幅の小さいデバイスでの公開サイト閲覧時、予約カレンダーは1か月分が表示されます。一方、編集中のデザインエディタ上では、小さいデバイスのブレイクポイントに切り替えても2か月分が表示されます。

そのため、エディタ上ではカレンダーの両端が見切れたり、ボックスからはみ出て見えることがあります。編集中に実際のサイトでの表示を確認するには、ライブプレビューをモバイル端末でご確認ください。

4. サイトを更新する

公開済みのサイトを編集していた場合は、サイトを更新します。更新するまで、変更内容は公開サイトに反映されません。

注意：ライブプレビューURL上での予約操作でも、CHILLNNでの予約は実行されます。

CHILLNN連携を解除する手順

Studioにログインします。
連携を解除したいプロジェクトの、[ホーム]ダッシュボードを開きます。
左メニューの[Apps]を選択します。
[連携済み]にある[CHILLNN]のカードで、右端の[…]をクリックし、[連携を解除]を選びます。
解除すると、Apps連携したデータベース上のレコードだけでなく、公開サイトのHTMLからも値が削除されます。

チルン ちるん ホテル 宿泊

関連記事