Embedding Appointment Booking Widget

This document provides instructions on how to embed the Buktor Appointment Widget into your website or software platform.

Integration Script

To embed the Buktor Appointment Widget, use the following code snippet:

<section
  class="buktor-container"
  data-slug="futurecare"
  data-type="appointment"
  data-service=""
  data-category=""
  data-location=""
  data-date=""
  data-time=""
  data-patient-name=""
  data-patient-phone=""
  data-collect-info="basic"
  data-otp-required="true"
></section>
 
<script
  type="text/javascript"
  src="https://buktor.com/assets/embed.js"
></script>
 
<script>
  document.addEventListener("Success", function (event) {
    // Handle success event
    console.log("Appointment Success:", event.detail);
  });
 
  document.addEventListener("Failed", function (event) {
    // Handle failure event
    console.log("Appointment Failed:", event.detail);
  });
</script>

Attribute Descriptions

Attribute	Description	Example Value
`data-slug`	Unique identifier for the doctor or clinic.	`futurecare`
`data-type`	Type of widget, always set to `appointment`.	`appointment`
`data-service`	Specific service to pre-select (optional).	`consultation`
`data-category`	Service category to filter (optional).	`general`
`data-location`	Clinic or doctor location (optional).	`kozhikode`
`data-date`	Appointment date selected by user.	-
`data-time`	Appointment time selected by user.	-
`data-patient-name`	Pre-filled patient name (optional).	`John Doe`
`data-patient-phone`	Pre-filled patient phone number (optional).	`9876543210`
`data-collect-info`	Information collection level (`basic` or `full`).	`basic`
`data-otp-required`	Determines if OTP verification is required (`true` or `false`).	`true`

Event Handling

The widget dispatches custom events to handle booking outcomes:

Success Event: Triggered when an appointment is successfully booked.

document.addEventListener("Success", function (event) {
  console.log("Appointment Success:", event.detail);
});

Failed Event: Triggered when the appointment booking fails.

document.addEventListener("Failed", function (event) {
  console.log("Appointment Failed:", event.detail);
});

Control Visibility

The widget dynamically shows or hides fields based on the values passed in the data attributes:

If a specific attribute is left empty, the corresponding control remains visible for user input.
If an attribute is pre-filled (e.g., data-service="consultation"), the field will be hidden, using the pre-set value.

Examples

1. Normal Embedding:

<section class="buktor-container" data-slug="futurecare" data-type="appointment"></section>

2. Floating Button for Popup Widget:

<button id="buktor-floating-btn">Book Appointment</button>
 
<script>
  document.getElementById("buktor-floating-btn").addEventListener("click", function() {
    const widget = document.createElement("div");
    widget.innerHTML = '<section class="buktor-container" data-slug="futurecare" data-type="appointment"></section>';
    document.body.appendChild(widget);
  });
</script>

3. Inline Embedding Widget:

<div class="buktor-inline-widget">
  <section class="buktor-container" data-slug="futurecare" data-type="appointment"></section>
</div>

4. Full-Width Banner Widget:

<div style="width: 100%;">
  <section class="buktor-container" data-slug="futurecare" data-type="appointment"></section>
</div>

5. Sidebar Booking Widget:

<div style="width: 300px; position: fixed; right: 0; top: 0; height: 100%; border-left: 2px solid #ccc;">
  <section class="buktor-container" data-slug="futurecare" data-type="appointment"></section>
</div>

6. Modal Popup Booking:

<button id="open-buktor-modal">Book Now</button>
<div id="buktor-modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border: 1px solid #ccc;">
  <section class="buktor-container" data-slug="futurecare" data-type="appointment"></section>
  <button onclick="document.getElementById('buktor-modal').style.display='none'">Close</button>
</div>
 
<script>
  document.getElementById("open-buktor-modal").addEventListener("click", function() {
    document.getElementById("buktor-modal").style.display = "block";
  });
</script>

Notes

Ensure the data-slug matches the doctor or clinic profile in Buktor.
Use HTTPS when embedding the widget to avoid security warnings.

Integration Overview Embedding Buktor Pro App