How To Add A Booking Button To A Carrd Or Notion Page

Adding a booking button to your Carrd or Notion page is one of the fastest ways to turn visitors into scheduled meetings. Whether you prefer a simple “Book now” link or a fully embedded scheduler, this guide covers step‑by‑step methods for both platforms, along with best practices for speed, accessibility, and conversion.

If you already use a scheduling tool like Breely, start by locating your public booking link. You can use that link in a button, a Notion Bookmark, or embed it in an iframe where allowed.

What you’ll need

• A public booking URL from your scheduling tool (for example, your Breely booking link).
• Carrd (Free for link buttons, Pro for embeds) or a Notion page (public or internal).
• Optional: UTM parameters for tracking (e.g., ?utm_source=carrd&utm_medium=cta).

Add a booking button to Carrd

Carrd supports two primary approaches: a simple button that links to your booking page (works on Free) and an embedded scheduler (requires Pro).

Option A: Button that opens your booking page (works on Carrd Free)

1. Open your Carrd site in the editor.
2. Add a Button element (or select an existing CTA).
3. In Button settings:
   • Action: Link
   • URL: Paste your booking link (e.g., https://your-booking-page).
   • Target: Choose “New tab” to keep visitors on your site or “Same tab” to load in place.
4. Label the button with high‑intent copy such as “Book a call,” “Schedule now,” or “Check availability.”
5. Style the button for contrast and accessibility (sufficient color contrast, large tap targets).
6. Publish your site.

Tip: Append UTM tags to your booking link so you can attribute bookings to Carrd, e.g., https://your-booking-page?utm_source=carrd&utm_medium=button&utm_campaign=site.

Option B: Embed your scheduler directly on the page (Carrd Pro)

1. Upgrade to a Carrd Pro plan that supports Embeds.
2. In the Carrd editor, add an Embed element where you want the scheduler to appear.
3. Select an iframe or code option (depending on your plan), then paste an iframe that points to your booking page:

<iframe
  src="https://your-booking-page"
  style="width:100%;max-width:100%;height:700px;border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allowtransparency="true">
</iframe>

4. Adjust height (e.g., 600–900px) so the full booking flow fits without scrolling inside the frame.
5. For a pop‑up experience:
   • Add a Container set to “Modal/Popup.”
   • Place the Embed element inside the modal.
   • Set your “Book now” button’s Action to open that modal.

Best practices:

• Keep the embed above the fold or anchor‑link a button to it.
• Use “lazy” loading for performance.
• Test on mobile; ensure tap targets are large and the iframe uses 100% width.

Add a booking button to Notion

Notion supports multiple ways to promote scheduling: a visual Bookmark card, an inline embed (if the booking page allows iframes and Notion supports it), or a clear call‑to‑action section linking out.

Option A: A clean, visual link using a Bookmark

1. Copy your booking URL.
2. Paste it into your Notion page and choose “Create bookmark.”
3. Add a short headline and description to the surrounding text (e.g., “Ready to chat? Book a time now.”).
4. Toggle “Full width” for the page if you want a larger card, and drag to reposition.

This works reliably on public and private Notion pages and is the simplest way to add a prominent CTA.

Option B: Embed the scheduler inline (if allowed)

Notion does not accept arbitrary HTML or JavaScript, but it can embed sites that allow framing.

1. Type “/embed” in Notion and select “Embed.”
2. Paste your booking URL and click “Embed link.”
3. Resize the block to a comfortable height (e.g., 700–900px) and stretch width as needed (enable page Full width).
4. Publish the Notion page (if you want it public) via Share → Publish.

If the embed doesn’t load:

• Your scheduling tool may disallow iframes or Notion may not support embedding that domain.
• Fall back to Option A (Bookmark) or a standard hyperlink.

Option C: A “CTA section” using native Notion blocks

• Add a Heading (e.g., “Book a call”), a Divider, and a short note explaining what visitors can expect.
• Paste your booking link and convert it to a Bookmark for visual emphasis, or keep it as a bold hyperlink.
• For internal docs, a Callout block with the link keeps the CTA noticeable without overwhelming content.

Testing checklist (Carrd and Notion)

• Click‑through: Verify the button/link opens your booking page.
• Mobile: Confirm buttons are easy to tap and embeds are responsive.
• Timezones: Ensure the booking page shows correct availability for different regions.
• Accessibility: Buttons have descriptive labels; color contrast meets WCAG.
• Tracking: Use UTM parameters and verify conversion tracking in your analytics.
• Public access (Notion): If sharing publicly, toggle “Publish to web” and view in an incognito window.

Troubleshooting

• The Notion embed shows an error or stays blank:
  • The site may block iframes (X-Frame-Options/Content-Security-Policy) or Notion may not support the domain. Use a Bookmark or standard link instead.
• The embedded scheduler feels cramped:
  • Increase iframe height. On Carrd, use 100% width and at least 700px height.
• The button works on desktop but not mobile:
  • Ensure no overlapping elements, and keep the CTA near the top on small screens.
• You want a popup experience on Carrd:
  • Use a modal/popup Container and place the embed inside; wire your button to open the modal.
• Analytics aren’t attributing bookings:
  • Append UTM parameters to your booking URL and verify that your scheduling confirmation/thank‑you page is tracked.

Where this is especially easy with Breely

When you use Breely, we make a link‑first approach straightforward, so you can:

• Add a direct public booking link anywhere a URL works (Carrd buttons, Notion Bookmarks, or inline embeds where allowed).
• Keep pages fast by linking or embedding without custom scripts.
• Maintain a consistent, visitor‑friendly flow across Carrd and Notion with minimal setup.

If an inline embed isn’t supported in Notion for your setup, linking out with a prominent CTA remains the most reliable, friction‑free approach—and it’s quick to implement with Breely.

Copy‑and‑paste snippets

Carrd iframe (embed)

<iframe
  src="https://your-booking-page"
  style="width:100%;max-width:100%;height:780px;border:0;"
  loading="lazy">
</iframe>

Button label ideas

• Book a call
• Schedule time
• Check availability
• Reserve a spot
• Start a meeting request

UTM example for tracking

https://your-booking-page?utm_source=carrd&utm_medium=button&utm_campaign=site

FAQs

• Do I need Carrd Pro to embed a scheduler?
  • Yes. Buttons that link out work on Free; iframe/code embeds require Pro.
• Can I embed in Notion with custom HTML/JS?
  • No. Notion only supports URL embeds for domains it allows. Otherwise, use a Bookmark or link.
• What’s the fastest way to add scheduling to Notion?
  • Paste your booking link and choose “Create bookmark” for a clean, visual CTA.
• How do I track bookings from Carrd or Notion?
  • Add UTM parameters to your booking URL and review signups in your analytics or scheduling tool.

By using simple links, visual Bookmarks, or compliant iframes, you can add a clear “Book now” action to Carrd and Notion in minutes—and give visitors a direct path to schedule with you.