A booking link in an email is fine. A booking calendar on your own website is better: the visitor is already interested, already on your page, and one click away from a slot. The mechanics are simple, an iframe or a small script, but the details decide whether it looks like part of your site or like a box someone forgot to style. This guide covers the three embed styles, exact steps for the site builders people actually use, the settings that make the embed look native, and the handful of mistakes that produce a blank frame.
Quick answer: Copy the embed code from your scheduling tool and paste it into an HTML or embed block on your page. Use an inline embed where the calendar is the main content and a popup button where it is secondary. Give the frame 700 to 900 pixels of height on desktop, pass your brand colours as URL parameters, and make sure your site's Content Security Policy allows framing the booking page. PepoSmart booking pages are framable on any domain and the app generates inline, popup-widget and popup-text snippets with your colours applied.
Key takeaways
- Every mainstream site builder has an HTML or embed element. The iframe goes there, never in a rich-text block.
- Inline for conversion pages, popup for everything else.
- Height is the setting people get wrong. Give it room.
- Match colours through URL parameters, and use the booking page's own builder for the theme.
- If the frame is blank, it is almost always CSP or a stripped tag, not the scheduling tool.
The three ways to put a calendar on a page
| Style | What the visitor sees | Best for |
|---|---|---|
| Inline embed | The full calendar rendered in the page | Contact, demo, book-a-call and service pages |
| Popup widget | A floating button; the calendar opens in a modal on click | Blog posts, pricing pages, any page with another job |
| Popup text link | A normal text link that opens the calendar in a modal | Navigation menus, CTAs inside paragraphs |
All three load the same booking page. In PepoSmart, open an event, choose Add to website, and pick inline, popup widget or popup text; the dialog gives you the HTML with your colours already applied, as described in the embedding documentation. If you would rather hand-write it, the inline version is just an iframe pointing at the booking URL:
<iframe
src="https://app.peposmart.com/book/your-username/your-event-id"
width="100%"
height="800"
style="border:0; border-radius:16px;"
loading="lazy"
title="Book a meeting"
></iframe>
The title attribute is for screen readers, and loading="lazy" stops the frame from competing with your page's own content while it loads.
Step-by-step for each site builder
The pattern is the same everywhere: find the block that accepts raw HTML, paste the snippet, publish. What differs is the block's name.
WordPress
In the block editor, add a Custom HTML block where you want the calendar and paste the iframe. Preview, then publish. If your theme constrains content width, set the block to wide or full alignment so the calendar gets the space it needs. WordPress documents its blocks, including Custom HTML, in the block editor documentation. On WordPress.com, note that some plans restrict custom HTML; a self-hosted site has no such limit.
Squarespace
Add a Code block to the section and paste the iframe. Squarespace renders code blocks as-is, so the frame appears immediately in the editor. The Squarespace code block article covers the block; the popup button works well in a Squarespace footer or announcement bar.
Webflow
Drag an Embed element onto the page and paste the code. Webflow shows a placeholder in the designer and renders the frame on the published site. Set the element's width to 100% and give its parent enough min-height. The Webflow custom code embed lesson explains the element and its limits on free plans.
Wix
Use Embed a widget (also called Embed HTML) from the Add panel, choose Code, and paste the iframe. Wix places embeds in their own frame, so set the widget's height to at least 800 pixels or the calendar will scroll inside a small box. Wix documents the element in its embedding a site or widget article.
Framer
Add an Embed component, switch it to HTML mode, and paste the iframe. Set the component's height explicitly, since Framer will not size to the frame's content. For a popup button, paste the widget snippet into the page's custom code area instead.
Notion
Notion pages accept embeds of arbitrary URLs. Type /embed, paste the booking page URL (not the iframe tag), and resize the block. Because PepoSmart booking pages set no frame restrictions, they render inside Notion's embed block. Notion's embed help page covers the block. This is a neat way to put a booking calendar in a public Notion page or a client-facing wiki.
Carrd
Add an Embed element, choose Code, and paste the iframe. Carrd is built for one-page sites, so the inline embed in a "Book a call" section is the natural fit. See the Carrd documentation for the element.
Shopify
In the theme editor, add a Custom Liquid or custom HTML section to the page and paste the iframe. For a booking button in the header, the popup snippet goes into the theme's layout file through the code editor.
Google Sites, HubSpot CMS and everything else
Look for the element named Embed, HTML, Code or Custom code. Every builder that allows custom markup has one, and the iframe works unchanged.
Making the embed look native
An embed that looks bolted on undermines the page around it. Four settings fix most of that.
Match the colours
PepoSmart booking URLs accept query parameters that restyle the page inside the frame. Colours are hex values without the leading hash.
| Parameter | Example | Effect |
|---|---|---|
bg | ffffff | Page background colour |
text | 0f172a | Body text colour |
primary | 0189a8 | Buttons, selected time slot, accents |
hide_details | 1 | Hides the event summary panel when your page already describes the meeting |
So an embed matching a white page with teal accents points at .../book/you/event?bg=ffffff&text=0f172a&primary=0189a8. The Add to website dialog writes these for you.
Use the booking page's own builder for the theme
Colour parameters adjust the embed; the booking page's builder decides its structure. Every PepoSmart booking page has a page builder with themes, palettes, backgrounds and widgets such as text, video, testimonials, FAQ and a map, placed beside the booking card. Publish a look that matches your site and the embed inherits it, so the frame and the page read as one design. The builder is described on the booking pages feature.
Give it height
Below roughly 700 pixels the calendar, time list and form scroll inside the frame, which feels cramped on desktop. 700 to 900 pixels is the comfortable range. On mobile, set the width to 100% and let the page scroll; do not try to fit the whole booking flow into a phone-height frame.
Hide what the page already says
If your page has a heading, a description and a photo of the person the visitor will meet, the booking page's own summary panel repeats it. Set hide_details=1 to remove the panel and leave only the calendar and the form.
Inline or popup: choosing well
The decision is about what the page is for.
Inline when the page's job is the booking: a "Book a demo" page, a contact page, a consultant's services page. The calendar is the content, and hiding it behind a click costs conversions.
Popup when the page's job is something else: a blog post that mentions a consultation, a pricing page, a case study. The floating button keeps the page focused and the calendar arrives on demand. The popup variants use the same booking URL, so every colour parameter applies unchanged.
A useful pattern for service businesses: inline on the dedicated booking page, popup button site-wide, and plain links in emails and social profiles. Each event also gets a shareable link and a QR code for print and slides, so the same booking page works on a business card.
Team pages and multiple event types
If several people or several services should be bookable from one embed, embed the overall booking page rather than a single event. The overall page lists every public event type, so a visitor picks the service and then the time. For teams, a round-robin event gives one embed that assigns the meeting to whoever is free, and a choose-a-professional event lets the visitor pick a person first, which the multi-practitioner booking guide explains.
Embedding in a client portal
Portals that already know who the user is have two options, set out in the embedding documentation. The iframe embed is fastest to ship and handles the calendar, time zones and confirmations for you. The REST API, on the Business plan and above, lets you build your own picker and create the booking server-to-server, which is the route to take when the booked identity must be trustworthy, because anything in an iframe URL can be edited by the person in the browser.
One current limitation worth knowing before you design: the PepoSmart booking page does not yet read the visitor's name or email from the URL. The documentation describes the planned prefill parameters and asks teams to get in touch before building against them. Until then, embedded visitors type their own details, or your backend uses the API, which accepts the attendee today.
Why the frame is blank, and how to fix it
Nine times out of ten the scheduling tool is fine and one of these is the problem.
Your site's Content Security Policy blocks framing. A strict frame-src or child-src directive on your site prevents the iframe from loading third-party pages. Open the browser console; a CSP error names the directive. Add https://app.peposmart.com to it. MDN's CSP documentation explains the directives. Note that PepoSmart's booking pages themselves set no X-Frame-Options or frame-ancestors restriction, so the block is always on your side.
The builder stripped the tag. Pasting an iframe into a paragraph or rich-text block usually deletes it or shows the code as text. Use the HTML, Code or Embed element.
The event is private, deleted or has no availability. A private event still loads by direct link, so that is rarely it. A deleted event shows a notice that it is no longer accepting bookings. An event whose host has no open hours in the booking window shows a calendar with nothing to pick; check the host's availability rules.
A browser extension or privacy setting blocks third-party frames. Test in a private window before you chase anything else.
The height is too small. Not blank, but it looks broken: a thin strip with an internal scrollbar. Raise the height.
Tracking bookings from the embed
Bookings made through an embed behave exactly like any other booking: confirmation and reminder emails, calendar invites with the video link, and AI meeting notes all work normally. To see which page produced which booking, use separate event types per page where that matters, or attach a booking.created webhook on the Professional plan and above and record the source in your own analytics. Clicks on link widgets inside a published booking page are counted in PepoSmart's analytics, which is useful if the page carries links to your case studies or social profiles.
Checklist before you announce the page
- The embed is in an HTML or embed element, not a text block.
- The frame has at least 700 pixels of height on desktop and 100% width.
- Colour parameters match the page, or the booking page's published look does.
hide_details=1is set if the page already describes the meeting.- The event is public if it should appear on the overall booking page, and its availability has open hours in the booking window.
- You booked a real slot from the embed on a phone and a desktop, received the confirmation, and cancelled it from the email.
Summary
Embedding a booking calendar is one HTML block away on every major site builder. Choose inline for pages whose job is the booking and a popup for pages with another job, give the frame room, match your colours with URL parameters and the booking page's own builder, and check your site's CSP if the frame is blank. PepoSmart booking pages embed on any domain with inline, popup-widget and popup-text snippets generated for you, on every plan including Free. The website embeds page lists the limitations, and you can create a free account to get a booking page to embed in the next ten minutes.
