A booking link turns website visits into scheduled meetings. This guide walks through creating your booking link, placing it across common website platforms, embedding it inline or as a pop-up, tracking conversions, and optimizing for SEO, accessibility, and performance.

A booking link is a shareable URL that opens a scheduling page with your real-time availability. Visitors choose a time, confirm details, and receive calendar invites automatically. You can present one universal link (routing to multiple event types) or individual links per service.

If you’re using Breely, we provide a clean, fast booking experience that’s easy to share and simple to embed anywhere you manage web content.

2) Prepare your booking experience

  • Define what you’re offering (e.g., “Intro Call,” “Consultation,” “Demo”).
  • Set duration, buffers, time zone handling, and minimum notice.
  • Add intake fields you need (e.g., phone, company, notes).
  • Configure email/SMS confirmations and reminders.
  • Set your cancellation and reschedule rules.
  • If applicable, enable payments and no-show policies.
  • Create and copy your unique booking link.
  • Test it end-to-end on desktop and mobile.

With Breely, we keep setup straightforward and offer shareable links plus no-code embed options so your booking flow feels native to your site.

High-performing placements:

  • Primary navigation (top-right) labeled “Book a Call,” “Schedule,” or “Get Started”
  • Homepage hero section, above the fold
  • Services or pricing pages, near the decision section
  • Contact page
  • Blog sidebar or in-post callouts
  • Site footer across all pages
  • Mobile sticky CTA

CTA copy ideas:

  • “Book a demo”
  • “Schedule a call”
  • “Get your free consultation”
  • “Reserve a time”
  • “Start your project”

If your site lets you edit HTML, add a prominent button that links to your booking page.

HTML:

<a href="https://your-booking-link.example.com" class="btn-book">
  Book a call
</a>

CSS (example):

.btn-book {
  display: inline-block;
  background: #111827;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.btn-book:hover { background: #0b1220; }

Place this in your header, hero, services pages, and footer.

If you’re using Breely, your link can be used anywhere a standard URL is accepted—no special markup required.

Follow these platform-specific steps:

WordPress (Block Editor / Gutenberg)

  • Button:
    1. Edit page → add “Button” block.
    2. Set text (e.g., “Book a demo”).
    3. Paste your booking URL.
  • Inline link: highlight text → add link → paste URL.
  • Code/Embed:
    1. Add “Custom HTML” block.
    2. Paste embed code (iframe or script, see Section 6).

WordPress (Elementor)

  • Add a Button widget → set link to your booking URL.
  • For embed: add HTML widget → paste iframe/script.

Squarespace

  • Add a Button block → set link to your booking URL.
  • For embed: add a Code block → paste iframe/script.
  • Add to announcement bar for site-wide visibility if desired.

Wix

  • Add a Button → Link → Web Address → paste your booking URL.
  • For embed: Add → Embed → Embed a widget → paste iframe code.

Webflow

  • Add a Link Block or Button → set URL to your booking link.
  • For embed: add an Embed element → paste iframe/script.
  • Use Symbols to propagate site-wide CTAs.

Shopify

  • Online Store → Customizer → add a button block in theme sections; link to your booking URL.
  • For embed: add a Custom Liquid or HTML block with iframe/script.
  • Add to announcement bar for a global CTA.

Framer

  • Add a Button → set link to your booking URL.
  • For embed: add an Embed component → paste iframe.

Carrd

  • Add a Button → URL → paste your booking link.
  • For embed: add an Embed element → paste iframe.

Notion

  • Paste your booking link directly in a page or button link.
  • For embed: /embed → paste the link; Notion will iFrame when possible.

Google Sites

  • Insert → Button → set your booking URL.
  • For embed: Insert → Embed → paste URL or embed code.

If you’re using Breely, our no-code embed options work across these builders with a straightforward copy-paste.

6) Embed your booking page inline or as a pop-up

Embedding keeps visitors on your site rather than redirecting them.

Inline embed (iframe)

<div class="scheduler-container">
  <iframe
    src="https://your-booking-link.example.com"
    title="Schedule a meeting"
    style="width:100%; min-height:700px; border:0;"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    allowtransparency="true">
  </iframe>
</div>

Tips:

Spend less time scheduling

Online booking, reminders, and payments — free to start

Try Breely Free →
  • Set min-height to avoid scroll traps.
  • Use loading=“lazy” for performance.
  • Place above fold where possible.

Pop-up modal trigger (no framework)

<!-- Trigger -->
<a href="#" id="open-scheduler">Book a call</a>

<!-- Modal -->
<div id="scheduler-modal" aria-hidden="true">
  <div class="modal-backdrop"></div>
  <div class="modal-content" role="dialog" aria-modal="true" aria-label="Schedule a meeting">
    <button id="close-scheduler" aria-label="Close">×</button>
    <iframe
      src="https://your-booking-link.example.com"
      style="width:100%; height:80vh; border:0;"
      loading="lazy">
    </iframe>
  </div>
