How to add Koalendar to an Unbounce site
Add hassle‑free scheduling to any Unbounce landing page with a simple copy‑paste. No extra integrations—everything you need is already in Koalendar and Unbounce.
📑 Menu
- 📋 Step 1 – Copy your embed code
- 📝 Step 2 – Paste it into Unbounce
- 🛠️ Troubleshooting
- 🤔 Which embed style should you use?
📋 Step 1 – Copy your embed code
- In the Koalendar dashboard, click Share next to the booking page you’d like to embed.
- Select Add to website.
- Choose an embed style and click Copy Code.
| Embed style | What it does |
|---|---|
| Inline Embed 🖥️ | Displays the booking calendar directly on the landing page. |
| Popup Widget 📍 | Adds a floating “Book now” button that opens a calendar popup. |
| Popup on Click 🔗 | Turns any link or button into a popup calendar. |
💡 Customise colours, text, and position before copying so it matches your Unbounce design.
📝 Step 2 – Paste it into Unbounce
Option A – Inline Embed or Popup on Click 🔧
- In the Unbounce Page Builder, drag an HTML Block onto the page where you want the calendar (or popup trigger) to appear.
- Double‑click the block to open the Custom HTML editor.
- Paste the Koalendar code you copied.
- Save Code, then Preview or Publish your page.
Option B – Popup Widget (floating button) 📌
- Open your page in the Unbounce Page Builder and click the Javascripts tab (bottom‑left).
- Click Add Script → give it a name like “Koalendar Widget”.
- Paste the Koalendar widget code and set Placement to Before Body End Tag.
- Done → Preview or Publish. The floating button now appears on every variant of that page.
📝 Need a site‑wide widget? Add the same script to each landing page or duplicate the page once the widget is installed.
🛠️ Troubleshooting
| Issue | Quick fix |
| Calendar not loading in Preview | Publish the page—some scripts only run on the live URL. |
| Widget missing after pasting | Make sure the script placement is Before Body End Tag (not Head). |
| Popup link shows but doesn’t open | Confirm both the link snippet and the Koalendar script are on the same page. |
| Styling looks cramped | Increase the HTML Block’s width/height or adjust padding in the Koalendar embed settings. |
🤔 Which embed style should you use?
| Goal | Best style |
| Dedicated booking section | Inline Embed 🖥️ |
| Always‑visible CTA | Popup Widget 📍 |
| Add scheduling to an existing button | Popup on Click 🔗 |
| Quick off‑page link | Direct Link ↗️ |