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.
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.
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.
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.
<script src="https://app.salescal.ai/embed.js" data-event-id="YOUR_EVENT_ID"></script>
<div id="scheduler-widget-YOUR_EVENT_ID"></div>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
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 |
| Pre-fill the first name |
|
| Pre-fill the last name |
|
| Pre-fill the full name |
|
| Pre-fill the email |
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 protected]"
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">
</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