</div>

<style>
#scheduler-modal { display:none; position:fixed; inset:0; z-index:1000; }
#scheduler-modal.active { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.modal-content { position:relative; margin:5vh auto; max-width:900px; width:92%; background:#fff; border-radius:12px; overflow:hidden; }
#close-scheduler { position:absolute; top:8px; right:12px; background:none; border:none; font-size:28px; cursor:pointer; }
</style>

<script>
document.getElementById('open-scheduler').addEventListener('click', function(e){
  e.preventDefault();
  document.getElementById('scheduler-modal').classList.add('active');
});
document.getElementById('close-scheduler').addEventListener('click', function(){
  document.getElementById('scheduler-modal').classList.remove('active');
});
document.addEventListener('keydown', function(e){
  if (e.key === 'Escape') document.getElementById('scheduler-modal').classList.remove('active');
});
</script>

Floating “Book” widget

<a href="https://your-booking-link.example.com" class="floating-book">Book a call</a>

<style>
.floating-book {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #2563eb;
  color: #fff;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(37,99,235,.3);
}
.floating-book:hover { background: #1d4ed8; }
@media (max-width: 640px) {
  .floating-book { bottom:16px; right:16px; }
}
</style>

If you’re using Breely, our no-code embed options make inline, modal, and floating experiences simple to implement without extra libraries.

7) Track clicks and bookings

Add UTM parameters

Append UTM tags to attribute bookings by page or campaign:

https://your-booking-link.example.com?utm_source=website&utm_medium=button&utm_campaign=homepage-hero

Track button clicks (GA4)

<a href="https://your-booking-link.example.com" class="btn-book" data-analytics="booking-link">Book a demo</a>

<script>
document.querySelectorAll('[data-analytics="booking-link"]').forEach(function(el){
  el.addEventListener('click', function(){
    if (window.gtag) gtag('event', 'click', {
      event_category: 'engagement',
      event_label: 'booking-link'
    });
  });
});
</script>

Track confirmed bookings

  • Use a confirmation redirect to a thank-you page you control, then mark that page as a conversion in your analytics.
  • Alternatively, listen for postMessage events from the embed (if provided) or use a webhook-to-analytics bridge.

If you’re using Breely, we support simple conversion tracking patterns that work cleanly with GA4, Meta Pixel, and other analytics tools.

8) Make it discoverable with structured data

Add Schema.org to help search engines understand that users can schedule with you.

JSON-LD example (LocalBusiness with a scheduling action):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Your Business Name",
  "url": "https://yourdomain.com",
  "telephone": "+1-555-555-5555",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main Street",
    "addressLocality": "City",
    "addressRegion": "State",
    "postalCode": "12345",
    "addressCountry": "US"
  },
  "potentialAction": {
    "@type": "ScheduleAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://your-booking-link.example.com",
      "inLanguage": "en"
    },
    "name": "Book an appointment"
  }
}
</script>

9) Optimize for accessibility, mobile, and performance

  • Buttons: high-contrast colors, large hit areas (44px target size), descriptive labels.
  • Keyboard: ensure focus states and Escape-to-close on modals.
  • ARIA: use aria-labels and proper roles on modals and close buttons.
  • Mobile: test portrait/landscape, adjust iframe height (70–85vh works well).
  • Performance: lazy-load embeds below the fold; avoid multiple heavy embeds on one page.
  • Privacy: respect consent preferences before loading third-party scripts if required.

10) Troubleshooting

  • The iframe shows scrollbars: increase min-height or set the booking page to a compact variant if available.
  • The pop-up is blocked: use an on-click modal rather than window.open.
  • CSS conflicts: namespace modal styles to avoid overrides from global CSS.
  • Mixed content warnings: ensure your booking link uses HTTPS.
  • Tracking mismatch: verify UTM passthrough and that your confirmation redirect is firing.

11) Advanced placement ideas

  • Contextual CTAs in blog posts after the first section and again near the conclusion.
  • A “sticky” mobile bottom bar that reads “Book now.”
  • Pricing-page comparison table with a persistent “Schedule a demo” button.
  • Exit-intent modal offering a quick meeting for undecided visitors.

If you’re using Breely, our flexible embed options help you place scheduling wherever it supports your conversion journey without adding friction.

12) Quick checklist

  • Create and test your booking link.
  • Add primary buttons in header, hero, and footer.
  • Embed inline on your key pages or use a pop-up modal.
  • Add UTMs to attribute traffic sources.
  • Track clicks and confirmed bookings.
  • Add structured data for scheduling.
  • Validate accessibility and mobile responsiveness.
  • Re-test monthly and after any layout or script changes.

Where we stand out

With Breely, we focus on a frictionless booking experience and no-code embeds that fit neatly into your site structure. If you manage multiple services or teams, our flexible configuration helps you present the right availability at the right touchpoints without extra complexity.