CozyCal

CozyCal embeds appointment scheduling, intake forms, and Stripe payments directly into your pages. Visitors pick a time, fill out a form, and pay without ever leaving your domain. The widget renders inline or as a modal overlay, matching the on-site experience you control in the Designer.

That makes it a fit for freelancers, B2B demo flows, fitness studios, healthcare practitioners, and agencies running multi-host scheduling. It's useful for anyone who'd rather convert visitors on-site than redirect them to an external booking page.

How to integrate CozyCal with Webflow

What is CozyCal? CozyCal is a web-based appointment scheduling tool that books team members and resources together. It offers one-on-one, group, and round-robin scheduling. Two-way calendar sync covers Google Calendar, Outlook, and iCal. Stripe integration handles payments, coupons, and multi-session package sales at the point of booking.

Teams pair CozyCal with Webflow when they want the entire booking flow to happen on their own site. A consulting firm might embed a "Schedule a Call" widget on a services page. A yoga studio might add an inline class calendar with Stripe checkout. In each case, the goal is the same: convert site visitors into confirmed appointments without redirecting them off-domain.

You can integrate CozyCal with Webflow in three ways:

• The CozyCal app handles widget installation inside the Designer without copy-pasting embed codes.
• Code Embed elements and site-level custom code let you place floating buttons, modal triggers, and inline booking calendars on specific pages or site-wide.
• Zapier confirms these CozyCal-to-Webflow pairings: Guest Created in CozyCal > Create Item in Webflow, and Guest Cancelled in CozyCal > Create Item in Webflow.

Most implementations combine two of these methods, depending on the complexity of the setup.

Install the CozyCal app

The CozyCal app in the Marketplace adds scheduling to your site without copy-pasting embed codes. It connects your CozyCal account directly inside the Designer, so you can configure and install booking widgets without switching between platforms. The app is officially approved and lives in the Scheduling category of the Apps directory. To use it, you need an active CozyCal account (start with a 10-day free trial) and a paid site plan.

To set up the integration:

1. Go to webflow.com/apps/detail/cozycal and click Log in to install.
2. Select the site where you want to add scheduling.
3. Open your site in the Designer. CozyCal appears in the Apps panel.
4. Connect your CozyCal account, copy your embed code, and install on specific pages or site-wide — all from the Apps panel.
5. Publish your site.

With the app, you can:

• Install booking widgets on individual pages or across the entire site from a single panel
• Track which pages have CozyCal widgets installed
• Copy embed code and configure widget settings without leaving the Designer

It works well for standard installations.

If you need more control over widget placement, display behavior, or event-specific embed URLs, the manual embed methods below give you additional options.

Add CozyCal booking widgets with embed code

CozyCal offers three embed formats you can add manually: a floating button, a custom button that opens a modal, and an inline (in-frame) calendar. All three keep visitors on your domain throughout the booking process. Reach for manual embedding when you want precise control over where and how the widget appears, or when you need different booking pages on different site sections.

Every embed method starts with the same prerequisite: installing CozyCal's JavaScript snippet in your site's footer code.

Install the CozyCal JavaScript site-wide

This script powers all three embed formats. You need it on every page where you want booking functionality.

To install the script:

1. In CozyCal, go to Settings & Team > Website Setup > Install CozyCal.
2. Click I will install it myself > Javascript > Copy Code.
3. In the Designer, go to Site settings > Custom code. Paste the copied code into the Footer Code field and click Save changes. (See Custom code in head and body tags for details on site-level script placement.)
4. Return to CozyCal and click Next: Verify Install > Verify Install to confirm the script is detected.

Publish your site before you run the verification step. Custom code only takes effect on the live published site, not in the canvas preview. Make sure you paste your own unique CozyCal account code, not the sample shown in tutorial screenshots.

Add a floating button

The floating button is a persistent CTA that hovers at the bottom of the page as visitors scroll. Clicking it opens the booking calendar as a popup. Once you install the site-wide JavaScript above, the floating button appears automatically on all pages.

To customize the floating button:

