Ehjzny APIs (1.0)

Please enable API Access through Settings page first, Then Copy APP ID.

To get results in a specific langauge, please use lang attribute in header. currently, values: en, ar are supported.

Many API endpoints that return lists of data support pagination to help manage large datasets efficiently. The pagination system uses the following parameters:

• limit (optional): Number of items to return per page (default: 10)
• nextPageToken (optional): Token to retrieve the next page of results

Paginated responses include a pagination object with the following structure:

{
  "result": [
    // ... array of items
  ],
  "pagination": {
    "nextPageToken": "eyJpZCI6IjYzZjA5...", // Token for next page (null if last page)
    "hasMore": true // Boolean indicating if more pages are available
  }
}

First request (get first page):

GET /management/resources?limit=5

Subsequent requests (get next pages):

GET /management/resources?limit=5&nextPageToken=eyJpZCI6IjYzZjA5...

• If nextPageToken is null or hasMore is false, you've reached the last page
• Always use the nextPageToken from the previous response to get the next page
• The limit parameter has a maximum value that varies by endpoint
• Pagination tokens have an expiration time, so don't store them for extended periods

You can find Postman's collection here.

Enable Payments through Online Methods (Apple Pay, Visa, MasterCard, Mada, STC Pay) easily through simple steps:

• First, you activate Online Payments inside Dashboard.
• At this point every booking scheduled with a Booking Type that has price on it, will become in a PENDING_PAYMENT status waiting for payment completion to finally become CONFIRMED.
• Use the paymentLink's URL in payment object found inside scheduling response to prompt customer to pay (you can also use paymentWebViewLink URL to view a striped version of the payment page).
• If customer has not completed the payment within the configured duration, booking will automatically be deleted.

Take a look at this Flutter's Dart implementation (using flutter_inappwebview package):

class PaymentWebview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Payment'),
      ),
      body: Center(
        child: InAppWebView(
          initialUrlRequest: URLRequest(
            url: WebUri(
              appointment.payment.paymentWebViewLink,
            ),
          ),
          onWebViewCreated: (controller) async {
            if (defaultTargetPlatform != TargetPlatform.android ||
                await WebViewFeature.isFeatureSupported(
                    WebViewFeature.WEB_MESSAGE_LISTENER)) {
              controller.addJavaScriptHandler(
                handlerName: 'message',
                callback: (args) {
                  print('Message from webview $args');
                  // args[0] is either
                  // {
                  //   type: "paymentInitialized",
                  //   bookingId: "<Booking ID>"
                  // }
                  // or
                  // {
                  //   type: "paymentSuccess",
                  //   bookingId: "<Booking ID>"
                  // }
                  // or
                  // {
                  //   type: "paymentFailed",
                  //   bookingId: "<Booking ID>"
                  // }

                  if (args.isNotEmpty &&
                      args[0]?["type"] == "paymentInitialized") {
                    print('payment initialized');
                  }

                  if (args.isNotEmpty && args[0]?["type"] == "paymentSuccess") {
                    print('payment success');
                    //do actions
                    //e.g. navigate to confirmation screen
                  }

                  if (args.isNotEmpty && args[0]?["type"] == "paymentFailed") {
                    print('payment failed');
                    //do actions
                  }
                },
              );
            }
          },
          onLoadStop: (controller, url) async {
            await controller.evaluateJavascript(source: '''
                        window.addEventListener("message", (event) => {                
                          window.flutter_inappwebview.callHandler('message', event.data);
                        }, false);
                      ''');
          },
        ),
      ),
    );
  }
}

In addition to Scheduled Booking feature, Users can instantly book a service with the first available provider who accepts. This feature is called Instant Booking. No date or time is required — only a service type.

1. Customer creates an instant booking — Call PUT /customer/scheduling/new with assign: false and the desired type ID in the request body. No date or time fields are needed.

   {
     "type": "<TYPE ID>",
     "assign": false
   }
   

2. Booking status depends on payment configuration:

   • Free service or no payment method enabled: Booking is created with PENDING_ASSIGNMENT status immediately.
   • Paid service with a payment method enabled: Booking is created with PENDING_PAYMENT status. The customer must complete payment first (using the payment object in the response). After payment, the status transitions to PENDING_ASSIGNMENT.

3. Response includes queue information:

   {
     "result": {
       "id": "<BOOKING ID>",
       "status": "PENDING_ASSIGNMENT",
       "typeId": "<TYPE ID>",
       "queuePosition": 1,
       "estimatedWaitMinutes": 30
     }
   }
   

