Vous pouvez intégrer Calendly dans n'importe quelle application prenant en charge HTML et JavaScript, y compris Angular. Ce guide montre comment ajouter Calendly à votre application Angular à l'aide de notre code d'intégration.
Choisissez votre méthode d'intégration
Calendly utilise JavaScript et un iframe pour afficher les options de planification. Angular prend en charge les deux. Vous avez le choix entre deux méthodes :
- Incorporation en ligne : HTML simple avec le script Calendly
- Intégration avancée : utilise Calendly.initInlineWidget() pour plus de contrôle
Vous pouvez placer l'un ou l'autre dans un modèle de composant.
Intégrez à l'aide de la méthode inline standard
Veuillez utiliser le code d'intégration standard de Calendly dans le modèle HTML de votre composant :
<!-- 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>Ajoutez ensuite le script Calendly globalement dans votre fichier index.html ou angular.json :
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>Ce script charge le widget Calendly lorsque votre composant apparaît.
Intégrez à l'aide de la méthode JavaScript avancée
Besoin de plus de contrôle ? Utilisez la méthode avancée pour redimensionner, préremplir les données ou suivre les événements.
Ajoutez ce code à votre fichier de composant (par exemple, 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'),
});
}
}Assurez-vous que le script Calendly est dans votre index.html :