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 either 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 that can 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.
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.
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 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.