Konifay Booking Widget Demo

This page demonstrates how to integrate the Konifay booking widget into your website or application.

Installation

Add the following script tag to your HTML:

<script src="https://konifay.io/js/booking-widget.js"></script>

Calendar Widget

Full calendar booking interface with SimplyMeet.me integration.

<div id="calendar-widget"></div>
<script>
  KonifayBooking.init({
    container: '#calendar-widget',
    type: 'calendar',
    height: '600px'
  });
</script>

Instant Meeting Widget

Quick access to instant video consultation room.

<div id="instant-widget"></div>
<script>
  KonifayBooking.init({
    container: '#instant-widget',
    type: 'instant'
  });
</script>

Mini Widget

Compact call-to-action widget for sidebars or footers.

<div id="mini-widget"></div>
<script>
  KonifayBooking.init({
    container: '#mini-widget',
    type: 'mini'
  });
</script>

Full Widget with Tabs

Complete booking interface with calendar and instant meeting options.

<div id="full-widget"></div>
<script>
  KonifayBooking.init({
    container: '#full-widget',
    type: 'full'
  });
</script>

Auto-Initialization with Data Attributes

Automatically initialize a widget using HTML data attributes.

<div data-konifay-booking 
     data-konifay-booking-type="calendar" 
     data-konifay-booking-height="500px">
</div>

API Usage

Programmatic access to booking functions.

// Create a booking
const booking = await KonifayBooking.api.createBooking({
  date: '2025-01-25',
  time: '14:00',
  duration: 60,
  name: 'John Doe',
  email: 'john@example.com',
  description: 'Project consultation'
});

// Get availability
const slots = await KonifayBooking.api.getAvailability('2025-01-25');
console.log('Available slots:', slots);

Features

Responsive Design
Dark Mode Support
Multiple Widget Types
SimplyMeet.me Integration
Whereby Video Rooms
Event Tracking
Customizable Height
Auto-initialization
API Access
Embeddable Anywhere

Try Different Configurations