HTML embed block

Embed booking tools on your page

The HTML embed block lets you drop any embed code straight onto your Frddy page — a Calendly scheduler, a HubSpot meetings link, a Chili Piper booking calendar, a form, a video, anything that gives you an iframe or script snippet.

Everything you paste runs inside a sandboxed frame, so it can never touch the rest of your page.

Add the HTML embed block

Open your page in the Frddy editor.
Add an HTML embed block.
Give it an optional heading — something like "Book a call".
Paste your embed code into the box (snippets for the common tools are below).
Drag the Height slider until the embed fits without an inner scrollbar.
Toggle the block on, then save and publish.

Height is fixed — the block can't auto-resize because the embedded tool lives in its own sandbox. Booking calendars usually need 650–900px; short forms are happy around 400px.

Calendly

In Calendly, open the event type, click Share → Add to website, and choose Inline embed. Copy the code it gives you and paste it into the block. Or paste this, swapping in your own link:

<div
  class="calendly-inline-widget"
  data-url="https://calendly.com/your-name/30min"
  style="min-width:320px;height:700px;"
></div>
<script src="https://assets.calendly.com/assets/external/widget.js" async></script>

Set the block Height to roughly match the widget's height — around 700px works well.
Popup widget and popup text options also work, but inline is the best fit for a Frddy page. See Calendly's embed options overview.
You can prefill fields by appending query params to data-url, e.g. ?hide_gdpr_banner=1&name=Jane.

HubSpot meetings

In HubSpot, go to Library → Meetings, open your scheduling page, click Share and choose the Embed tab. Copy the snippet, or use this shape with your own meetings link:

<div
  class="meetings-iframe-container"
  data-src="https://meetings.hubspot.com/your-name?embed=true"
></div>
<script src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>

Keep ?embed=true on the link — without it the calendar won't render inline.
A height of 700–750px avoids an inner scrollbar on most calendars.
Details in HubSpot's meeting widget guide.

Chili Piper

Chili Piper gives you an iframe for a calendar or booking link — grab it from your Chili Piper admin under the queue or booking link's sharing options, then paste it in:

<iframe
  src="https://meetings.chilipiper.com/book/your-workspace/your-router"
  width="100%"
  height="700"
  frameborder="0"
></iframe>

Use width="100%" so the calendar stays responsive on phones.
Chili Piper's own instructions: Embedding a calendar or booking link.

Test it live

Publish the page and open it on your phone as well as desktop.
Book a test slot end to end so you know notifications fire.
If you see an inner scrollbar, nudge the Height slider up and republish.

Troubleshooting

The block is blank.

Most often the snippet is incomplete — make sure you copied both the <div> (or <iframe>) and the <script> line. Also check the tool allows embedding; a few providers block iframes on free plans.

There's a scrollbar inside the embed.

Increase the Height slider. Booking calendars typically need 650–900px.

It looks cramped on mobile.

Use a percentage width (width="100%") rather than a fixed pixel width, and give it a little extra height — mobile calendars stack vertically.

Can I embed other tools?

Yes. Anything with an iframe or script embed works — Typeform, YouTube, Loom, Spotify, Google Maps, Tally, and more. Paste the snippet and set the height.

A note on safety

Embedded code runs in a sandboxed frame, isolated from the rest of your page. Still, only paste snippets from tools you trust — the embed can see whatever your visitors type into it.

Questions? Reach out to the Freddy Media team.