Centhera developer guide

Add Centhera bookings to any website

A simple handoff guide for developers, agencies, and web design companies integrating Centhera booking widgets for service businesses.

View integration options

Website handoff

Widget ready

<script
  src="https://api.centhera.com/provider-service/js/widget.js"
  data-client-id="YOUR_BUSINESS_CLIENT_ID"
  async
></script>

Add the script once, then connect your Book Now buttons to the Centhera booking widget or direct booking page.

Integration options

Choose the simplest path for the client website

Embed the booking widget

Best for business websites that need a Book Now button or popup experience without sending customers away.

Use a direct booking link

Best for Instagram bios, WhatsApp, email campaigns, Linktree pages, and simple websites.

Connect from any website

Use Centhera with Next.js, React, WordPress, Webflow, Shopify, static HTML, or agency-built sites.

Agency handoff

What to give your web developer

If a service provider or local business is paying another company to update their website, this is the checklist to share before work starts.

Integration checklist

Centhera provider account is created
Business profile, services, team, and availability are configured
Developer has the business booking link or widget client ID
Website has a visible Book Now button in the header, hero, or service pages
Booking flow is tested on desktop and mobile before launch

Framework examples

Add the same widget script to common frontend stacks

The integration stays the same across frameworks: load the Centhera widget script once, pass the business client ID, then place a visible Book Now action on the site.

Next.js

Use Next Script in a page, layout, or client component where the booking button is available.

import Script from "next/script";

export default function BookingScript() {
  return (
    <Script
      src="https://api.centhera.com/provider-service/js/widget.js"
      data-client-id="YOUR_BUSINESS_CLIENT_ID"
      strategy="afterInteractive"
    />
  );
}

React / Vite

Load the widget once when the booking area mounts.

import { useEffect } from "react";

export function BookingWidgetLoader() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://api.centhera.com/provider-service/js/widget.js";
    script.dataset.clientId = "YOUR_BUSINESS_CLIENT_ID";
    script.async = true;
    document.body.appendChild(script);

    return () => script.remove();
  }, []);

  return null;
}

Vue

Append the script from a component that appears on booking-ready pages.

<script setup>
import { onMounted, onUnmounted } from "vue";

let script;

onMounted(() => {
  script = document.createElement("script");
  script.src = "https://api.centhera.com/provider-service/js/widget.js";
  script.dataset.clientId = "YOUR_BUSINESS_CLIENT_ID";
  script.async = true;
  document.body.appendChild(script);
});

onUnmounted(() => {
  script?.remove();
});
</script>

Svelte

Load the script in onMount and remove it if the component unmounts.

<script>
  import { onMount } from "svelte";

  onMount(() => {
    const script = document.createElement("script");
    script.src = "https://api.centhera.com/provider-service/js/widget.js";
    script.dataset.clientId = "YOUR_BUSINESS_CLIENT_ID";
    script.async = true;
    document.body.appendChild(script);

    return () => script.remove();
  });
</script>

Static HTML

Paste the script before the closing body tag or through the site's custom code area.

<button type="button" data-centhera-booking>
  Book Now
</button>

<script
  src="https://api.centhera.com/provider-service/js/widget.js"
  data-client-id="YOUR_BUSINESS_CLIENT_ID"
  async
></script>

WordPress / Webflow / Shopify

Use the platform's custom code area and place the Book Now button where customers can see it.

<!-- Add in the site footer or custom code settings -->
<script
  src="https://api.centhera.com/provider-service/js/widget.js"
  data-client-id="YOUR_BUSINESS_CLIENT_ID"
  async
></script>

<!-- Add this button in the header, hero, or service page -->
<button type="button" data-centhera-booking>
  Book Now
</button>

Set up Centhera before integration starts

Create the provider account first so the developer has the correct booking link, business details, and widget identifier.