Embed your booking page on your website (Wix, Square, Wordpress, Gsites, Weebly, etc.)

Our embed modal makes embedding your booking page in your website fast and easy - even on mobile.

Copy & paste the code and get your booking page embedded quickly.

Embedding an iFrame

An iFrame is a frame within a frame. It is a component of an HTML element that allows you to embed documents, videos, and interactive media within a page. By doing this, you can display a secondary webpage on your main page.

From your dashboard, select the booking page you want to edit and click "Share".

On the pop-up window, click "Embed" to copy your embed code. Paste this code to a page on your website.

Embedding in WordPress

We shared two easy ways to embed your Koalendar booking page on your website here.

Embedding in WIX

WIX prevents the embedded site from firing correctly by sandboxing the iFrame. Reach out to Wix support if your embed is not working correctly. 

1. Go to the Wix Editor
2. Click on "Add" (the +) on the left-hand column.
3. Click on Apps (you may need to scroll down to see it) and then "HTML".
4. You will see a box appear on the web page. Click on that and choose "Settings".
5. For "Mode", choose "HTML code" from the drop-down list. 
6. Paste the HTML code you have copied from the Embed section (see the top of this page) into the HTML box. 
7. Click on Update (you may need to scroll down to see this).
8. Your schedule should appear in the box. You can use the Drag Handle to resize your box to fit the schedule.

Embedding in Squarespace

You'll need to use the Code block to embed your booking page on Squarespace. 

1. Copy the Embed code.
2. In your Squarespace site, open a page or post editor.
3. Add a Code Block to a page.
4. Paste the code into the block.

Embedding in Google Sites

1. On the booking page you want to embed, copy the embed code provided.
2. On Google Site, head to the page you'd like to embed the Koalendar schedule on while in edit mode.
3. Add the embed code (see the following screenshot), then maybe resize the inserted calendar, and click "Publish" when ready.

Embedding in Weebly

1. On the booking page you want to embed, copy the embed code provided.
2. Head to the page you'd like to embed the Koalendar schedule on while in edit mode. 
3. Drag the Weebly Embed Code element onto your web page.
4. Paste the embed code using the CMD+V (on Mac) or CTRL+V (on Windows) shortcut into the widget.
5. Click "Save" and view live to see your Koalendar schedule live.

Embedding in PageCloud

1. On the booking page you want to embed, copy the embed code provided.
2. Head to the page you'd like to embed the Koalendar schedule on while in edit mode. 
3. Paste the embed code using the CMD+V (on Mac) or CTRL+V (on Windows) shortcut. 
4. Click "Save" and view live to see your Koalendar schedule live.

Embedding in Shopify

Use the HTML editor to add the embed code that Koalendar generates for you to one of your pages. Save your change before trying to view your update page.

Embedding in Drupal

Change your text format to Full HTML to add custom HTML, then add your Koalendar embed code snippet.

Embedding in GoDaddy

Follow GoDaddy’s instructions for adding custom HTML to add the embed code Koalendar automatically generates.

Embedding in Ionos

To prompt Ionos to display your embedded scheduler to clients on mobile devices, disable the option to only display optimized content on smartphones and tablets.

Embedding in Leadpages

Use the Leadpages HTML widget to add the embed code snippet Koalendar provides.

Embedding in Vistaprint/Webs.com

Use the custom HTML feature to add Koalendar's embed code to your website.