Developer & Integration
Embed & Configure
Embed your booking page on any website with one script tag — popup, inline, or floating badge. Use the JS API to open bookings programmatically and react to confirmed events.
Live demo
Click through a real booking flow — date picker, time slots, confirmation form. This is exactly what your invitees see.
Let's chat
Pick a time that works for you — 30 minutes, no prep needed.
That button above is powered by:
<button data-invitepe="jane/30-min">
Book a 30-min call
</button>
Jane Parker
30-Minute Meeting
Select a date & time
July 2025
Pick a time
Enter your details
You're booked!
A calendar invite and Zoom link have been sent to your inbox.
Jane Parker
30-Minute Meeting
Select a date & time
July 2025
Pick a time —
Your details
You're booked!
Calendar invite sent to your inbox.
Your website content lives here — the badge appears in the corner.
Book a meeting
30 min · Zoom · Jane Parker
Embed on any website
One script tag. Three modes. Works on any HTML page — no framework required.
Replace username/event-slug with your own values
(find yours in
your dashboard after signing in
).
Popup on click
Any element with data-invitepe opens the booking modal. Works on buttons, links, images — any clickable element.
Inline embed
Drop a div anywhere on your page and the full booking calendar loads inside it. Great for dedicated booking pages.
Floating badge
Adds a branded sticky button in the corner of every page. No other HTML changes needed — just the script tag.
Popup on click
Add the script once per page. Then put data-invitepe
on any element you want to trigger the popup.
<!-- Step 1: load the widget once (ideally before </body>) --> <script src="https://invitepe.com/invitepe.js"></script> <!-- Step 2: trigger from any element --> <button data-invitepe="username/event-slug"> Book a 30-min call </button> <!-- Works on links too --> <a href="#" data-invitepe="username/event-slug">Schedule time with me</a>
How it works
- The modal opens with a smooth fade + slide animation
- Closes on click-outside, ESC key, or the close button
- Fully responsive — adjusts from full-screen on mobile to 660px max on desktop
- Scroll lock applied to <html> while open
Inline embed
The booking calendar renders inside your own page layout.
Set height on the wrapper div.
<!-- Load the widget script -->
<script src="https://invitepe.com/invitepe.js"></script>
<!-- Drop this div wherever you want the calendar to appear -->
<div data-invitepe-inline="username/event-slug"
style="height: 700px"></div>
<!-- Tip: set a min-height instead for dynamic content -->
<div data-invitepe-inline="username/event-slug"
style="min-height: 600px; height: 80vh"></div>
How it works
- Renders an iframe that fills the wrapper div exactly
- Rounded corners and a subtle shadow applied automatically
- Ideal for a dedicated /book page or a landing page section
- 700px height recommended; 600px minimum for comfortable display
Floating badge
No extra HTML needed — just this single script tag. The button appears on every page that includes it.
<!-- Single tag: loads the widget AND shows the floating button --> <script src="https://invitepe.com/invitepe.js" data-invitepe-popup="username/event-slug" data-invitepe-label="Book a meeting"> </script> <!-- Custom label examples --> <!-- data-invitepe-label="Schedule a call" --> <!-- data-invitepe-label="Book a demo" -->
How it works
- Fixed-position blue button, bottom-right corner, z-index max
- Shows your invitepe logo + the custom label you set
- Clicking opens the full popup modal — same as mode 1
- Best for blogs, portfolios, and SaaS sites where you don't want to edit every page
JavaScript API
Open / close programmatically
// Open a popup
const modal = invitepe.open('username/slug');
// Open with a full URL (e.g. from your dashboard)
invitepe.openUrl('https://invitepe.com/embed/username/slug');
// Close it later
invitepe.close(modal);
React to a confirmed booking
// Fires when an invitee completes a booking
document.addEventListener('invitepe:booked', (e) => {
console.log('Booking confirmed', e.detail);
// e.g. hide a banner, show a thank-you, fire analytics
gtag('event', 'booking_confirmed');
});
postMessage events (inside the iframe)
// The embed iframe sends these messages to the parent window:
window.addEventListener('message', (e) => {
if (e.data === 'invitepe:close') { /* user closed the modal */ }
if (e.data === 'invitepe:success') { /* booking was confirmed */ }
});
All URLs at a glance
| Purpose | URL |
|---|---|
| Public booking page | https://invitepe.com/{username} |
| Specific event type | https://invitepe.com/{username}/{event-slug} |
| Embed iframe source | https://invitepe.com/embed/{username}/{event-slug} |
| Widget JS (CDN) | https://invitepe.com/invitepe.js |
| OAuth redirect (Zoom) | https://invitepe.com/auth/callback/zoom |
| OAuth redirect (Google) | https://invitepe.com/auth/callback/google |
| OAuth redirect (Microsoft) | https://invitepe.com/auth/callback/microsoft |
| Privacy Policy | https://invitepe.com/privacy/ |
| Terms of Use | https://invitepe.com/legal/ |
| Support | https://invitepe.com/support/ |
| Configure (this page) | https://invitepe.com/configure/ |