Embed Chatydesk booking on your website: three layouts, pre-selected services and conversion tracking

If you already take bookings through your WhatsApp bot, the obvious next question is whether the same booking page can live on your own website. It can. This post is the practical version: the exact snippets, three layouts to choose from, how to open a specific service from a specific page, and how to know when someone has booked. If you want the "why it never double-books" story, that is covered in Embed your WhatsApp booking widget on your website. Here we stay on the how.

Step 1: switch it on

In Booking settings there is a Website Embed card.

1. Choose a public slug: lowercase letters, numbers and single hyphens, 3 to 40 characters. It becomes the address of your booking page, chatydesk.com/embed/your-slug.
2. Switch on Enable public booking page. While it is off, the address returns a 404 even if a slug is saved.
3. Pick an Embed mode and press Copy code. Use Preview page to see exactly what visitors will see.

Your offerings, weekly hours and timezone come from the booking setup you already have. Your brand colour and logo from the same settings are applied to the widget.

Step 2: pick a layout

Every layout loads the same script, https://chatydesk.com/embed.js. The settings card generates the right snippet for you; these are the three shapes.

Inline sits inside your page and resizes itself to fit its content:

<div data-chatydesk-embed="your-slug"></div>
<script src="https://chatydesk.com/embed.js" async></script>

Popup turns any button or link into an opener for a centred popup window:

<button data-chatydesk-embed="your-slug" data-chatydesk-mode="popup">Book a call</button>
<script src="https://chatydesk.com/embed.js" async></script>

Floating button needs no placeholder at all, just one script tag. It adds a "Book now" button in the corner that opens a slide-in panel. Change the text with data-chatydesk-label:

<script src="https://chatydesk.com/embed.js" data-chatydesk-embed="your-slug" data-chatydesk-mode="button" data-chatydesk-label="Book now" async></script>

Because it is plain HTML, it works anywhere you can paste a custom code block. The widget page is built to be framed by any site, so there is no domain allow-list to maintain.

Recipe: open a specific service from a specific page

Say your site has a page for your 60-minute strategy session and another for a free intro call. Instead of sending visitors to a list and making them choose again, point each page's embed at its own service. Add data-chatydesk-offering with that offering's id:

<div data-chatydesk-embed="your-slug" data-chatydesk-offering="OFFERING_ID"></div>

The widget then opens directly on that service's time slots. To find the ids, open https://chatydesk.com/api/embed/your-slug in your browser: it lists each offering with its id, title, duration and price. If an id is ever wrong or the service has been removed, the visitor just sees the normal list, so a stale link never breaks the page.

Working in a single-page app that adds the placeholder after the script has loaded? Call Chatydesk.init() once the element exists; elements already set up are skipped.

Recipe: know when someone books

When a booking completes, the script dispatches a chatydesk:booked event on your page's document. The event detail carries the booking id and your slug, so you can hand it to whichever analytics tool you use:

<script>
  document.addEventListener('chatydesk:booked', function (e) {
    // e.detail.bookingId, e.detail.slug
    console.log('Booked!', e.detail.bookingId);
  });
</script>

That is also the hook for showing your own thank-you banner or redirecting to a thank-you page.

What your customer experiences

The visitor chooses a service, picks a day on a calendar and a time slot, then enters their name, phone number and, optionally, email. The phone number has to be a valid international number. Their own timezone is detected and shown next to yours. The widget speaks English or German depending on the visitor's browser language.

Free services confirm on the spot. Paid services open Stripe Checkout in a popup, and the widget confirms once the payment lands. Slots come from the same availability as your WhatsApp bot, so a time taken on either side disappears from the other. The longer story is in how to book calls from WhatsApp without the back-and-forth and, for payments, how to take payments on WhatsApp without a separate link. Prefer German? The same flow is described in Termine per WhatsApp buchen und bezahlen lassen.

What it does not do

Better to know before you paste it:

• No WhatsApp confirmation to the visitor. A website visitor has usually never messaged you, so the confirmation is shown in the widget instead. With Google Calendar connected and an email entered, they also get the calendar event as a guest. You can get a WhatsApp heads-up for each website booking by setting a notification number.
• Stripe or free only. Services paid by other means are not bookable on the web widget; the visitor is pointed to WhatsApp for those.
• Limited styling. Your brand colour and logo are applied, but the floating button itself is a fixed blue and there are no other style options.
• It is a page on chatydesk.com. The widget loads from our domain inside your page, so mention it in your own privacy policy the way you would any embedded third-party tool.

Try it

If you already use Chatydesk for bookings, the whole setup takes a few minutes from Booking settings. You can see a live widget at chatydesk.com/embed/chatydesk-demo, or look at pricing if you are not on Chatydesk yet.