Embedding on Your Website

Add your SalesCal booking widget directly to your website so prospects can book without leaving your site.

SmartFlow events have a Share button in the top bar of the event builder. Click it to open the Share panel, which has three tabs. All options become available once you publish the event.

Booking Link

A direct URL your prospects can visit to open the booking form. Copy it to share by email, DM, or on your bio link page, or click Open booking page to preview it live.

Booking Form Embed (inline)

Embeds the booking form directly on your web page so prospects never leave your site. Copy the snippet and paste it into your page's HTML wherever you want the form to appear.

<script src="https://app.salescal.ai/embed.js" data-event-id="YOUR_EVENT_ID"></script>
<div id="scheduler-widget-YOUR_EVENT_ID"></div>

The form loads inline and sizes to its content.

Adds a branded button to your page. When a visitor clicks it, the booking form opens as a pop-up overlay — no page navigation required. This is ideal for landing pages, sticky headers, or any place where you want a clean CTA without a full embedded form.

Customizing the button

In the Modal Embed tab you can configure:

Button text — what the button says (e.g. "Book a call", "Schedule your demo")
Button color — any hex color; SalesCal automatically picks readable text (dark or light) based on your chosen background
Icon — optional icon displayed to the left of the text: Calendar, Phone, Video, Clock, Arrow, and more, or no icon
Hover effect — how the button animates when hovered: None, Lift (rises slightly), Scale (grows), or Glow (outer glow matching the button color)

A live preview updates as you make changes. When you're happy, copy the generated snippet and paste it into your page.

How it works on your site

The snippet is a single <script> tag. It renders the button immediately using the settings baked into the snippet — no extra requests, no configuration file to maintain. Clicking the button opens the booking form in an overlay:

On desktop (screens 720px and wider): a centered dialog at a fixed size, so the form never jumps as the prospect moves between steps.
On mobile (under 720px): a full-screen takeover with a close button in the corner and a progress bar at the top.

Saving your settings

Your button choices (text, color, icon, hover) are saved automatically. The next time you open the Share panel, the Modal Embed tab restores your last-saved configuration.

Embedding Options (Classic Forms)

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

<script src="https://app.salescal.ai/embed.js" data-event-id="YOUR_EVENT_ID"></script>
<div id="scheduler-widget-YOUR_EVENT_ID"></div>

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

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

Pre-filling the Form with URL Parameters

You can pre-fill the prospect's name and email by adding parameters to the booking URL. This works on both the standard stepped form and the slide (Typeform-style) form, whether the form uses a single full-name field or separate first/last name fields.

Parameter	Description	Example
`?first_name=`	Pre-fill the first name	`?first_name=John`
`?last_name=`	Pre-fill the last name	`?last_name=Doe`
`?name=`	Pre-fill the full name	`?name=John%20Doe`
`?email=`	Pre-fill the email	`?email=john@example.com`

How the name parameters map to the form:

If the event uses first and last name fields, pass first_name and last_name. If you only have a full name, it's split on the first space (first word = first name, the rest = last name).
If the event uses a single full-name field, pass name. If you only have first_name / last_name, they're combined into the full name automatically.

Anything the visitor has already typed is never overwritten, and values are URL-encoded (spaces become %20, @ stays as-is or becomes %40).

Example with pre-filled data:

<iframe
  src="https://yourdomain.com/book/abc123/discovery-call?first_name=John&last_name=Doe&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

Add an HTML block to your page
Paste the iframe code
Adjust width/height as needed
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

Add a Code Block to your page
Paste the iframe code
Set display settings
Save and publish

Wix Integration

Add an HTML iframe element
Configure the iframe URL
Set dimensions
Publish changes

Troubleshooting

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

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.

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