Omnicasa

Appointment Widget

Appointment Widget Documentation

Complete guide to embedding the Omnicasa Appointment Widget and checking appointment availability via HTTP from your own application.

Quick Start

Get the appointment widget up and running in minutes

API Key Required

To use this widget, you'll need an API key from Omnicasa. Request one at developers.omnicasa.com.

Step 1: Include the Widget Script

Add the widget script to your HTML page. It can be placed in the <head>, before the closing body tag, or anywhere else — the script automatically waits for the page to load before initializing:

HTML Script Include

<script src="https://appointment-widget.omnicasa.com/widget.js"></script>

A minified version is also available for better performance:

Minified Version

<script src="https://appointment-widget.omnicasa.com/widget.min.js"></script>

Step 2: Add the Widget Element

Place a button or div element with the required ID and data attributes. Use a button for modal mode (default) or div for inline mode:

Modal Mode (Default - Button Click Opens Popup)

<button id="contact-appointment-plugin"
        data-key="YOUR_API_KEY"
        data-property-id="12345"
        data-email="contact@example.com"
        data-language="en">
  Book Appointment
</button>

Inline Mode (Embedded Directly on Page)

<div id="contact-appointment-plugin"
     data-mode="inline"
     data-key="YOUR_API_KEY"
     data-property-id="12345"
     data-email="contact@example.com"
     data-language="en">
</div>

Step 3: Customize (Optional)

Add additional data attributes to customize the widget's appearance and behavior. See the Data Attributes tab for a complete reference.

That's it!

The widget will automatically check for appointments and display the booking interface when users click the button.

Auto-Open via URL Parameter

Automatically open the widget without requiring a button click

You can automatically open the widget on page load by adding the openAppointment=true parameter to the URL:

URL with Auto-Open Parameter

https://example.com/property/12345?openAppointment=true

Use Cases:

Direct links from email campaigns
QR codes that immediately show the booking widget
Marketing links that bypass the initial button click

Behavior

The widget auto-opens approximately 150ms after page load. This only applies to modal mode - inline widgets are already visible by default.

How It Works

Understanding the widget's behavior and lifecycle

🔍

Detection

Widget automatically finds elements with the required ID

📅

Availability Check

Calls GET /api/appointments with propertyId, lang, and key. See the API Requests tab to call this yourself.

🚀

Activation

Creates an interactive button and booking interface

Need help or have questions? Contact supportnl@omnicasa.com or supportftr@omnicasa.com

Widget Version 2.1.0 • Documentation last updated: Loading...