Webflow Tutorial

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 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. Sign up or log into your CozyCal account.

2. Go to Settings & Team → Website Setup → Install CozyCal



3. Click on I will install it myself → Javascript → Copy Code



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



5. Click on Custom Code



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



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

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


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.

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


3. Use your own button
If you prefer to use custom button on your Webflow website, you can do that easily. 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.

1. Go to Settings & Team → Website Setup → Edit Floating Button

2. Uncheck Show floating button on my website



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



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


Now, your booking page will pop up as a modal.



If you need help, let us know.
Send us a message through the pink chat bubble in the lower right corner of the page. We'll get back to you as soon as possible. 😃