Embed Supercal
Add booking widgets to your website, blog, or app with simple iframe or JavaScript embedding.
Embedding Options
Inline Widget
Embed the booking calendar directly into your webpage.
<iframe
src="https://supercal.cc/book/username/30min"
width="100%"
height="600px"
frameborder="0"
></iframe>Popup Widget
Open booking calendar in a modal popup when users click a button.
<script src="https://supercal.cc/embed.js"></script>
<button onclick="Supercal.popup('username/30min')">
Schedule Meeting
</button>Custom Styled
Customize colors and branding to match your website.
<iframe
src="https://supercal.cc/book/username/30min?theme=dark&accent=ff6b35"
width="100%"
height="600px"
frameborder="0"
></iframe>Customization Options
Customize the widget appearance with URL parameters
| Parameter | Description | Example |
|---|---|---|
| theme | Theme mode (light or dark) | theme=dark |
| accent | Accent color (hex without #) | accent=ff6b35 |
| hide_header | Hide the header | hide_header=true |
| hide_footer | Hide the footer | hide_footer=true |
| prefill_name | Pre-fill attendee name | prefill_name=John+Doe |
| prefill_email | Pre-fill attendee email | prefill_email=john@example.com |
Advanced Integration
JavaScript API
For advanced use cases, use our JavaScript SDK to programmatically control the booking widget.
<script src="https://supercal.cc/embed.js"></script>
<script>
// Open booking popup
Supercal.popup('username/30min', {
theme: 'dark',
accent: 'ff6b35',
onBooked: (booking) => {
console.log('Booking created:', booking);
}
});
// Close popup
Supercal.close();
</script>