4. FCM broadcast to providers — Once the booking reaches PENDING_ASSIGNMENT status (immediately for free bookings, after payment for paid bookings), all matched resource providers receive an FCM notification:

   {
     "notification": { "title": "...", "body": "..." },
     "data": {
       "via": "scheduling-system",
       "type": "NEW_PENDING_UNASSIGNED_BOOKING",
       "bookingId": "<BOOKING ID>",
       "resourceId": "<RESOURCE ID>"
     }
   }
   

   Note: FCM notifications are NOT sent while the booking is in PENDING_PAYMENT status. The broadcast only fires after payment is completed.

5. Provider accepts the booking — A provider calls POST /management/bookings/assign with bookingId and resourceId. The booking becomes CONFIRMED and is assigned to that resource.

   {
     "bookingId": "<BOOKING ID>",
     "resourceId": "<RESOURCE ID>"
   }
   

6. Customer receives assignment notification — An FCM notification is sent to the customer:

   {
     "notification": { "title": "...", "body": "..." },
     "data": {
       "via": "scheduling-system",
       "type": "MY_BOOKING_ASSIGNED",
       "bookingStatus": "CONFIRMED",
       "bookingId": "<BOOKING ID>"
     }
   }
   

7. Booking is now CONFIRMED — Queue fields (queuePosition, estimatedWaitMinutes) are removed from the booking after assignment.

Instant bookings expire if not assigned within a configured timeout. You can control this with the optional assignmentTimeout parameter (in minutes) when creating the booking:

{
  "type": "<TYPE ID>",
  "assign": false,
  "assignmentTimeout": 30
}

• Minimum: 5 minutes (values below are clamped to 5)
• Maximum: 180 minutes (values above are clamped to 180)
• Default: If not provided, a system default is used.

When the timeout expires:

• The booking status changes to REJECTED.
• The customer receives an FCM notification:

  {
    "data": {
      "via": "scheduling-system",
      "type": "MY_BOOKING_EXPIRED",
      "bookingId": "<BOOKING ID>",
      "bookingStatus": "REJECTED"
    }
  }
  

• Any subsequent assignment attempt returns error code BKS-110 (booking expired).

When multiple providers try to accept the same booking simultaneously:

• Exactly one provider succeeds (200 response with CONFIRMED status).
• All other providers receive a 400 response with error code SCH-ALREADY_ASSIGNED.
• The customer receives exactly one MY_BOOKING_ASSIGNED FCM notification.
• The booking cannot be re-assigned to a different resource once assigned.

A customer can cancel an instant booking at any point:

• Before payment: POST /customer/bookings/cancel with bookingId.
• Before assignment (leave queue): Same endpoint. The booking is removed from the queue and remaining customers' positions are updated.
• After assignment: Same endpoint. The confirmed booking is canceled.

A provider can end a confirmed instant booking early using POST /management/bookings/end with bookingId. This shortens the booking duration to the actual time served. After ending, if there are other pending unassigned bookings, a new FCM broadcast is sent to available providers.

The payment object in the response contains invoiceId, invoiceNumber, paymentLink, paymentWebViewLink, and amount details (subTotal, total, balance, discount).

Building on the Instant Booking feature, a Queue Booking system lets customers join a virtual queue and wait for the next available provider — without selecting a specific date or time. This is ideal for walk-in clinics, service counters, or any scenario where customers wait in line remotely.

Instant Booking and Queue Booking use the same API endpoint and mechanism (assign: false). The queue features (position tracking, estimated wait, pending count) are automatically included.

1. Customer checks queue length — Call POST /availability/types to see available service types. Each type includes a pendingCount field showing how many customers are currently waiting in the queue.

2. Customer joins the queue — Call PUT /customer/scheduling/new with assign: false in the request body. No date or time is required. A booking is created with PENDING_ASSIGNMENT status (or PENDING_PAYMENT if payment is required). The response includes:

   • queuePosition — the customer's position in the queue (1 = next to be served)
   • estimatedWaitMinutes — estimated wait time based on position × service duration

3. Providers get notified — All matched resource providers receive an FCM notification (after payment is completed, if applicable):

   {
     "notification": { "title": "...", "body": "..." },
     "data": {
       "via": "scheduling-system",
       "type": "NEW_PENDING_UNASSIGNED_BOOKING",
       "bookingId": "<BOOKING ID>",
       "resourceId": "<RESOURCE ID>"
     }
   }
   

