Booking System Integration Guide

This document provides technical details for integrating the Konifay booking system into your applications.

Overview

Our booking system consists of three main components:

1. SimplyMeet.me - Calendar management and scheduling
2. Whereby - Video conferencing platform
3. Konifay Booking Widget - JavaScript library for embedding

Quick Start

Basic Embedding

Add the booking widget to any webpage:

<script src="https://konifay.io/js/booking-widget.js"></script>
<div id="booking-container"></div>
<script>
  KonifayBooking.init({
    container: '#booking-container',
    type: 'calendar'
  });
</script>

Available Widget Types

• calendar - Full calendar booking interface
• instant - Quick access to video room
• mini - Compact call-to-action widget
• full - Complete interface with tabs

SimplyMeet.me Integration

Direct Link

https://simplymeet.me/konifay

Embedded iframe

<iframe src="https://simplymeet.me/konifay" 
        width="100%" 
        height="600"
        frameborder="0">
</iframe>

API Access

SimplyMeet.me provides REST API access for programmatic booking:

# Check availability
GET https://secure.simplymeet.me/api/availability
Authorization: Bearer YOUR_API_KEY

# Create booking
POST https://secure.simplymeet.me/api/bookings
Content-Type: application/json
{
  "date": "2025-01-25",
  "time": "14:00",
  "duration": 60,
  "attendee": {
    "name": "John Doe",
    "email": "john@example.com"
  }
}

Whereby Integration

Instant Room Access

https://whereby.com/konifay-consulting

Embedded Video Room

<whereby-embed 
  room="https://whereby.com/konifay-consulting"
  background="off"
  chat="off">
</whereby-embed>

Whereby API

Create dynamic meeting rooms:

// Create a meeting room
const response = await fetch('https://api.whereby.dev/v1/meetings', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    roomNamePrefix: 'konifay-meeting',
    endDate: '2025-01-25T16:00:00Z'
  })
});

const { roomUrl, hostRoomUrl } = await response.json();

JavaScript Widget API

Initialization Options

KonifayBooking.init({
  container: '#my-widget',      // Required: Container selector
  type: 'calendar',             // Widget type
  height: '600px',              // Widget height
  theme: 'light',               // Color theme
  onSuccess: (data) => {},     // Success callback
  onError: (error) => {}        // Error callback
});

Programmatic API

// Check availability
const slots = await KonifayBooking.api.getAvailability('2025-01-25');

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

Event Tracking

The widget tracks various events that can be captured:

// Events emitted:
// - widget_initialized
// - tab_switched
// - booking_created
// - instant_meeting_clicked
// - availability_checked

Auto-Initialization

Use data attributes for automatic widget initialization:

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

Webhook Integration

For server-to-server integration, webhooks can be configured:

{
  "event": "booking.created",
  "data": {
    "id": "booking_123",
    "date": "2025-01-25",
    "time": "14:00",
    "attendee": {
      "name": "John Doe",
      "email": "john@example.com"
    },
    "meeting_url": "https://whereby.com/konifay-consulting"
  }
}

Security Considerations

• API keys should never be exposed in client-side code
• Use server-side proxy for API calls from web applications
• Implement rate limiting for API endpoints
• Validate all webhook payloads

Rate Limits

• SimplyMeet.me API: 100 requests per minute
• Whereby API: 60 requests per minute
• Widget initialization: No limit

Browser Support

The booking widget supports:

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Testing

A demo page is available at: /booking-demo.html

Support

For API access and custom integration support:

• Email: bernhard+api@konifay.io
• Documentation: This page
• Demo: Booking Demo

Example Implementations

React Component

import { useEffect, useRef } from 'react';

function BookingWidget({ type = 'calendar' }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (window.KonifayBooking) {
      window.KonifayBooking.init({
        container: containerRef.current,
        type: type
      });
    }
  }, [type]);

  return <div ref={containerRef}></div>;
}

Vue Component

<template>
  <div ref="bookingWidget"></div>
</template>

<script>
export default {
  props: ['type'],
  mounted() {
    if (window.KonifayBooking) {
      window.KonifayBooking.init({
        container: this.$refs.bookingWidget,
        type: this.type || 'calendar'
      });
    }
  }
}
</script>

WordPress Shortcode

function konifay_booking_shortcode($atts) {
  $atts = shortcode_atts(array(
    'type' => 'calendar',
    'height' => '600px'
  ), $atts);

  return sprintf(
    '<div data-konifay-booking 
          data-konifay-booking-type="%s"
          data-konifay-booking-height="%s">
    </div>
    <script src="https://konifay.io/js/booking-widget.js"></script>',
    esc_attr($atts['type']),
    esc_attr($atts['height'])
  );
}
add_shortcode('konifay_booking', 'konifay_booking_shortcode');

Changelog

Version 1.0.0 (2025-01-25)

• Initial release
• SimplyMeet.me integration
• Whereby video room integration
• Multiple widget types
• Auto-initialization support
• Basic API methods