Add your SalesCal booking widget directly to your website so prospects can book without leaving your site.
There are two ways to embed your booking widget:
Iframe Embed - Simple HTML iframe
JavaScript Embed - Dynamic script-based embed
The simplest way to embed your booking page.
<iframe
src="https://yourdomain.com/book/[user-id]/[event-slug]"
width="100%"
height="700"
frameborder="0"
style="border: none; min-height: 700px;">
</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>
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
A more flexible embedding option with auto-resizing.
<div id="salescal-booking"></div>
<script
src="https://yourdomain.com/embed.js"
data-event-id="[event-id]"
data-container="salescal-booking">
</script>
Auto-resizes to content height
Seamless integration
Communication between widget and parent page
Pros:
Auto-resizing
Better user experience
More integration options
Cons:
Requires JavaScript enabled
More complex setup
May conflict with some website scripts
Go to Events and select your event
Click Share or find the embed section
Copy the embed code
Paste into your website HTML
Customize the embed behavior with URL parameters:
Parameter | Description | Example |
| Pre-fill name field |
|
| Pre-fill email field |
|
| Pre-fill phone field |
|
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>
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>
The booking widget uses your configured branding:
Company logo
Button colors
Custom messaging
Configure these in event settings under Customization.
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>
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>
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()">×</span>
<iframe src="..." width="100%" height="700" frameborder="0"></iframe>
</div>
</div>
Add an HTML block to your page
Paste the iframe code
Adjust width/height as needed
Preview and publish
If using a shortcode plugin:
[iframe src="https://yourdomain.com/book/abc123/discovery-call" width="100%" height="700"]
Add a Code Block to your page
Paste the iframe code
Set display settings
Save and publish
Add an HTML iframe element
Configure the iframe URL
Set dimensions
Publish changes
Adjust the height attribute
Minimum recommended: 600px
May need 800px+ for longer forms
Verify the URL is correct
Check for HTTPS vs HTTP mismatch
Ensure no ad blockers are interfering
Use responsive iframe code
Test on actual mobile devices
Consider using JavaScript embed for auto-sizing
Increase iframe height
Check for padding/margin conflicts
Verify container width is sufficient
Some features may not work across different domains
Contact support if experiencing persistent issues
Always use HTTPS URLs for embeds to:
Ensure secure data transmission
Avoid browser security warnings
Maintain user trust
Your embed may be configured to only work on specific domains. Contact support if you need to add allowed domains.
Booking Flow Overview - Understand the full booking experience
Customization & Branding - Style your embedded widget
Creating Events - Set up the event to embed