1
Popup on click
Add data-invitepe to any button. The script opens the full booking UI in a modal iframe.
- Same UI as your public booking page
- Bottom sheet on mobile, centred modal on desktop
-
Fires
invitepe:bookedwhen confirmed
<!-- Load once -->
<script src="https://www.invitepe.com/invitepe.js" defer></script>
<!-- Any clickable element -->
<button data-invitepe="apurvmahesh123/test">
Book a meeting
</button>
2
Inline embed
Drop data-invitepe-inline on a div — invitepe.js mounts the calendar iframe for you.
<script src="https://www.invitepe.com/invitepe.js" defer></script>
<div data-invitepe-inline="apurvmahesh123/test"
style="height:680px;"></div>
3
Floating badge
Put data-invitepe-popup on the script tag — a sticky book button appears in the corner. It’s live on this page.
No extra HTML needed. Visitors can book from any page while scrolling.
<script
src="https://www.invitepe.com/invitepe.js"
data-invitepe-popup="apurvmahesh123/test"
data-invitepe-label="Book a meeting"
defer></script>
Look at the bottom-right of this page — that blue badge is the real embed script, not a mock.
4
JavaScript API
Open the popup from your own code — chat widgets, pricing CTAs, or custom flows.
// Open popup
const modal = invitepe.open('apurvmahesh123/test');
// Or a full URL (always prefer www)
invitepe.openUrl('https://www.invitepe.com/apurvmahesh123/test');
// React when booking completes
document.addEventListener('invitepe:booked', (e) => {
console.log('Booked', e.detail);
});