CozyCal Knowledge Base
CozyCal Knowledge Base
Install CozyCal on Webflow

Install CozyCal on Webflow

Webflow is a powerful web-based drag and drop tool for building responsive websites. We use Webflow to build CozyCal's website and love it! 

In this tutorial, you will learn how to install, edit CozyCal's floating booking button, and use your own button on your Webflow website.

1. Install CozyCal on Webflow

‍It's easy to install CozyCal on your Webflow website. All you need is a short piece of code. You can follow the steps below to get started:

  1. Log into your CozyCal account.
  2. Click on "Settings & Team".
  3. Go to "Website Setup".
  4. Click on "Install CozyCal".
  5. Click on " I will install it myself".
  6. Click on "Javascript".
  7. Click on "Copy Code".
image

8. Log into your Webflow dashboard, then on the left hand side navigation bar, click on "Settings".

image

9. Then click on "Custom Code"

image

10. Scroll down and paste your code in the Footer Code, then click on Save Changes.

Note: The code shown in the image below is only an example code. Please make sure you are pasting your own unique code.

image

11. Go back your CozyCal's installation page, and click on "Next: Verify Install", then "Verify Install" to make sure that the installation is verified.

image

Voila. CozyCal's booking button should now be showing on your site! 🙌

image

2. Edit CozyCal's floating button

You can customize the color, text and position of the CozyCal button on your website. 

Simply go to Settings & Team → Website Setup → Edit Floating Button, and edit the setting based on your preference. ‍

image

3. Use your own button

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

🛎 Note: To enable the booking page modal opening up directly on your website, you have to first install the CozyCal plugin.

Once the plugin is installed, you can disable the default floating button.

  1. Click on "Settings"
  2. Go to "Website Setup"
  3. Click on "Edit Floating CozyCal" button
  4. Uncheck "Show floating button on my website"
image

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

image

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

image

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

image

4. 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.

If you have any questions, feel free to reach out to us at support@cozycal.com