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="autmic/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="autmic/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="autmic/test"
data-invitepe-label="Book a meeting"
defer></script>
Bottom-right badge uses the real embed script; bookings here stay in preview (not saved).
4
JavaScript API
Open the popup from your own code — chat widgets, pricing CTAs, or custom flows.
// Open popup
const modal = invitepe.open('autmic/test');
// Or a full URL (always prefer www)
invitepe.openUrl('https://www.invitepe.com/autmic/test');
// React when booking completes
document.addEventListener('invitepe:booked', (e) => {
console.log('Booked', e.detail);
});