Websites and stores · Add the booking widget to your site
Retime for WordPress
The Retime widget is a small block of HTML. Paste it into a WordPress page with the Custom HTML block, and visitors pick a time on your own site.
What you get
Visitors stay on your site
The booking form loads inside your page, so nobody has to open a second tab.
The widget resizes itself
The page reports its height, and the frame grows with it. There is no inner scroll bar.
No plugin to install
The snippet is plain HTML and JavaScript. It runs on any WordPress theme.
One widget for each service
Point the snippet at a different event type on each page.
How to connect WordPress
Get your embed key
In Retime, open Organization, then Embed, and copy the embed key.
Turn on embedding for the event type
Open the event type, then Booking extras, and turn on Allow embedding on external sites. An event type with the setting off shows an empty widget.
Add your domain
In Retime, open Organization, then Embed, and use Add a website to enter your domain. The page lists the domains that are allowed today.
Add a Custom HTML block
Edit the WordPress page, add a Custom HTML block, and paste the snippet below.
Set the key and the event type
Replace YOUR_EMBED_KEY and YOUR_EVENT_TYPE_SLUG with your own values.
Publish and test
Open the live page and make one test booking.
WordPress Custom HTML block
<div id="retime-booking" style="max-width:900px;margin:0 auto"></div>
<script>
(function () {
var mount = document.getElementById('retime-booking');
if (!mount) return;
var origin = 'https://app.retime.so';
var key = 'YOUR_EMBED_KEY';
var slug = 'YOUR_EVENT_TYPE_SLUG';
var frame = document.createElement('iframe');
frame.src =
origin + '/embed/' + encodeURIComponent(key) + '/' + encodeURIComponent(slug);
frame.title = 'Book a time';
frame.loading = 'lazy';
frame.allow = 'clipboard-write';
frame.style.width = '100%';
frame.style.border = '0';
frame.style.display = 'block';
frame.style.minHeight = '600px';
window.addEventListener('message', function (event) {
if (event.origin !== origin) return;
if (event.source !== frame.contentWindow) return;
var data = event.data;
if (data && data.type === 'retime:resize' && typeof data.height === 'number') {
frame.style.height = Math.max(200, Math.min(data.height, 4000)) + 'px';
}
});
mount.appendChild(frame);
})();
</script>Paste this inside a Custom HTML block. The classic editor needs the Text tab, not the Visual tab.
Questions about WordPress
Does the widget work with page builders?
Yes. Elementor, Divi, and Beaver Builder all have an HTML or code widget. Paste the snippet there.
Why is the widget blank?
There are two usual causes. The event type does not allow embedding, or the domain is not on the allowed list. Retime refuses to load in a frame on any other domain.
Can I put it in a sidebar?
Yes, but a booking form needs width. A full width page or a wide column reads better than a narrow sidebar.
Does it slow the page down?
The frame loads only when it comes into view, so the rest of the page is not held back.
Put WordPress to work
Create a free account, connect your calendar, and share your first booking link today.