Bookme Iframe Integration Guide

A simple guide for embedding Bookme appointment scheduling using standard HTML iframes.

Table of Contents

• Quick Start
• Basic Iframe Setup
• URL Parameters
• Responsive Design
• Examples
• Best Practices
• Troubleshooting

Quick Start

Basic Iframe Embedding

<iframe
  src="https://bookme.botsplash.com/your-account/agent-name"
  width="100%"
  height="600px"
  frameborder="0"
  title="Book Appointment">
</iframe>

With Custom Styling

<iframe
  src="https://bookme.botsplash.com/your-account/agent-name"
  width="100%"
  height="600px"
  frameborder="0"
  title="Book Appointment"
  style="border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
</iframe>

Basic Iframe Setup

Required URL Structure

The iframe source URL follows this pattern:

https://bookme.botsplash.com/{account}/{agent-or-team}/{meeting-type}?parameters

Components:

• {account} - Your Bookme account name (required)
• {agent-or-team} - Agent name OR team/{team-name} (required)
• {meeting-type} - Specific meeting slug (optional)
• ?parameters - Query parameters for visitor data and options (optional)

Examples

Agent booking:

https://bookme.botsplash.com/botsplash/demo2

Team booking:

https://bookme.botsplash.com/botsplash/team/support

Specific meeting type:

https://bookme.botsplash.com/botsplash/demo2/consultation

URL Parameters

Visitor Information

Pre-populate visitor data using query parameters:

Parameter	Description	Example
firstName	Visitor’s first name	firstName=John
lastName	Visitor’s last name	lastName=Doe
email	Visitor’s email	email=john.doe@example.com
phoneNumber	Visitor’s phone	phoneNumber=+1234567890
clientVisitorId	Your internal ID	clientVisitorId=user-123

Display Options

Parameter	Description	Example
hideMeetingInfo	Hide meeting details	hideMeetingInfo=true

Custom Attributes

Add any custom data as URL parameters:

https://bookme.botsplash.com/botsplash/demo2?firstName=John&lastName=Doe&email=john@example.com&company=ACME&source=website

Responsive Design

Basic Responsive Iframe

<style>
.booking-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.booking-iframe {
  width: 100%;
  min-height: 600px;
  border: 0;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .booking-iframe {
    min-height: 500px;
  }
}
</style>

<div class="booking-container">
  <iframe
    class="booking-iframe"
    src="https://bookme.botsplash.com/botsplash/demo2"
    title="Book Appointment">
  </iframe>
</div>

Mobile-Optimized

<style>
.mobile-booking {
  width: 100vw;
  height: 100vh;
  margin-left: calc(50% - 50vw);
  border: 0;
}

@media (min-width: 769px) {
  .mobile-booking {
    width: 800px;
    height: 600px;
    margin-left: auto;
    border-radius: 8px;
  }
}
</style>

<iframe
  class="mobile-booking"
  src="https://bookme.botsplash.com/botsplash/demo2"
  title="Book Appointment">
</iframe>

Examples

Basic Agent Booking

<iframe
  src="https://bookme.botsplash.com/botsplash/demo2"
  width="100%"
  height="600px"
  frameborder="0"
  title="Schedule with Demo Agent">
</iframe>

Team Booking with Visitor Data

<iframe
  src="https://bookme.botsplash.com/botsplash/team/support?firstName=Jane&lastName=Smith&email=jane.smith@company.com"
  width="100%"
  height="600px"
  frameborder="0"
  title="Schedule with Support Team">
</iframe>

Insurance Agent Consultation

<iframe
  src="https://bookme.botsplash.com/financial-services/insurance-agent/consultation?firstName=Michael&lastName=Johnson&email=michael.j@example.com&policyType=auto&currentProvider=StateFarm&renewalDate=2025-03-15"
  width="100%"
  height="650px"
  frameborder="0"
  style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
  title="Insurance Consultation Booking">
</iframe>

Dynamic URL Generation

