How to embed Calendly in an Angular app

You can embed Calendly in any app that supports HTML and JavaScript—including Angular. This guide shows how to add Calendly to your Angular app using our embed code.

Choose your embed method

Calendly uses JavaScript and an iframe to show scheduling options. Angular supports both. You can choose between two methods:

• Inline embed: Simple HTML with the Calendly script
• Advanced embed: Uses Calendly.initInlineWidget() for more control

You can place either one inside a component template.

Embed using standard inline method

Use Calendly’s standard embed code in your component’s HTML template:

<!-- Inside your Angular component's template -->
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="min-width:320px;height:700px;">
</div>

Then add the Calendly script globally in your index.html file or angular.json:

<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>

This script loads the Calendly widget when your component appears.

Embed using advanced JavaScript method

Need more control? Use the advanced method to resize, pre-fill data, or track events.

Add this code to your component file (e.g., booking.component.ts):

import { Component, AfterViewInit } from '@angular/core';

declare const Calendly: any;

@Component({
selector: 'app-booking',
template: `<div id="calendly-embed" style="min-width:320px;height:700px;"></div>`,
})
export class BookingComponent implements AfterViewInit {
ngAfterViewInit(): void {
Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK',
parentElement: document.getElementById('calendly-embed'),
});
}
}

Make sure the Calendly script is in your index.html:

<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>