How To Add A Booking Link To Your Website (Step-By-Step)
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.
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:
CTA copy ideas:
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:
If you’re using Breely, our no-code embed options work across these builders with a straightforward copy-paste.
Embedding keeps visitors on your site rather than redirecting them.
<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:
<!-- 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>
<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.
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
<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>
If you’re using Breely, we support simple conversion tracking patterns that work cleanly with GA4, Meta Pixel, and other analytics tools.
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>
If you’re using Breely, our flexible embed options help you place scheduling wherever it supports your conversion journey without adding friction.
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.