---
title: "Embedding on Your Website"
description: "Add your SalesCal booking widget directly to your website so prospects can book without leaving your site."
url: https://help.salescal.ai/en/articles/7-embedding-on-your-website
collection: "Booking Widget"
updated: 2026-11-06
language: en
---

# Embedding on Your Website

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

## Sharing a SmartFlow Form

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.

```html
<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.

### Booking Form Modal Embed (pop-up button)

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

```html
<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:

```html
<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

```html
<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

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
    

## 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.

<table data-id="82c23552-f5c0-4e11-8b7e-d91df5f5cca2" style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p data-id="922fd660-34ff-49f1-9a54-40fd7f8213ec">Parameter</p></td><td colspan="1" rowspan="1"><p data-id="44cdaace-c5b8-475f-bbaf-55642d1e84f6">Description</p></td><td colspan="1" rowspan="1"><p data-id="1e834c36-ccc4-460d-94fd-da0ceb6a13a4">Example</p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="17b67ccb-4121-419f-aa18-d93e27b0f063"><code>?first_name=</code></p></td><td colspan="1" rowspan="1"><p data-id="5fd3f80f-8c09-454e-81c4-749f575211ee">Pre-fill the first name</p></td><td colspan="1" rowspan="1"><p data-id="71c04d15-e45e-4ecb-9509-41119ece1de2"><code>?first_name=John</code></p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="b864b7c0-f35c-42d8-98c2-823c599f62e3"><code>?last_name=</code></p></td><td colspan="1" rowspan="1"><p data-id="9070f4b1-effc-4535-a57e-00ec0a646a0e">Pre-fill the last name</p></td><td colspan="1" rowspan="1"><p data-id="8f630d95-4e9a-4e5d-b104-81604ed923c4"><code>?last_name=Doe</code></p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="e7d70122-6d00-4e4f-9377-487517858fc2"><code>?name=</code></p></td><td colspan="1" rowspan="1"><p data-id="6e0240af-d33d-4d7f-bac5-2e79683554a6">Pre-fill the full name</p></td><td colspan="1" rowspan="1"><p data-id="6082ef8e-faec-47c4-bfb7-af737e0ec8e2"><code>?name=John%20Doe</code></p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="75964ec6-9e4d-4171-9670-23d8005ea92d"><code>?email=</code></p></td><td colspan="1" rowspan="1"><p data-id="0a711015-d1b0-42dc-8273-5598958dc333">Pre-fill the email</p></td><td colspan="1" rowspan="1"><p data-id="87862282-ff8a-4822-a0ec-ca9d9c1f5b4f"><code>?email=john@example.com</code></p></td></tr></tbody></table>

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:**

```html
<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

The inline embed fills the width of the container you place it in, so your container decides how wide the form is. Stepped and Slide forms stretch up to 896px and SmartFlow forms up to 768px; in a wider container the form stays at that width and sits centred. To make the form narrower, narrow its container. (The pop-up button embed and your booking link keep their own compact layout.)

Style the container around your embed:

```html
<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:

```html
<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:

```html
<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>
```

### Popup/Modal

Trigger booking in a modal:

```html
<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](https://help.salescal.ai/en/articles/6971cfbf038df8f81cc4b46b.md) - Understand the full booking experience
    
-   [Customization & Branding](https://help.salescal.ai/en/articles/6971d18a7376610244931405.md) - Style your embedded widget
    
-   [Creating Events](https://help.salescal.ai/en/articles/6971f29738cb61cc9900fca7.md) - Set up the event to embed