Sie können Calendly in jede App einbetten, die HTML und JavaScript unterstützt – einschließlich Angular. Dieser Leitfaden zeigt, wie Sie Calendly mit unserem Einbettungscode in Ihre Angular-App integrieren.
Wählen Sie Ihre Einbettungsmethode aus
Calendly verwendet JavaScript und einen Iframe, um Terminplanungsoptionen anzuzeigen. Angular unterstützt beides. Sie können zwischen zwei Methoden wählen:
- Inline-Einbettung: Einfaches HTML mit dem Calendly-Skript
- Erweiterte Einbettung: Verwendet Calendly.initInlineWidget() für mehr Kontrolle
Sie können beide in einer Komponentenvorlage platzieren.
Mit der Standard-Inline-Methode einbetten
Verwenden Sie den Standard-Einbettungscode von Calendly in der HTML-Vorlage Ihrer Komponente:
<!-- 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>Fügen Sie das Calendly-Skript global in Ihrer index.html-Datei oder angular.json hinzu:
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>Dieses Skript lädt das Calendly-Widget, wenn Ihre Komponente erscheint.
Mit erweiterter JavaScript-Methode einbetten
Benötigen Sie mehr Kontrolle? Verwenden Sie die erweiterte Methode, um die Größe anzupassen, Daten vorab auszufüllen oder Ereignisse zu verfolgen.
Fügen Sie diesen Code zu Ihrer Komponentendatei hinzu (z. B. 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'),
});
}
}Stellen Sie sicher, dass das Calendly-Skript in Ihrer index.html ist: