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, and add in-frame embed 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→ 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.
Voila, now CozyCal's button should now be showing on your site! 🙌
4. Add 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.
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 Webflow, and choose the location where you want to add custom HTML. Click on Add Elements, then select Embed.
5. Paste the HTML code you copied from CozyCal and publish the change.
6. Now you will see that your CozyCal booking page is showing up as an in-frame embed on your Webflow website.
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. 😃