How to Embed Koalendar in Webflow
Add instant booking to any Webflow project—all you do is copy your Koalendar embed code → paste it into Webflow → publish. No plugins, no API keys.
📑 Menu
- Step 1 – Copy your Koalendar code
- Step 2 – Paste it into Webflow
- Troubleshooting
- Which style should I choose?
📋 Step 1 – Copy your Koalendar code
- In the Koalendar dashboard, click Share next to the booking page you’d like to embed.
- Choose Add to website.
- Pick an embed style and click Copy Code.
| Embed style | What visitors see |
|---|---|
| Inline Embed 🖥️ | Full calendar displayed directly on the page. |
| Popup Widget 📍 | Floating button that opens your calendar in a pop‑up. |
| Popup Text/Button 🔗 | Any link or button on your page launches the calendar in a pop‑up. |
➕ Just want a normal link? Skip the embed, copy your Koalendar share URL and hyperlink any text, image, or button to open your scheduler in a new tab.
🎨 Design tip: Customise colours, text, and position in Koalendar before copying so everything matches your Webflow style.
📝 Step 2 – Paste it into Webflow
A. Inline Embed or Popup Text/Button (Embed element)
- In the Webflow Designer, open the page where you want the calendar or trigger.
- Drag a Code Embed element from + Add → Elements into position.
- Click Edit Custom Code and paste your Koalendar code.
- Save & Close → Publish your site.
B. Popup Widget (site‑wide floating button)
- Go to Project Settings → Custom Code → Footer Code.
- Paste the Koalendar widget script.
- Save Changes → Publish.
⏳ Heads‑up: Custom code only runs on the published site—not inside the Designer preview.
🛠️ Troubleshooting
| Problem | Quick fix |
| Calendar or widget doesn’t appear in Designer | Publish the site and view the live URL—scripts don’t execute in the Designer canvas. |
| Popup Widget not showing | Confirm the script is in Footer Code (or an Embed element) and republish. |
| Popup Text/Button link appears but doesn’t open | Make sure both the trigger snippet and the Koalendar script are on the same page. |
| Inline calendar height looks off | Resize the Embed element or set a fixed height in Koalendar before copying. |
🤔 Which style should I choose?
| Goal | Best style |
| Dedicated booking section | Inline Embed 🖥️ |
| Site‑wide call‑to‑action | Popup Widget 📍 |
| Add scheduling to an existing CTA | Popup Text/Button 🔗 |
| Quick off‑page link | Simple hyperlink to your Koalendar URL |