Embedding on Your Website (Embed Widget)

LockMyCal offers one universal JavaScript widget (embed.js) that lets you embed the booking page on any website (WordPress, Webflow, Wix, custom HTML) in three modes: Inline, Popup and Floating button. The widget also automatically adjusts to the height of the content, without scrollbars.

The dashboard generates ready-made code for every mode in the Embed & Share section – just copy it. If you write the code by hand, first insert the script itself into the page (typically in the footer, before </body>):

<script src="https://yourdomain.com/embed.js" defer></script>

In LockMyCal Cloud, use the address https://lockmycal.app/embed.js.

1. Inline embedding

Inserts the booking calendar directly at the place on the page where you put the <div>:

<div id="lockmycal-booking" data-username="jan-novak"></div>

For several widgets on one page, use the data-lockmycal-inline attribute instead of id.

2. Popup (modal window)

Opens the booking calendar in a modal window after clicking any element (it can also be closed programmatically via LockMyCalBooking.close()):

<button onclick="LockMyCalBooking.open('jan-novak')">Book a meeting</button>

3. Floating button

Displays a permanent floating button in the corner of the screen that opens a popup after a click:

<script>
  LockMyCalBooking.initFloating('jan-novak');
</script>

The older names TymeslotBooking, tymeslot-booking and data-tymeslot-inline keep working, so code embedded earlier does not need to change.

4. Available customization attributes

For inline embedding you can set these attributes. For open()/initFloating() the same options go in the second parameter, e.g. { meeting: 'consultation', background: 'transparent' }.

5. Which meeting types the widget shows

The widget has its own list of meeting types, independent of the public booking page. Each meeting type has two switches in its Visibility section:

• Hide from public booking page – the type is not listed on your public page.
• Show in embedded widget – the type is listed in the widget.

The direct link to a meeting type (/your-name/slug) always works. Types shown in the widget have a Shown in widget badge in the list of meeting types.

A widget for one meeting type

The data-meeting attribute (or the meeting option) opens the widget straight on picking a time for that type, with no list and no Back button. It works for every active type, whatever its visibility switches. In the dashboard, pick the type under Customise in the Meeting type field.

If the type does not exist, is switched off or is paused, the widget shows the notice This meeting type isn't available instead of the booking.

6. The widget's look

Inside the widget the booking page is simplified: the top bar shows only the logo, centred, with no language switcher and no links, and the button that shows the full calendar is gone. The language follows the visitor's browser (if LockMyCal does not support it, English is used); set a fixed language with the data-locale attribute.

Under Customise you also set the Background:

• Theme default – the background of your theme (the default).
• Transparent – the page you embed the widget in shows through.
• Custom colour – any colour you pick.

The standalone booking page always keeps its theme's background.

The Customise choices (meeting type, background, layout, language, height and width) and the picked style are saved to your account and stay set when you come back to the page. They only affect the code the dashboard generates – a widget already embedded on a website follows its own code.

7. Hidden widget address

The widget code on your website contains your username, so it leads to your public booking page. If you don't want that, create a hidden widget address: a random address in the form /_k7m2x9qa4b… that the widget uses instead of your username.

1. In the dashboard, open Embed & Share → Security → Hidden widget address.
2. Click Create a hidden address.
3. The code on the Embed Options tab (the direct link included) and the live preview start using it right away. Copy the new code to your website.

Through the hidden address:

• the list shows the meeting types with Show in embedded widget switched on,
• a direct link reaches the types shown in the widget or hidden from the public page; types that are only on the public page, and the public calendar, are not reachable through it,
• a booking keeps the hidden address in its emails too: the links to view, reschedule and cancel the meeting and the button for a new booking lead to the hidden address, not to your username.

The hidden address also works on its own, outside the widget, as a second, non-public address of your page. An account has one hidden address.

Replace it with Generate a new address and remove it with Remove. Both need confirming, because the original address stops working at once – a website with the embedded widget needs the new code, and the links in emails already sent for bookings made through it stop working too.

8. Security (allowed domains)

For the widget to work on a foreign domain, this domain must be on the list of allowed embedding domains:

1. In the dashboard, go to the Embed & Share section.
2. Add the domain on which the widget will be embedded (e.g. www.yourcompany.com). By default, embedding is off until you add a domain.
3. Without an approved domain, LockMyCal refuses to embed the widget and shows an informational message in its place.

In the same section, you'll also find a Live Preview of the picked embedding style. Bookings made from the preview are marked as test bookings.