4. Queue position updates — When another customer is served, assigned, or leaves the queue, remaining customers receive an FCM notification with their updated position:

   {
     "data": {
       "via": "scheduling-system",
       "type": "QUEUE_POSITION_UPDATED",
       "bookingId": "<BOOKING ID>",
       "queuePosition": "2",
       "estimatedWaitMinutes": "60"
     }
   }
   

   Customers can also poll GET /customer/bookings?status=PENDING_ASSIGNMENT to see their current queuePosition and estimatedWaitMinutes.

5. Provider accepts — A provider calls POST /management/bookings/assign with bookingId and resourceId. The booking becomes CONFIRMED. The customer receives:

   {
     "data": {
       "via": "scheduling-system",
       "type": "MY_BOOKING_ASSIGNED",
       "bookingStatus": "CONFIRMED",
       "bookingId": "<BOOKING ID>"
     }
   }
   

   Remaining customers in the queue automatically receive QUEUE_POSITION_UPDATED with their new positions.

6. Customer leaves the queue (optional) — A customer can leave the queue at any time by calling POST /customer/bookings/cancel with their bookingId. Remaining customers in the queue automatically receive updated positions via QUEUE_POSITION_UPDATED FCM notifications.

7. Booking expiration — If a booking is not assigned within the timeout period, it expires. The customer receives a MY_BOOKING_EXPIRED FCM notification with bookingStatus: "REJECTED", and remaining customers' queue positions are updated automatically.

Queues are independent per resource. If resources A and B serve different service types, bookings for type A and type B maintain separate queue positions. This means:

• A booking for type A gets queuePosition: 1 even if there are 5 pending bookings for type B.
• pendingCount in /availability/types reflects the count per type across all matching resources.

Providers can view their pending queue using GET /management/bookings/unassigned?resourceId=<RESOURCE ID>. This returns:

• Only bookings whose type is compatible with the specified resource.
• Bookings ordered by createdAt ascending (oldest first / FIFO).
• An empty list if no unassigned bookings match.

The resourceId query parameter is required.

1. Patient opens the app and sees available clinics and service types with pendingCount (e.g., "General Consultation — 3 people waiting").
2. Patient taps "Join Queue" → PUT /customer/scheduling/new with assign: false.
3. Patient sees "You are #4 in line, estimated wait: 40 minutes".
4. As patients ahead are served, the app receives QUEUE_POSITION_UPDATED FCM notifications and updates the display.
5. When it's the patient's turn, a doctor accepts via POST /management/bookings/assign.
6. Patient receives MY_BOOKING_ASSIGNED notification — "A doctor has accepted your request".

All FCM payloads include via: "scheduling-system" in the data field.

Use Customers APIs for the Patient's App and Management APIs for Doctor's App. Booking flow varies from App to App, in our use case:

1. Patient select the clinic. using /availability/resourceCategories to fetch list of clinics.
2. Patient fill out an optional doctors filters and hit "search" button. using /customFields/resourceFilters to fetch filters fields types and options.
3. Patient gets a list of Doctors. using /availability/resources to fetch doctors.
4. Patient clicks on "Book now" next to Doctor's details then select a appointment type. using /availability/types to fetch doctor's appointment types.
5. Patient pick a date & time. using /availability/times to fetch days and times.
6. Patient fill out appointment type's custom fields and optionaly fill pateint's uncompleted profile and finally schedule the appointment. using /customFields/bookingInfo to fetch appoitnment type's information fields and /customFields/customer for customer's information fields and /customer/scheduling/new to create an appointment.

As for Doctor App, each Doctor is registered as an Organization User with limited permissions to allow only control of a single Booking Resource.

Display beautiful widgets for use on the web!

Do not forget to white list domain names in order for the widget to work through Settings page

The widget dispatches custom events on the container element:

Event Data

All events include a detail property with event-specific data:

container.addEventListener('scheduling:bookingComplete', function(e) {
  console.log('Booking ID:', e.detail.bookingId);
});

Use a button that opens the booking widget in a popup when clicked.

<div
  class="scheduling-button"
  data-app-id="<APP ID>"
  data-type="<TYPE ID>"
>
</div>

<script
  async
  src="https://FRONTEND_DOMAIN/scheduling-sdk.js"
  charset="utf-8"
></script>

