Appointment Booking Widget Documentation

Complete guide to integrating and customizing the Appointment Booking widget on your website. Accept bookings 24/7 automatically.

Live Demo Create Widget

Quick Start

Get your Appointment Booking widget up and running in just a few minutes:

1. Create Your Widget Instance

Start by creating a new widget instance to manage your bookings:

Create New Widget Instance

2. Configure Services & Working Hours

Define your services (consultations, appointments, sessions) with durations and pricing. Set your working hours and breaks to control availability.

3. Customize Appearance

Choose from 10+ professional color themes, 130+ fonts, and customize display type, animations, and styling to match your brand perfectly.

4. Get Embed Code

Copy the generated embed code and paste it into your website where you want the booking widget to appear. Works with any website platform.

5. Start Accepting Bookings

Your customers can now book appointments 24/7. You'll receive instant email notifications for every new booking.

What's Included
  • Smart Scheduling: Automatic conflict prevention and capacity management
  • 10+ Themes: Professional color schemes ready to use
  • 130+ Fonts: Complete typography control
  • Email Notifications: Instant booking confirmations
  • Calendar Export: .ics files for customer calendars
  • Timezone Support: Automatic timezone conversion
  • Custom CSS: Complete styling control

Key Features

Everything you need to accept bookings professionally:

Smart Scheduling

Automatic conflict detection, capacity limits, and working hours validation.

10+ Color Themes

Professional themes from medical to corporate to salon styles.

100% Responsive

Perfect on all devices - desktop, tablet, and mobile.

Email Notifications

Instant notifications for you and confirmation emails for customers.

Flexible Time Slots

Custom working hours, breaks, and configurable time intervals.

Timezone Support

Automatic timezone detection and conversion for global bookings.

Calendar Export

.ics file generation for Google, Apple, and Outlook calendars.

Parallel Bookings

Support multiple simultaneous bookings for group sessions.

No Coding Required

Simple copy-paste installation on any website platform.

Custom CSS

Advanced customization with custom CSS support.

Spam Protection

Built-in rate limiting and validation to prevent abuse.

Analytics Ready

Track booking patterns and optimize your schedule.

Embedding Methods

Multiple ways to add the booking widget to your website:

1. JavaScript Embed (Recommended)

The most flexible method that loads the widget dynamically:

Basic Embed: <script src="https://www.widgetminds.com/widgets/appointment-booking/embed/script/YOUR_IDENTIFIER"></script>
Pro Tip: Replace YOUR_IDENTIFIER with your actual widget instance identifier found in the embed code section.

2. IFrame Embed

Isolated embedding for maximum compatibility:

IFrame Embed: <iframe src="https://www.widgetminds.com/widgets/appointment-booking/embed/iframe/YOUR_IDENTIFIER" width="100%" height="600" frameborder="0"></iframe>

3. Direct Link

Full-page booking experience:

Direct Link: <a href="https://www.widgetminds.com/widgets/appointment-booking/book/YOUR_IDENTIFIER">Book Appointment</a>

Getting Your Embed Code

  1. Go to your widget instance dashboard
  2. Click "Get Embed Code"
  3. Choose your preferred embedding method
  4. Copy and paste the code into your website
Works With
  • WordPress, Wix, Squarespace, Weebly
  • Shopify, BigCommerce, Magento
  • Custom HTML/CSS websites
  • React, Vue, Angular applications
  • Any platform that accepts HTML/JavaScript

Display Types

Choose how your booking widget appears on your website:

Inline Form

Embedded directly in your page content. Perfect for dedicated booking pages.

display_type=inline_form
Inline Button

Button that expands to show booking form inline when clicked.

display_type=inline_button
Floating Button

Floating button in corner that opens modal overlay. Great for all pages.

display_type=floating_button

Floating Button Positions

When using floating button, choose the corner position:

  • bottom-right - Default, most common
  • bottom-left - Alternative bottom position
  • top-right - Upper right corner
  • top-left - Upper left corner

Color Themes

Choose from 10 professionally designed color themes to match your brand:

