Webflow Installation
Integrate Kentroi booking widgets with your Webflow site.
Prerequisites
- A Kentroi account with appointment types configured
- A Webflow site (any plan supports embeds)
- Your Widget ID from the Kentroi dashboard
Installation Steps
Get Your Embed Code
Log in to your Kentroi dashboard and go to Embed Widget. Copy the embed snippet.
Open the Designer
In Webflow, open your project in the Designer.
Add an Embed Element
From the Elements panel (or press A), drag an "Embed" element onto your page.
Paste the Code
Double-click the embed element and paste your embed snippet:
<!-- Kentroi Booking Widget -->
<div data-kentroi-type="booking" data-widget-id="YOUR_WIDGET_ID"></div>
<script src="https://www.kentroi.com/embed.js" async></script>Style the Container
Select the embed element and use the Style panel to set width, margins, and alignment.
Publish
Click "Publish" to push your changes live.
Tip
Other Widgets
Contact Form
Embed a contact form using the same Embed element approach:
<div data-kentroi-type="form" data-form-id="YOUR_FORM_ID"></div>
<script src="https://www.kentroi.com/embed.js" async></script>Floating Chat Button
Add this to your site's custom code (Project Settings > Custom Code > Footer Code) so it appears on every page:
<script src="https://www.kentroi.com/widget.js" data-widget-id="YOUR_WIDGET_ID" data-api-base="https://www.kentroi.com" async></script>Responsive Behavior
The widget auto-sizes to fit its content and adapts to your container width. For better control, wrap the Embed element in a Div Block and set the div's max-width to your desired widget width.
Troubleshooting
Embed shows in Designer but not on published site
Make sure you've published after adding the embed. Also check that your Kentroi account is active and the Widget ID is correct.
Widget content is cut off
The widget auto-sizes, but the Webflow embed container may clip content. Make sure the embed element's overflow is set to "visible" in the Style panel.
Can't see embed in Designer preview
Webflow may not render external embeds in the Designer. Use the preview mode (eye icon) or publish to a staging URL to test.