<div
  class="scheduling-button"
  data-app-id="h66w3DSEcsKlu8ReaclX"
  data-type="guvmAoJ4tH1tkOTj7VEx"
  data-lang="ar"
  data-button-text="احجز الآن"
>
</div>

<script
  async
  src="https://FRONTEND_DOMAIN/scheduling-sdk.js"
  charset="utf-8"
></script>

You can use your own button inside the container:

<div
  class="scheduling-button"
  data-app-id="h66w3DSEcsKlu8ReaclX"
  data-type="guvmAoJ4tH1tkOTj7VEx"
>
  <button class="my-custom-button">
    Book Appointment
  </button>
</div>

Create a popup button programmatically:

SchedulingSDK.createButton({
  container: '#my-button',
  appId: 'h66w3DSEcsKlu8ReaclX',
  typeId: 'guvmAoJ4tH1tkOTj7VEx',
  lang: 'ar',
  buttonText: 'احجز الآن',
  onReady: function() {
    console.log('Widget ready');
  },
  onBookingComplete: function(data) {
    console.log('Booking completed:', data);
  },
  onPaymentFailed: function(data) {
    console.log('Payment failed:', data);
  }
});

Or open the popup directly without a button:

SchedulingSDK.open({
  appId: 'h66w3DSEcsKlu8ReaclX',
  typeId: 'guvmAoJ4tH1tkOTj7VEx',
  lang: 'ar',
  onReady: function() {
    console.log('Widget ready');
  },
  onBookingComplete: function(data) {
    console.log('Booking completed:', data);
  },
  onPaymentFailed: function(data) {
    console.log('Payment failed:', data);
  }
});

See the Events section in the Introduction page for the full list of events dispatched by the widget.

const container = document.querySelector('.scheduling-button');

container.addEventListener('scheduling:bookingComplete', function(e) {
  console.log('Booking completed:', e.detail);
});

Embed the booking widget directly into your page as a native element.

<div
  class="scheduling-native"
  data-app-id="<APP ID>"
  data-type="<TYPE ID>"
>
</div>

<script
  async
  src="https://FRONTEND_DOMAIN/scheduling-sdk.js"
  charset="utf-8"
></script>

<div
  class="scheduling-native"
  data-app-id="h66w3DSEcsKlu8ReaclX"
  data-type="guvmAoJ4tH1tkOTj7VEx"
  data-lang="ar"
>
</div>

<script
  async
  src="https://FRONTEND_DOMAIN/scheduling-sdk.js"
  charset="utf-8"
></script>

You can also create widgets programmatically using the JavaScript API:

// Create a widget programmatically
SchedulingSDK.create({
  container: '#booking-widget',
  appId: 'h66w3DSEcsKlu8ReaclX',
  typeId: 'guvmAoJ4tH1tkOTj7VEx',
  lang: 'ar',
  onReady: function() {
    console.log('Widget ready');
  },
  onBookingComplete: function(data) {
    console.log('Booking completed:', data);
  },
  onPaymentFailed: function(data) {
    console.log('Payment failed:', data);
  }
});

Available Methods

Create Options

{
  container: '#my-widget',      // Required: selector or element
  appId: 'your-app-id',         // Required: application ID
  typeId: 'type-id',            // Optional: scheduling type ID
  lang: 'ar',                   // Optional: language code
  onReady: fn,                  // Optional: callback when widget is ready
  onBookingComplete: fn,        // Optional: callback on success
  onPaymentFailed: fn           // Optional: callback on failure
}

See the Events section in the Introduction page for the full list of events dispatched by the widget.

const container = document.querySelector('.scheduling-native');

container.addEventListener('scheduling:bookingComplete', function(e) {
  console.log('Booking completed:', e.detail);
});

Embed dashboard functionality into your external systems using Admin Widgets.

Note: Admin Widgets are different from Web Widgets. Web Widgets allow your customers to book appointments on your website. Admin Widgets allow you (the tenant) to embed dashboard pages in your internal systems.

• External CRM Integration: Embed appointment scheduling directly in your CRM system
• Custom Dashboards: Add scheduling capabilities to your internal tools
• Third-party Platforms: Integrate with other business software

Admin Widgets use iframes to embed authenticated dashboard pages:

┌─────────────────────────────────────┐
│       Your External System          │
│  ┌───────────────────────────────┐  │
│  │    Admin Widget (iframe)      │  │
│  │                               │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │   Scheduling Flow /     │  │  │
│  │  │   Availability Settings │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

