IntoCal

    IntoCal + Webflow

    Embed a booking calendar in Webflow with one Code Embed element. Inline or popup, styled to sit cleanly in your design.

    Quick answer: To add booking to Webflow, drag a Code Embed element onto your page and paste <script src="https://intocal.com/embed.js" async></script><div data-intocal="yourname/your-event"></div>. Publish the site and visitors can book directly; meetings sync to Outlook or Google Calendar.

    Booking that matches your Webflow design

    Available with

    Free Plan
    Pro Plan
    Organization Plan
    View plans and pricing Get started with IntoCal

    Webflow sites are built for conversion, and a booking calendar on the page converts better than a link that sends visitors elsewhere. IntoCal embeds with one element and responds to its container, so it fits columns, sections and modals.

    Availability comes live from your connected calendars, and every booking can include a Teams, Zoom or IntoCal Meet link automatically.

    Key Features

    Everything the Webflow integration brings to your scheduling.

    Code Embed element

    Paste one snippet — no custom code in site settings needed.

    Inline or popup

    Embed in a section or open from any button.

    Responsive

    Adapts to Webflow breakpoints and container width.

    CMS-friendly

    Bind data-intocal to a CMS field to give each team member their own calendar.

    Conversion tracking

    Fire pixel and analytics events on booking.

    Real calendar sync

    Outlook and Google availability.

    How It Works

    Get set up in under two minutes.

    1

    Copy your snippet

    In IntoCal, open Distribution and copy the embed snippet for your event type.

    2

    Add a Code Embed

    In the Webflow Designer, add Components → Code Embed and paste the snippet.

    3

    Publish

    Embeds only run on the published site; publish and test a booking.

    Inline embed

    <script src="https://intocal.com/embed.js" async></script>
<div data-intocal="yourname/intro-call"></div>

    Popup from a Webflow button

    Add the script once in a Code Embed (or page custom code), then add the attribute data-intocal="yourname/intro-call" and data-intocal-mode="popup" to any Button via Element Settings → Custom attributes.

    Per-person calendars with Webflow CMS

    On a Team Members collection template, add a Code Embed and insert a CMS field (for example "IntoCal slug") inside data-intocal. Each profile page then shows that person's own booking calendar.

    Troubleshooting

    • Nothing shows in the Designer: Code Embeds render only on the published or preview site.
    • Calendar cut off: give the parent element no fixed height and overflow visible.
    • Webflow free plan: Code Embed requires a paid site plan or Workspace plan.

    Related integrations and guides

    Zapier integration

    Send Webflow bookings to 7,000+ apps.

    Embed a booking calendar

    General embed guide.

    Make integration

    Automate Webflow leads.

    Frequently Asked Questions

    Ready to connect Webflow?

    Start scheduling with IntoCal and Webflow in minutes. No credit card required.

    Last updated 2026-10-07