🚀 How to Add Koalendar to Your Website

👉 See examples of our embed options →

Let visitors book time with you without ever leaving your site. Koalendar offers several quick embed methods—no coding required—and an advanced JavaScript SDK for full control. Pick the option that fits your workflow below.

✂️ Step 1 – Choose what to embed

Koalendar can embed two types of content on your site:

Embed Type	What visitors see
Public page 🔗	A directory listing all of your booking pages.
Single booking page 📅	One specific scheduling page.

💡 Tip: Not sure how to share your Public page? Follow this short guide: How to Share Your Public Link (List of All Booking Pages)

🔗 Step 2 – Copy your embed code

In your Koalendar dashboard, click Share on the booking page you want to promote:
Click Add to website :
Select which embed style you want (Inline, Popup widget, Popup text):
Click Copy Code and paste it into your website’s HTML.

Tip: Need multiple pages in one embed? Create a Public page first, then embed that link.

🌐 Platform‑specific guides

Most builders work the same way—paste the code into an Embed/HTML block—but we have detailed walkthroughs for popular platforms:

If you don’t see your builder listed, the general instructions above still apply—just look for the HTML, Code or Embed widget in your editor.

🛠️ Advanced embed (JavaScript)

Need custom popup trigger, or programmatic control? Drop in our lightweight JavaScript snippet and you’re set.

📚 Full instructions & code samples: Advanced Koalendar embed for developers

🖼️ iframe fallback (no‑JS)

If your platform strips custom JavaScript (some free plans do), embed Koalendar with a simple <iframe> instead:

<iframe src="PASTE_YOUR_KOALENDAR_LINK_HERE?embed=true" width="100%" height="800" frameborder="0"></iframe>

Step‑by‑step guide ➡︎ How to embed Koalendar with an iframe