Websites and stores · Add the booking widget to your site
Retime for Webflow
Webflow has an Embed element for custom code. Paste the Retime widget into it, and the booking form takes its place in your layout.
What you get
It fits your design
The widget fills the width of the parent element, so it follows your grid.
The height follows the content
The frame reports its height as the guest moves through the steps.
No plan upgrade for a plugin
The Embed element is part of Webflow. There is nothing else to buy.
Different pages, different services
Each page can point at a different event type.
How to connect Webflow
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 the live domain. A staging domain on webflow.io needs its own entry.
Add an Embed element
In the Webflow Designer, drag Embed onto the page and open the code window.
Paste and edit the code
Paste the snippet below and replace YOUR_EMBED_KEY and YOUR_EVENT_TYPE_SLUG.
Publish and test
Publish the site and make one test booking on the live domain.
Webflow Embed element
<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>The Designer canvas does not run the script. Publish the site and test on the live domain.
Questions about Webflow
Why does the Designer show an empty box?
Webflow does not run embedded scripts on the canvas. The widget appears on the published site.
Do I need my staging domain on the list too?
Yes, if you want to test there. The webflow.io address is a separate domain from your own.
Can I set the width?
Yes. Put the Embed element inside a div and set the width on that div. The widget fills the space it is given.
Put Webflow to work
Create a free account, connect your calendar, and share your first booking link today.