Wie Sie Calendly in eine Angular-App einbetten

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​:​//calendl​y.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.c​om/assets/​external/w​idget.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​:​//calendl​y.com/YOUR​_LINK',
parentElement: document.getElementById('calendly-embed'),
});
}
}

Stellen Sie sicher, dass das Calendly-Skript in Ihrer index.html ist:

<script src="https​:​//assets.​calendly.c​om/assets/​external/w​idget.js" type="text/javascript"></script>

Empfehlungen

• Legen Sie eine Höhe von mindestens 700px fest, um Scrollbalken zu vermeiden.
• Rufen Sie Calendly.initInlineWidget() nur einmal pro Render auf.
• Testen Sie auf Probleme bei der Verwendung von Angular-Weiterleitung.
• Laden Sie das Skript zwischen Routenänderungen nicht erneut.

Benötigen Sie ein Beispiel?

Sehen Sie sich ein Arbeitsbeispiel mit einer Antwort eines Calendly-Ingenieurs an.