Admin Widgets require authentication via postMessage API. Your parent window must:

1. Listen for the webview-ready message
2. Send refresh token via postMessage

window.addEventListener('message', function(event) {
  if (event.data.type === 'webview-ready') {
    // Widget is ready, send refresh token
    event.source.postMessage({
      refreshToken: 'your-refresh-token'
    }, '*');
  }
});

Note: You can also send accessToken instead of refreshToken, but refresh tokens are recommended as they handle expiration automatically.

• Always validate the event.origin before handling messages
• Use your organization's domain in the origin check
• Tokens are handled securely within the iframe context

window.addEventListener('message', function(event) {
  // Validate origin
  if (event.origin !== 'https://FRONTEND_DOMAIN') {
    return;
  }
  
  // Handle messages...
});

Admin Widgets dispatch events via postMessage:

Event Data Structure

{
  type: 'booking-created',
  booking: {
    // ... booking object data
  }
}

Embed the appointment scheduling flow in your external system. Supports both creating new appointments and rescheduling existing ones.

New Appointment

<iframe
  id="add-appointment-widget"
  src="https://FRONTEND_DOMAIN/webviews/add-appointment?orgId=YOUR_ORG_ID&lang=en"
  style="width: 100%; height: 600px; border: none;"
></iframe>

<script>
window.addEventListener('message', function(event) {
  const iframe = document.getElementById('add-appointment-widget');
  
  if (event.data.type === 'webview-ready') {
    // Send refresh token to the widget
    iframe.contentWindow.postMessage({
      refreshToken: 'your-refresh-token'
    }, '*');
  }
  
  if (event.data.type === 'booking-created') {
    console.log('Booking created:', event.data.booking);
  }
});
</script>

Reschedule Appointment

<iframe
  id="reschedule-widget"
  src="https://FRONTEND_DOMAIN/webviews/add-appointment?orgId=YOUR_ORG_ID&lang=en&rescheduleBookingId=BOOKING_ID"
  style="width: 100%; height: 600px; border: none;"
></iframe>

<script>
window.addEventListener('message', function(event) {
  const iframe = document.getElementById('reschedule-widget');
  
  if (event.data.type === 'webview-ready') {
    iframe.contentWindow.postMessage({
      refreshToken: 'your-refresh-token'
    }, '*');
  }
  
  if (event.data.type === 'booking-rescheduled') {
    console.log('Booking rescheduled:', event.data.booking);
  }
});
</script>

