Advanced Koalendar embed for developers

Embed your Koalendar page so visitors can book time without navigating away from your website.

This guide will teach you how to install our embed script and the various ways to trigger scheduling links to appear. See examples of our embed options →

Installing the embed script

Copy and paste the following JavaScript code just before the closing </body>  tag:

<script>window.Koalendar=window.Koalendar||function(){(Koalendar.props=Koalendar.props||[]).push(arguments)};</script>
<script async src="https://koalendar.com/assets/widget.js"></script>
<script>Koalendar('init');</script>

We support 4 different modes for your Koalendar embed:

1. Display pop-up via hyperlink
2. Display a floating pop-up button
3. Open a pop-up via JavaScript
4. Render an inline booking interface

Read on for details about how to do it!

1. Display pop-up via hyperlink

To open a booking page when someone clicks a hyperlink, add a data-koalendar-widget attribute to the link.

<a data-koalendar-widget href="https://koalendar.com/e/demo">Schedule a meeting</a>

We'll display the link from the href  in a lightbox:

2. Display a floating pop-up button

To render a floating widget on your site, call Koalendar('widget') and set the url attribute with your Koalendar url.

<script>
  Koalendar('widget', {
    "url": "https://koalendar.com/e/demo",
    "text": "Schedule a meeting",
    "shape": "rounded-full",
    "backgroundColor": "#5145CD",
    "textColor": "#FFFFFF",
    "position": "bottom-right",
    "icon": "calendar"
  });
</script>

This will inject a floating button at the bottom your site:

The widget configuration accepts the following properties:

3. Open a pop-up via JavaScript

You may use the open  call to open the Koalendar widget any time:

<script>
  Koalendar('open', { url: 'https://koalendar.com/e/demo' });
</script>

4. Render an inline booking interface

This option allows you to place the Koalendar scheduling interface directly inline with your other website content:

To render your link inline, make an inline  call after you call init  :

<div id="booking-page">
  <!-- this is where we will inject the booking page embed -->
</div>

<script>
  Koalendar('inline', {
     "url": "https://koalendar.com/e/demo",
     "selector": "#booking-page"
  });
</script>

The inline  command accepts the following options: