Available plans: Mini and above (Legacy plans: Starter and above)
Point: About pricing
There are no additional fees for using this integration. The pricing for CHILLNN and Studio.Design is as follows:
CHILLNN: Service usage fees and payment processing fees (standard rates apply)
Studio.Design: Project usage fees based on your paid plan
Note:
This article includes steps that involve a third-party service. Specifications, behavior, and steps not described in this article may fall outside the scope of our chat support.
Screens and specifications for the third-party service reflect information as of June 2026. If anything differs from what's described here, please check CHILLNN's official guidance.
How to add a CHILLNN booking form to your Studio.Design site
1. Get your CHILLNN ID
Log in to CHILLNN and open the admin dashboard.
Under [External Connection Settings], open the [Site Embed] menu.
From the [Embed Tag] section, copy the ID for the property you want to use.
2. Connect Studio.Design and CHILLNN
Log in to Studio.Design.
Open the [Home] dashboard for the project you want to connect with CHILLNN.
From the left side of the screen, open [Apps].
Click [CHILLNN].
In the modal that appears, paste the ID you copied from CHILLNN and click [Save].
3. Add CHILLNN parts to your Studio.Design site
Open the Studio.Design Design Editor.
Open the [Add] panel on the left side of the screen.
Open the [Basic] tab.
Add a CHILLNN part. Choose from the booking button, booking form, or booking calendar—clicking one places it on your screen.
Booking button
A button that opens the booking form in a modal when clicked. Since the form itself isn't always visible, this keeps your site's design clean and uncluttered.
You can customize the color, text, corner radius, size, and other design properties.
Booking form
A form where visitors can enter their booking details directly. Without needing to click a separate button, users can move through the booking process smoothly.
The form's design itself can't be customized.
Booking calendar
A calendar that shows availability and lets visitors book from any open date.
The calendar's design can't be customized. Resizing the surrounding box won't change the calendar's size.
On larger screens like desktops, two months are shown. On smaller screens like mobile devices (830px or less), one month is shown (*). Even if you apply responsive settings, this behavior can't be changed.
Note: How the booking calendar appears in the Design Editor (*)
On the published site, the booking calendar shows one month when viewed on smaller screens like mobile devices. However, in the Design Editor, two months are shown even when you switch to a smaller device breakpoint.
Because of this, the calendar may appear cut off at the edges or extend past its container in the editor. To see how it will actually look on your live site, check the Live Preview on a mobile device.
4. Publish your changes
If you're editing a site that's already published, you'll need to update the site. Your changes won't appear on the live site until you do.
Note: Bookings made through the Live Preview URL are also processed as real bookings in CHILLNN.
Steps to disconnect an app integration
Open the Studio project you want to use with the integration.
Go to [Home] on the dashboard.
Select [Apps] from the left menu.
Hover over the app you want to disconnect, then click [Disconnect] from the menu that appears in the top right.
When you disconnect, the values will be removed not only from the records in the database connected via the app integration, but also from the HTML of the published site.
chillnn chiln hotel lodging