Professional Blue
color_theme=professional_blue

Clean and trustworthy, perfect for corporate and professional services.

Medical Teal
color_theme=medical_teal

Healthcare-friendly, ideal for doctors, dentists, and clinics.

Wellness Green
color_theme=wellness_green

Fresh and organic, great for wellness, fitness, and health coaches.

Salon Purple
color_theme=salon_purple

Luxurious and creative, perfect for salons, spas, and beauty services.

Corporate Gray
color_theme=corporate_gray

Professional neutrality, suitable for legal and financial services.

Warm Orange
color_theme=warm_orange

Energetic and friendly, great for coaching and training services.

Elegant Rose
color_theme=elegant_rose

Sophisticated and romantic, ideal for wedding and event planning.

Ocean Breeze
color_theme=ocean_breeze

Cool and calming, excellent for therapy and counseling services.

Dark Mode
color_theme=dark_mode

Modern dark theme, perfect for tech and creative professionals.

Minimalist Mono
color_theme=minimalist_mono

Clean monochrome design, suitable for minimalist brands.

Custom Colors Available

Beyond these themes, you can create your own custom color scheme using the Custom CSS feature or by specifying individual color parameters.

Customization Options

Fine-tune every aspect of your booking widget:

Typography

  • Font Family: Choose from 130+ Google Fonts organized in 9 categories
  • Font Categories: Popular, Sans-Serif, Serif, Display, Monospace, Professional, Creative, International, Vintage
  • System Fallbacks: Automatic fallback to system fonts for reliability

Visual Style

  • Border Radius: 0px (Sharp), 4px, 8px, 12px, 16px, or 999px (Fully Rounded)
  • Card Shadow: None, Small, Medium, Large, Extra Large
  • Animation Style: None, Fade, Slide Up, Slide Down, Zoom In

Booking Behavior

  • Minimum Notice Hours: How far in advance bookings must be made (1-72 hours)
  • Booking Days Ahead: Maximum days in future for booking (7-90 days)
  • Time Slot Interval: 15, 30, or 60 minutes
  • Parallel Bookings: Enable multiple simultaneous bookings (capacity: 1-10)

Advanced Features

  • Show Timezone: Display timezone selector for international bookings
  • Require Phone: Make phone number mandatory
  • Custom CSS: Add your own CSS for complete control
  • Email Customization: Customize notification email templates
