Calendly Integration Demo

A flexible and customizable integration solution for embedding Calendly scheduling widgets into your website. This project provides both inline and popup widget options with various customization features.

Features

Multiple Widget Types
- Inline Widget: Embedded directly in your webpage
- Popup Widget: Opens in a modal overlay
Customization Options
- Hide/Show event details
- Hide/Show cookie banner
- Enable/Disable auto-resize
- Pre-fill attendee information
Developer Tools
- Real-time code generation
- Event logging
- Copy-to-clipboard functionality
- Auto-formatting

Quick Start

Clone or download this repository
Replace the Calendly URL in config.url with your own Calendly scheduling link:

const config = {
    url: 'YOUR_CALENDLY_URL_HERE',
    hideDetails: false,
    hideCookieBanner: false,
    enableResize: false
};

Open index.html in a web browser

Usage

Basic Integration

Open the demo page
Select your preferred widget type (Inline/Popup)
Configure desired options
Click "Generate Code"
Copy the generated code
Paste into your website's HTML

Configuration Options

Widget Settings

Hide Event Type Details: Removes event information from the scheduling page
Hide Cookie Banner: Disables the GDPR cookie consent banner
Enable Auto Resize: Allows the widget to adjust its height automatically

Pre-fill Information

Name: Pre-populate the name field
Email: Pre-populate the email field
Custom Answer: Pre-fill custom question responses

Event Handling

The integration includes built-in event handling for:

Profile page views
Event type views
Date/time selection
Successful scheduling

Example event listener:

window.addEventListener('message', function(e) {
    if (e.origin === "https://calendly.com" && e.data.event) {
        console.log('Calendly Event:', e.data.event);
        if (e.data.event === 'calendly.event_scheduled') {
            console.log('Meeting scheduled!');
        }
    }
});

Technical Details

Dependencies

Calendly External Widget CSS
Calendly External Widget JavaScript

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Performance Considerations

JavaScript is loaded with defer attribute
CSS is only loaded for popup widgets
Minimal DOM manipulation
Event delegation for better performance

Integration Examples

Inline Widget

<!-- Calendly Inline Widget Begin -->
<div class="calendly-inline-widget" style="min-width:320px;height:700px;" id="calendly-embed"></div>
<script src="https://assets.calendly.com/assets/external/widget.js" defer></script>
<script>
window.addEventListener('load', function() {
    Calendly.initInlineWidget({
        url: 'YOUR_CALENDLY_URL',
        parentElement: document.getElementById('calendly-embed')
    });
});
</script>
<!-- Calendly Inline Widget End -->

Popup Widget

<!-- Calendly Widget Begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" defer></script>
<button onclick="openCalendlyPopup()">Schedule Meeting</button>
<script>
function openCalendlyPopup() {
    Calendly.initPopupWidget({
        url: 'YOUR_CALENDLY_URL'
    });
    return false;
}
</script>
<!-- Calendly Widget End -->

Customization

Styling

The demo includes default styles that can be customized:

Widget container styling
Button appearances
Notification displays
Event log formatting

Advanced Configuration

For advanced users, the integration supports:

Custom URL parameters
UTM tracking
Custom event handling
Dynamic prefill data

Troubleshooting

Common issues and solutions:

Widget Not Loading
- Check if Calendly scripts are loading properly
- Verify your Calendly URL is correct
- Check browser console for errors
Height Issues
- Enable auto-resize option
- Set explicit height in container div
- Check for CSS conflicts
Event Handling
- Verify origin in message listener
- Check event names match Calendly's documentation
- Ensure proper event bubbling

sozo-design/calendly-demo