Embedding A Calendar or Booking Link

Your Chili Piper calendar or booking link can be easily embedded into any website with no form required!

When do you use this option?

With Handoff, you can embed your personal booking link or a group booking link to display the availability for yourself or a team.

With Concierge, you can present a form to route the customer appropriately to the correct calendar.

iFrame Embed Code

Embedding the calendar on your site is as easy as including your booking link in an "iframe" element.

<iframe src="https://yourdomain.chilipiper.com/book/me/firstname-lastname" width="560" height="700"></iframe>

You will likely want to adjust the width and height of the iframe according to your page layout or apply additional styles to make it look like it is a part of your website. 

iFrame Embed Code - Example

Personal Booking Link

Here is an example of a personal booking link that was added inside the iframe (this same method works with a queue link as well):

We can see the iframe code from the page, setting a personal link as the iframe "src" URL, and how it looks.

Concierge Embed

If the iframe method is used, you will not need to use the "embed code" found within Inbound Concierge Routers. Instead, copy the Concierge link from the embed options and use this as your iframe "src" URL.

Concierge Embed - Example

If you need to embed a Concierge router inside, here is an example of what that would look like:

We can see the iframe code from the page and how it looks.

Custom colors and styles for your embedded calendar

Admins have the additional ability to adjust colors and styles for booking links within a workspace. This will allow you to change the look and feel of the calendar to fit appropriately with your website.

More information on customizing the styles of a calendar here.

Advanced Embedding Concierge in any DOM Element

Usually, Concierge pops up as a floating modal on your landing page when someone submits a form. There might be the need to display instead the calendar embedded within your landing page as though it was part of the existing layout.

The following is an example code of how this would be implemented

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.submit("account-name", "example-router", {
domElement: '#yourElement' })</script>
<div id="yourElement"></div>

In our example, we used an element with the ID parameter "yourElement". Any selector, such as class, id, etc., can be used in this case. 

You will likely want to customize the look and feel of the calendar and the element itself to fit in well with your page style.

This method is possible with Concierge only, and only if you have your own form presented on the landing page.