function generateBookingURL(clientData) {
  const baseUrl = 'https://bookme.botsplash.com/financial-services/mortgage-advisor';
  const params = new URLSearchParams({
    firstName: clientData.firstName,
    lastName: clientData.lastName,
    email: clientData.email,
    phoneNumber: clientData.phone,
    loanAmount: clientData.requestedAmount,
    propertyType: clientData.propertyType,
    creditScore: clientData.creditRange,
    source: 'website-form'
  });

  return `${baseUrl}?${params.toString()}`;
}

// Usage
const clientData = getClientFromForm();
document.getElementById('booking-iframe').src = generateBookingURL(clientData);

Container with Loading State

<style>
.booking-wrapper {
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: 8px;
  overflow: hidden;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.booking-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

<div class="booking-wrapper">
  <div class="loading-overlay" id="loading">
    <p>Loading appointment scheduler...</p>
  </div>
  <iframe
    class="booking-iframe"
    src="https://bookme.botsplash.com/botsplash/demo2"
    title="Book Appointment"
    onload="document.getElementById('loading').style.display='none'">
  </iframe>
</div>

Best Practices

1. URL Encoding

Always encode URL parameters properly:

// ✅ Good - Properly encoded
const email = encodeURIComponent('user+test@example.com');
const url = `https://bookme.botsplash.com/account/agent?email=${email}`;

// ❌ Bad - Not encoded
const url = 'https://bookme.botsplash.com/account/agent?email=user+test@example.com';

2. Iframe Attributes

<!-- ✅ Good - Complete attributes -->
<iframe
  src="https://bookme.botsplash.com/account/agent"
  width="100%"
  height="600px"
  frameborder="0"
  title="Descriptive title for accessibility"
  loading="lazy">
</iframe>

<!-- ❌ Missing accessibility -->
<iframe src="https://bookme.botsplash.com/account/agent"></iframe>

3. Error Handling

<iframe
  src="https://bookme.botsplash.com/account/agent"
  width="100%"
  height="600px"
  frameborder="0"
  title="Book Appointment"
  onerror="handleIframeError()">
</iframe>

<script>
function handleIframeError() {
  console.error('Failed to load booking iframe');
  document.getElementById('booking-container').innerHTML =
    '<p>Booking unavailable. Please try again later or contact us directly.</p>';
}
</script>

Troubleshooting

Common Issues

Iframe Not Loading

Symptoms: Blank iframe or loading indefinitely.

Solutions:

• Verify the account and agent/team names are correct
• Check browser console for errors
• Ensure the URL is properly formatted
• Test the URL directly in a browser tab

Parameter Not Working

Symptoms: Visitor data not pre-populated.

Solutions:

• Ensure parameters are properly URL-encoded
• Check parameter spelling matches exactly
• Verify special characters are encoded
• Test with minimal parameters first

Size Issues

Symptoms: Content cut off or too much white space.

Solutions:

<!-- Set minimum height -->
<iframe style="min-height: 500px; height: 600px;" ...></iframe>

<!-- Use viewport units for full-screen -->
<iframe style="width: 100vw; height: 100vh;" ...></iframe>

<!-- Responsive approach -->
<style>
@media (max-width: 768px) {
  .booking-iframe { height: 80vh; }
}
</style>

Browser Compatibility

• All modern browsers support iframe embedding
• For older browsers, ensure HTTPS is used
• Test across different devices and screen sizes

Support

For additional support:

• Verify URL parameters are correctly formatted
• Test the iframe URL directly in a browser
• Check for JavaScript errors in browser console
• Email support@botsplash.com with specific implementation details

---

Comparison: Iframe vs Widget SDK

Feature	Direct Iframe	Widget SDK
Setup Complexity	Simple HTML	Requires JavaScript
Event Handling	Limited	Full callback system
Dynamic Updates	Manual URL changes	Programmatic control
Height Management	Fixed height	Auto-adjusting
Custom Styling	External CSS only	Injected CSS support
Best For	Simple integrations	Advanced implementations

Choose Direct Iframe for quick, simple integrations. Choose Widget SDK for advanced features and programmatic control.

---

This documentation covers direct iframe integration. For advanced features, see the Widget SDK Documentation.