Example Custom CSS:
/* Change primary button color */ .appt-booking-button { background-color: #ff6600 !important; } /* Adjust card spacing */ .appt-booking-card { padding: 2rem !important; margin-bottom: 2rem !important; } /* Custom font size for headers */ .appt-booking-header h2 { font-size: 2rem !important; }

Managing Services

Services are the types of appointments you offer. Configure them to match your business:

Creating a Service

  1. Go to your widget instance dashboard
  2. Click "Manage Services"
  3. Click "Add New Service"
  4. Fill in the service details
  5. Save and activate

Service Fields

Field Description Example
Service Name The name displayed to customers Initial Consultation
Description Optional details about the service 30-minute discovery call to discuss your needs
Duration How long the appointment lasts (15-480 minutes) 30 minutes, 1 hour, 2 hours
Price Optional price to display (informational only) $50, Free, By Quote
Color Color coding for calendar display #3b82f6, #10b981, #f97316
Active Status Whether service is available for booking Active / Inactive
Service Limits: You can create up to 50 services per widget instance. Inactive services don't count toward booking limits.

Best Practices

  • Use clear, descriptive service names
  • Set realistic durations with buffer time for preparation
  • Include pricing if applicable to set expectations
  • Use color coding to visually organize different service types
  • Add descriptions to help customers choose the right service

Working Hours

Define when you're available to accept bookings:

Setting Working Hours

  1. Navigate to "Manage Hours" in your instance dashboard
  2. Select each day of the week
  3. Set start and end times
  4. Add breaks if needed
  5. Save your schedule

Working Hours Features

Per-Day Configuration

Set different hours for each day of the week. Perfect for flexible schedules.

Break Times

Add lunch breaks and other unavailable periods within your working hours.

Closed Days

Mark specific days as unavailable (weekends, holidays, etc.).

Time Intervals

Choose 15, 30, or 60-minute booking slots based on your needs.

Example Schedule

Monday - Friday: 9:00 AM - 5:00 PM Break: 12:00 PM - 1:00 PM Saturday: 10:00 AM - 2:00 PM Sunday: Closed
Timezone Aware: All times are stored in your configured timezone. Customers booking from different timezones will see converted times automatically.

Managing Bookings

View, manage, and track all your appointments in one place:

Booking Dashboard

Access your booking dashboard to see:

  • Upcoming Bookings: All confirmed appointments
  • Past Bookings: Historical appointment data
  • Cancelled Bookings: Track cancellations
  • Booking Details: Customer info, service, date/time, notes

Booking Information

Each booking contains:

Information Description
Customer Name Full name provided during booking
Email Address For confirmations and reminders
Phone Number Contact number (if required)
Service Type Which service was booked
Date & Time Scheduled appointment time
Duration Length of appointment
Customer Notes Any special requests or information
Status Confirmed, Cancelled, Completed
Booking ID Unique reference number

Booking Actions

Confirm

Verify booking details

Cancel

Cancel appointments if needed

Export

Download booking data

Automatic Conflict Prevention: The system automatically prevents double-booking and validates availability before accepting appointments.

Email Notifications

Stay informed with automatic email notifications for all booking activity:

Notification Types

Owner Notifications
  • New booking received
  • Booking cancelled by customer
  • Booking modified
Customer Notifications
  • Booking confirmation with details
  • Calendar file (.ics) attachment
  • Cancellation confirmation

Email Configuration

Customize your notification emails:

  • From Name: Your business name
  • From Email: Your contact email address
  • Subject Lines: Customizable per notification type
  • Email Templates: Professional HTML templates included

Calendar File (.ics) Export

Every booking confirmation includes a calendar file attachment that customers can:

  • Import into Google Calendar
  • Add to Apple Calendar (iOS/macOS)
  • Import into Outlook
  • Use with any iCal-compatible calendar app
Reduce No-Shows: Calendar exports help customers remember their appointments, reducing no-show rates significantly.

Timezone Support

Accept bookings from customers anywhere in the world with automatic timezone handling:

How It Works

1. Set Your Timezone

Configure your business timezone in widget settings

2. Automatic Detection

System detects customer's timezone automatically

3. Seamless Conversion

Times are converted and displayed correctly for both parties

Timezone Features

  • Automatic Detection: Customer timezone detected from browser
  • Manual Selection: Optional timezone selector for customers
  • Timezone Display: Show/hide timezone selector in settings
  • DST Handling: Automatic daylight saving time adjustments
  • Global Coverage: Supports all worldwide timezones

Example Scenario

Your Business: New York (EST - UTC-5) Working Hours: 9:00 AM - 5:00 PM EST Customer in London: (GMT - UTC+0) Sees available times: 2:00 PM - 10:00 PM GMT Customer in Tokyo: (JST - UTC+9) Sees available times: 11:00 PM - 7:00 AM JST (next day) All bookings stored in UTC and converted for display.
Important: Always verify your timezone setting is correct in widget settings to ensure accurate booking times.

URL Parameters

Customize widget behavior and appearance using URL parameters:

Display & Layout Parameters

Parameter Type Description Options
display_type string How the widget appears inline_form, inline_button, floating_button
button_position string Floating button position (if applicable) bottom-right, bottom-left, top-right, top-left
color_theme string Pre-defined color theme professional_blue, medical_teal, wellness_green, salon_purple, etc.
font_family string Font for the widget Inter, Roboto, Poppins, Montserrat, etc. (130+ options)
border_radius integer Corner roundness in pixels 0, 4, 8, 12, 16, 999
card_shadow string Card shadow intensity none, sm, medium, lg, xl
animation_style string Animation effect none, fade, slide_up, slide_down, zoom_in

Behavior Parameters

Parameter Type Description Example
show_timezone boolean Show timezone selector 1 (show) or 0 (hide)
preselect_service integer Pre-select a specific service ID 5 (service ID)
hide_price boolean Hide service pricing 1 (hide) or 0 (show)

Example Usage

Basic Embed with Parameters:
<script src="https://www.widgetminds.com/widgets/appointment-booking/embed/script/YOUR_ID ?display_type=floating_button &button_position=bottom-right &color_theme=salon_purple &font_family=Poppins"></script>

Inline Form with Custom Styling:
<script src="https://www.widgetminds.com/widgets/appointment-booking/embed/script/YOUR_ID ?display_type=inline_form &color_theme=medical_teal &border_radius=16 &card_shadow=lg &animation_style=fade"></script>

Pre-select Service:
<script src="https://www.widgetminds.com/widgets/appointment-booking/embed/script/YOUR_ID ?preselect_service=5 &show_timezone=1"></script>
Override Priority: URL parameters override the default settings configured in your widget dashboard, allowing you to create multiple variations from one instance.

Responsive Design

The widget automatically adapts to all screen sizes for perfect user experience:

Breakpoints

Mobile (< 768px)
  • Single column layout
  • Full-width form elements
  • Touch-optimized buttons
  • Stacked date/time selectors
Tablet (768px - 1024px)
  • Optimized two-column layout
  • Larger touch targets
  • Enhanced calendar view
  • Improved spacing
Desktop (> 1024px)
  • Full feature layout
  • Side-by-side elements
  • Enhanced date picker
  • Optimal information density

Mobile Features

  • Touch Optimization: Large, easy-to-tap buttons and controls
  • Native Date Pickers: Uses device native date/time inputs on mobile
  • Scroll Optimization: Smooth scrolling and proper viewport handling
  • Fast Loading: Optimized assets for mobile networks
Tested On: The widget is tested on iOS Safari, Chrome Mobile, Samsung Internet, and all major mobile browsers for consistent experience.

Troubleshooting

Common issues and their solutions:

Possible Solutions:
  • Verify the embed code is correctly pasted in your HTML
  • Check that your website allows external JavaScript
  • Ensure your widget instance is active
  • Try using iframe embed method instead of script
  • Check browser console for JavaScript errors
  • Verify the identifier in your embed code is correct

Check These Settings:
  • Verify working hours are configured for the selected day
  • Ensure at least one service is active
  • Check that minimum notice hours haven't blocked all slots
  • Verify the date range settings (max days ahead)
  • Check if all slots are already booked
  • Review timezone settings for accuracy

Troubleshooting Steps:
  • Check spam/junk folder in your email
  • Verify the notification email address in settings
  • Ensure notification settings are enabled
  • Check your email server isn't blocking our emails
  • Whitelist our sending domain in your email settings
  • Test with a different email address

Solutions:
  • Use iframe embedding method for complete style isolation
  • Add custom CSS to override specific styles
  • Change the color theme to better match your site
  • Adjust border radius and shadow settings
  • Use CSS specificity to target widget elements
  • Contact support for custom CSS assistance

Timezone Fixes:
  • Verify your business timezone is correctly set in settings
  • Enable "Show Timezone" option for customer clarity
  • Check that working hours match your timezone
  • Ensure customer's browser has correct timezone
  • Review booking confirmations for time accuracy
  • Test bookings from different timezones

Performance Tips:
  • Ensure your website hosting is fast and reliable
  • Check your internet connection speed
  • Limit the number of custom fonts loaded
  • Reduce custom CSS complexity if applicable
  • Use browser caching properly
  • Consider using a CDN for your website

Common Causes:
  • Check if time slot is still available (someone else may have booked)
  • Verify customer information is complete and valid
  • Ensure email address format is correct
  • Check that parallel booking limit hasn't been reached
  • Review minimum notice hours requirement
  • Verify service duration fits within working hours
Still Need Help?

Can't find a solution? We're here to help!

Try Live Demo Create Test Instance