<!DOCTYPE html>
<html>
<head>
  <title>Book Appointment</title>
  <style>
    .widget-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .widget-iframe {
      width: 100%;
      height: 700px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
    }
    .status {
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 4px;
    }
    .status.success { background: #d4edda; color: #155724; }
    .status.error { background: #f8d7da; color: #721c24; }
    .status.loading { background: #fff3cd; color: #856404; }
  </style>
</head>
<body>
  <div class="widget-container">
    <h1>Book an Appointment</h1>
    
    <div id="status" class="status loading">Loading widget...</div>
    
    <!-- New appointment -->
    <iframe
      id="add-appointment-widget"
      class="widget-iframe"
      src="https://FRONTEND_DOMAIN/webviews/add-appointment?orgId=abc123&lang=en"
    ></iframe>

    <!-- Or reschedule an existing appointment -->
    <!--
    <iframe
      id="add-appointment-widget"
      class="widget-iframe"
      src="https://FRONTEND_DOMAIN/webviews/add-appointment?orgId=abc123&lang=en&rescheduleBookingId=booking456"
    ></iframe>
    -->
  </div>

  <script>
    const iframe = document.getElementById('add-appointment-widget');
    const status = document.getElementById('status');
    
    // Your refresh token (get from your auth system)
    const refreshToken = 'YOUR_REFRESH_TOKEN';
    
    window.addEventListener('message', function(event) {
      // Handle widget events
      switch (event.data.type) {
        case 'webview-ready':
          status.textContent = 'Widget ready';
          status.className = 'status';
          
          // Send refresh token
          iframe.contentWindow.postMessage({
            refreshToken: refreshToken
          }, '*');
          break;
          
        case 'booking-created':
          status.textContent = 'Appointment booked successfully!';
          status.className = 'status success';
          console.log('Booking details:', event.data.booking);
          break;
          
        case 'booking-rescheduled':
          status.textContent = 'Appointment rescheduled successfully!';
          status.className = 'status success';
          console.log('Rescheduled booking:', event.data.booking);
          break;
      }
    });
  </script>
</body>
</html>

The widget respects your organization's theme settings. To customize the iframe appearance:

/* Container styling */
.widget-iframe {
  width: 100%;
  min-height: 600px;
  max-height: 80vh;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .widget-iframe {
    height: 100vh;
    border-radius: 0;
  }
}

Embed time rules and vacation configuration in your external system.

Availability configuration is split into two widgets:

Configure resource working hours, breaks, and recurring schedules.

Quick Start

<iframe
  id="time-rules-widget"
  src="https://FRONTEND_DOMAIN/settings/timeRules?webview=true&id=RESOURCE_ID&orgId=YOUR_ORG_ID&lang=en"
  style="width: 100%; height: 700px; border: none;"
></iframe>

<script>
window.addEventListener('message', function(event) {
  const iframe = document.getElementById('time-rules-widget');
  
  if (event.data.type === 'webview-ready') {
    iframe.contentWindow.postMessage({
      refreshToken: 'your-refresh-token'
    }, '*');
  }
});
</script>

URL Parameters

Features

• Week Day Configuration: Set working hours for each day of the week
• Multiple Time Slots: Configure multiple work periods per day (e.g., morning and afternoon shifts)
• Date Range Rules: Set different schedules for specific date ranges
• Advanced Rules: Configure complex recurring patterns (requires subscription)

Configure vacations, holidays, and time off periods.

Quick Start

<iframe
  id="off-rules-widget"
  src="https://FRONTEND_DOMAIN/settings/offRules?webview=true&id=RESOURCE_ID&orgId=YOUR_ORG_ID&lang=en"
  style="width: 100%; height: 600px; border: none;"
></iframe>

<script>
window.addEventListener('message', function(event) {
  const iframe = document.getElementById('off-rules-widget');
  
  if (event.data.type === 'webview-ready') {
    iframe.contentWindow.postMessage({
      refreshToken: 'your-refresh-token'
    }, '*');
  }
});
</script>

URL Parameters

Features

• Date Range Selection: Set vacation periods with start and end dates
• Recurring Off Days: Configure recurring time off (e.g., every Friday)
• Holiday Management: Add specific holiday dates
• Advanced Patterns: Complex off-time rules (requires subscription)

<!DOCTYPE html>
<html>
<head>
  <title>Resource Availability Configuration</title>
  <style>
    .tabs { display: flex; gap: 10px; margin-bottom: 20px; }
    .tab { padding: 10px 20px; cursor: pointer; border: 1px solid #ddd; border-radius: 4px; }
    .tab.active { background: #007bff; color: white; border-color: #007bff; }
    .widget-iframe { width: 100%; height: 600px; border: 1px solid #e0e0e0; border-radius: 8px; }
    .hidden { display: none; }
  </style>
</head>
<body>
  <h1>Configure Availability</h1>
  
  <div class="tabs">
    <button class="tab active" onclick="showWidget('time-rules')">Working Hours</button>
    <button class="tab" onclick="showWidget('off-rules')">Vacations</button>
  </div>
  
  <iframe
    id="time-rules-widget"
    class="widget-iframe"
    src="https://FRONTEND_DOMAIN/settings/timeRules?webview=true&id=res456&orgId=abc123&lang=en"
  ></iframe>
  
  <iframe
    id="off-rules-widget"
    class="widget-iframe hidden"
    src="https://FRONTEND_DOMAIN/settings/offRules?webview=true&id=res456&orgId=abc123&lang=en"
  ></iframe>

  <script>
    const refreshToken = 'YOUR_REFRESH_TOKEN';
    
    function showWidget(type) {
      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
      document.querySelectorAll('.widget-iframe').forEach(w => w.classList.add('hidden'));
      
      event.target.classList.add('active');
      document.getElementById(type + '-widget').classList.remove('hidden');
    }
    
    window.addEventListener('message', function(event) {
      if (event.data.type === 'webview-ready') {
        event.source.postMessage({ refreshToken: refreshToken }, '*');
      }
    });
  </script>
</body>
</html>

Everything about your Authentication

Everything about your Availability

Public endpoints for retrieving custom field definitions.

Custom fields are categorized into:

• Resource Filters: Fields that filter available resources
• Time Adjusters: Fields that affect booking duration
• Booking Info: Fields for additional appointment information
• Customer Info: Fields for customer profile information