Embed

Booking, right on your website

Put your booking page inside your own site: in a section, behind a button, in a pop-up, or as times in an email. It takes your colour, and nobody leaves the page to book.

Get started

Trusted by fast-growing companies around the world

From one snippet to a booking on your site

Pieter puts his intro call on Northwind's contact page. Ida books it without leaving the site.

Embed

Choose how it sits

Open a booking link, press Embed and pick a format: in the page, behind a floating button, in a pop-up from any link, or as times in an email.

Code

Copy one snippet

Set the theme, the brand colour and the layout, then copy the code. HTML or React, and the React Atom when you want to build the booker yourself.

Your website

Paste it, and the booker is there

The booker loads in Northwind's contact section, in the studio's own colour, with Pieter's real availability.

Booking

Visitors book on your page

Ida picks Tuesday at 11:30 and fills in the form. She never leaves northwind.studio.

Confirmation

The booking lands in place

The confirmation shows where the booker was, and Pieter hears about it straight away. Add UTM tags to the link and the booking keeps where it came from.

Cal.ai

Ask how to embed it

Cal.ai knows the Cal.com docs, so the steps to put a booker on your site are one question away.

How do you want to add Cal to your site?

Choose one of the following ways to put Cal.com on your site.

Inline embedLoads your booking link alongside your other website content.Floating pop-up buttonPuts a floating button on your site that triggers a modal with your booking link.Pop up via element clickOpen your Cal dialog when someone clicks an element.Email embedSelect a few available times and embed them in your email.

HTML (iframe)React (iframe)React (Atom)Place this code in your HTML where you want your Cal.com widget to appear.<div id="my-cal-inline-intro"></div><script type="text/javascript"> Cal("init", "intro", { origin: "https://cal.klipni.com" }); Cal.ns.intro("inline", { elementOrSelector: "#my-cal-inline-intro", calLink: "pieter/intro", config: { layout: "month_view" }, });</script>Copied to clipboardCloseCopy code

New event bookednowIntro call with Ida Lund, Tue 10 Nov at 11:30am. Booked on northwind.studio.

Watch it set up

A short recording of an embed going from the snippet to a booking on your own site, in the same steps as above.

Tutorial1:11

In this video

It already knows who's booking

Put the name and email in the link and the form arrives filled in. Add UTM tags and the booking keeps where it came from.

Try another feature

Each one works the same way: set it up once on a link, or ask Cal.ai to do it for you.

Automation

App Store

Calendars, CRMs, video and more.

Automation

Webhooks

Push every booking anywhere.

Automation

Mobile & desktop apps

iOS, Android, macOS, Windows.

Questions about embedding

Formats, setup, prefilling and tracking.

Put booking on your site

Pick a format, copy the snippet, and paste it in.

Get started Talk to sales

Booking, right on your website

From one snippet to a booking on your site

Choose how it sits

Copy one snippet

Paste it, and the booker is there

Visitors book on your page

The booking lands in place

Ask how to embed it

Watch it set up

It already knows who's booking

Try another feature

App Store

Webhooks

Mobile & desktop apps

Questions about embedding

Which embed formats are there?

How do I embed Cal.com on my site?

Can I prefill the booking form?

Can I track which campaign a booking came from?

Can I build my own booker?

Does embed work with self-hosted Cal.com?

Put booking on your site