HTML/JavaScript Installation

Universal installation guide for any website that supports HTML.

Prerequisites

A Kentroi account with features configured
Access to edit your website's HTML
Your Widget ID and Form IDs from the dashboard

Booking Widget

Add a booking widget that renders natively on your page. Copy this code and replace YOUR_WIDGET_ID with your actual Widget ID from the dashboard.

index.htmlhtml

<!-- 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>

Tip

Get your Widget ID from the Embed Widget page in your dashboard. The widget auto-sizes to fit its content — no height configuration needed.

Specific Appointment Type

To link directly to a specific appointment type, add the data-appointment-type attribute:

<!-- Kentroi Booking Widget — specific appointment type -->
<div data-kentroi-type="booking" data-widget-id="YOUR_WIDGET_ID" data-appointment-type="APPOINTMENT_TYPE_ID"></div>
<script src="https://www.kentroi.com/embed.js" async></script>

Find your appointment type IDs in your dashboard under Appointment Types.

Contact Forms

Embed individual contact forms using their Form ID:

<!-- Kentroi Contact Form -->
<div data-kentroi-type="form" data-form-id="YOUR_FORM_ID"></div>
<script src="https://www.kentroi.com/embed.js" async></script>

AI Chatbot (Floating Button)

Add a floating chat button that appears on every page. When clicked, it opens an AI chatbot popup. Requires a Chatbot or Bundle plan.

<!-- Kentroi Floating Chat Button -->
<script
  src="https://www.kentroi.com/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-api-base="https://www.kentroi.com"
  async
></script>

Tip

Place this script once in your site's footer or layout template. It will appear as a floating button in the bottom-right corner of every page.

How It Works

Shadow DOM Isolation

The booking and form widgets use Shadow DOM to render directly on your page while remaining completely isolated from your site's CSS. Your styles won't affect the widget, and the widget won't affect your page.

Auto-Sizing

Widgets automatically size themselves to fit their content. No need to configure width or height — they adapt to your page layout.

Multiple Widgets

You can place multiple widgets on the same page. The embed.js script only needs to be included once — it will initialize all widgets automatically.

Widget Appearance

Customize colors, fonts, and branding in your Kentroi dashboard under Widget Customize. Changes apply automatically to all embeds.

Legacy iframe Embed

If the JavaScript SDK doesn't work on your platform, you can fall back to an iframe embed:

<!-- Legacy iframe embed (use if SDK doesn't work on your platform) -->
<iframe
  src="https://www.kentroi.com/embed/booking/YOUR_WIDGET_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; max-width: 800px;"
></iframe>

Adjust the height attribute as needed. A minimum of 600px is recommended.

Troubleshooting

Widget not loading

Verify your Widget ID is correct
Check that your Kentroi account is active
Ensure the page is served over HTTPS
Check browser console for errors

Widget is blocked by Content Security Policy

If your site has a strict CSP, add kentroi.com to your script-src and connect-src directives:

script-src 'self' https://www.kentroi.com;
connect-src 'self' https://www.kentroi.com;

Widget appears unstyled

The widget uses Shadow DOM for style isolation. If it appears unstyled, check that JavaScript is enabled and the embed.js script loaded successfully.

Need Help?

Can't get your embed working? We're here to help.

Contact Support