Embedding on Your Website

Embedding Options

There are two ways to embed your booking widget:

1. Iframe Embed - Simple HTML iframe
2. JavaScript Embed - Dynamic script-based embed

Option 1: Iframe Embed

The simplest way to embed your booking page.

Basic Iframe Code

<iframe
  src="https://yourdomain.com/book/[user-id]/[event-slug]"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none; min-height: 700px;">
</iframe>

Responsive Iframe

For better mobile support:

<div style="position: relative; width: 100%; padding-bottom: 100%; min-height: 600px;">
  <iframe
    src="https://yourdomain.com/book/[user-id]/[event-slug]"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    frameborder="0">
  </iframe>
</div>

Iframe Pros & Cons

Pros:

• Simple to implement
• Works on any website
• No JavaScript required

Cons:

• Fixed height (may need adjustment)
• Can't auto-resize to content
• May show scrollbars

Option 2: JavaScript Embed

A more flexible embedding option with auto-resizing.

Embed Code

<div id="salescal-booking"></div>
<script
  src="https://yourdomain.com/embed.js"
  data-event-id="[event-id]"
  data-container="salescal-booking">
</script>

JavaScript Embed Features

• Auto-resizes to content height
• Seamless integration
• Communication between widget and parent page

JavaScript Pros & Cons

Pros:

• Auto-resizing
• Better user experience
• More integration options

Cons:

• Requires JavaScript enabled
• More complex setup
• May conflict with some website scripts

Getting Your Embed Code

1. Go to Events and select your event
2. Click Share or find the embed section
3. Copy the embed code
4. Paste into your website HTML

Embed URL Parameters

Customize the embed behavior with URL parameters:

Example with pre-filled data:

<iframe
  src="https://yourdomain.com/book/abc123/discovery-call?name=John%20Doe&email=john@example.com"
  width="100%"
  height="700"
  frameborder="0">
</iframe>

Styling the Embed

Container Styling

Style the container around your embed:

<div style="max-width: 800px; margin: 0 auto; padding: 20px;">
  <iframe src="..." width="100%" height="700" frameborder="0"></iframe>
</div>

Matching Your Site

The booking widget uses your configured branding:

• Company logo
• Button colors
• Custom messaging

Configure these in event settings under Customization.

Common Embedding Scenarios

Landing Page

Center the booking widget as the main CTA:

<section class="booking-section">
  <h2>Schedule Your Free Consultation</h2>
  <p>Choose a time that works for you.</p>
  <div class="booking-container">
    <iframe src="..." width="100%" height="700" frameborder="0"></iframe>
  </div>
</section>

Contact Page

Add alongside other contact methods:

<div class="contact-options">
  <div class="contact-form">
    {/* Your contact form */}
  </div>
  <div class="booking-widget">
    <h3>Or Book a Call</h3>
    <iframe src="..." width="100%" height="700" frameborder="0"></iframe>
  </div>
</div>

Popup/Modal

Trigger booking in a modal:

<button onclick="openBookingModal()">Book a Call</button>

<div id="booking-modal" style="display: none;">
  <div class="modal-content">
    <span onclick="closeBookingModal()">&times;</span>
    <iframe src="..." width="100%" height="700" frameborder="0"></iframe>
  </div>
</div>

WordPress Integration

Using HTML Block

1. Add an HTML block to your page
2. Paste the iframe code
3. Adjust width/height as needed
4. Preview and publish

Using Shortcode Plugin

If using a shortcode plugin:

[iframe src="https://yourdomain.com/book/abc123/discovery-call" width="100%" height="700"]

Squarespace Integration

1. Add a Code Block to your page
2. Paste the iframe code
3. Set display settings
4. Save and publish

Wix Integration

1. Add an HTML iframe element
2. Configure the iframe URL
3. Set dimensions
4. Publish changes

Troubleshooting

Widget Too Tall/Short

• Adjust the height attribute
• Minimum recommended: 600px
• May need 800px+ for longer forms

Widget Not Loading

• Verify the URL is correct
• Check for HTTPS vs HTTP mismatch
• Ensure no ad blockers are interfering

Mobile Display Issues

• Use responsive iframe code
• Test on actual mobile devices
• Consider using JavaScript embed for auto-sizing

Scrollbar Appears

• Increase iframe height
• Check for padding/margin conflicts
• Verify container width is sufficient

Cross-Origin Errors

• Some features may not work across different domains
• Contact support if experiencing persistent issues

Security Considerations

HTTPS Required

Always use HTTPS URLs for embeds to:

• Ensure secure data transmission
• Avoid browser security warnings
• Maintain user trust

Domain Restrictions

Your embed may be configured to only work on specific domains. Contact support if you need to add allowed domains.

Related Guides

• Booking Flow Overview - Understand the full booking experience
• Customization & Branding - Style your embedded widget
• Creating Events - Set up the event to embed