1. In CozyCal, go to Settings > Website Setup > Edit Floating Button.
2. Adjust the button color, image, text, and screen position.
3. Publish your site to see the changes.

You can restrict the floating button to specific pages using CozyCal's page display rules, documented in the floating button specific pages guide. If you'd rather use a custom-designed button, disable the default — uncheck Show floating button on my website in the floating button settings, then follow the modal method below.

Add a custom button that opens a modal

This method lets you assign a CozyCal booking URL to any element you design. When a visitor clicks it, the booking page opens as a modal overlay. The CozyCal JavaScript you installed site-wide automatically detects links pointing to CozyCal URLs and intercepts them.

To set up a custom modal trigger:

1. In CozyCal, go to your booking page and click Share > Copy Link.
2. In the Designer, select a button, image, or text link element on your page.
3. Set the link destination to the CozyCal booking URL you copied.
4. Publish your site.

You can link to a specific event type URL to open that event directly in the modal, which skips the full booking page listing. Keep in mind that CozyCal intercepts any <a> tag pointing to a CozyCal URL on your site. If CozyCal URLs appear in navigation menus, footer links, or CMS-generated content, they'll also trigger the modal behavior.

Add an inline booking calendar

The in-frame embed renders the full booking calendar directly within your page layout, with automatic height adjustment and no nested scroll bars. It works well for dedicated booking pages, service pages, or landing pages where you want the calendar visible without requiring a click.

To add an inline embed:

1. In CozyCal, go to your booking page and click Share > Add to website.
2. Under In-frame embed, click Copy code.
3. In the Designer, open the page where you want the calendar. Open the Add panel and drag a Code Embed element onto the canvas.
4. Paste the CozyCal HTML code into the code editor and click Save and close.
5. Publish your site.

That completes the inline embed setup on the published page.

You need a paid site plan to use the Code Embed element. Script-based elements display a placeholder on the canvas but render fully when you preview or publish. Test the published page on mobile devices — JavaScript-based embeds can occasionally affect layout at smaller breakpoints.

Connect CozyCal and Webflow through Zapier

Zapier is the only automation platform with a confirmed, live integration for both CozyCal and Webflow. The CozyCal + Webflow pairing on Zapier confirms these concrete pairings:

• Guest Created in CozyCal > Create Item in Webflow
• Guest Cancelled in CozyCal > Create Item in Webflow

Both triggers accept three required configuration parameters: Booking Page, Event Type, and Event Host. You can scope each trigger to a specific event type or team member, or listen across all bookings on a page.

To run these automations, you'll need a Zapier account and a CMS collection rendered with a Collection List. Set up the collection with fields that match the CozyCal booking data you want to capture. If you need the programmatic reference for CMS item creation, see the Data API. CMS items created through Zapier land as drafts, so you'll need to publish them — either manually or through an additional Zapier action. CozyCal's Zapier integration doesn't currently include a "rescheduled" trigger.

What can you build with the CozyCal Webflow integration?

Pairing CozyCal with Webflow lets you convert website visitors into booked, paid appointments without redirecting them away from your site.

• Paid consultation pages: A law firm's "Schedule a Consultation" page can embed a CozyCal widget that checks attorney availability, books a conference room, collects an intake questionnaire, and charges a consultation fee through Stripe — all inline on the page.
• Round-robin demo booking: A B2B SaaS landing page with a "Book a Demo" CTA can distribute inbound leads across sales reps automatically. CozyCal's round-robin scheduling with priority ranking handles the assignment, and each booking then syncs to a CMS collection via Zapier for internal tracking.
• Group class and workshop registration: A fitness studio's class schedule page can accept up to 500 registrations per time slot, sell multi-session packages at discounted rates, and apply coupon codes. This replaces a separate event registration platform with a single inline embed.
• Lead-qualified appointment funnels: A consulting agency's "Work With Us" page can use CozyCal's event request feature to collect intake form responses before confirming any booking. Hosts review and approve or decline each request, turning the page into a gated intake funnel where only qualified prospects reach the calendar.

If you need booking-event automation, this guide covers the confirmed CozyCal-to-Webflow workflow through Zapier.