Install CozyCal on your website

Step 1: Add CozyCal's code to your website

  1. Once you have created your CozyCal account, log in and go to Settings > Website setup > Install CozyCal

2. Then you can either select I'll install it myself or Send instructions to my teammatesdepending on your preference.

Install it yourself

1. If you want to install the button yourself, simply click on I'll install it myself> Javascript > Copy code

2. Paste the code to your website's custom code. The code can be either added to your header or footer code.


Install it with help

  1. If you need help with installing the code on your website, you can click on Send instructions to my teammate> enter your teammate's email >click on Send Email.
  2. Your teammate will receive an email with the code that can be installed on your website.

Step 2: Customize your CozyCal button

Once you have added the code on your website, you can easily add buttons that integrate with your website.

These buttons will open your CozyCal booking page in a pop-up modal. This means that your guests won't need to leave your site when they schedule an appointment.

There are two types of scheduling buttons you can add:

1. The Floating Button

The floating button hovers at the bottom of your website. It is a quick and easy way to direct your website visitors to schedule an appointment.


To edit your floating scheduling button:

  1. Go to Settings > Website Setup > Edit Floating Button
  2. Here you can change the button's settings such as button color, text, position and targeting page.

2. Custom Buttons

Adding a custom button is easy! CozyCal detects booking page links on your website and automatically opens them in a modal.

Note: To enable your booking page opening up directly as a modal on your website, you have to first install the CozyCal plugin (refer to step 1 above), then disable the button.

Once the plugin is installed on your website, then you will need to disable the default floating button.

  1. Go to Settings > Website Setup > Edit Floating Button
  2. Uncheck Show floating button on my website
  3. Don't forget to Save Changes

4. On your Booking Page, click on the Share button, and Copy Link.


5. Add your booking page's URL (e.g. https://cozycal.com/kat) to any custom buttons, image or text on your website.

Then your CozyCal booking page will pop up as a modal. You can also link to a specific event type to open your services directly in a modal.


3. In-frame embed

You can add in-frame embedding option to your website and have guests schedule events right on your website, making the scheduling flow more seamless.

The in-frame embed also features seamless height adjustment, so you won’t be seeing those annoying nested scroll bars.

To add your booking page as an in-frame on your website:

  1. Go to your booking page.
  2. Click on Share, then Add to website
  3. Under In-frame embed, click on Copy code
  4. Go to your website provider, and choose the location where you want to add custom HTML. Paste your CozyCal embed code.
  5. Publish the change and you’ll see that your CozyCal booking page showing up as an in-frame embed on your website.

In this tutorial video example, I’m pasting the code to our website’s homepage hosted on Webflow. Similarly, you should also be able to add custom HTML code on your website. If you are unfamiliar with adding HTML code, reach out to your webmaster or IT team to get it done.

Other resources:

Install CozyCal on Webflow
Install CozyCal on Webflow
WordPress plugin installation
WordPress plugin installation