Wie Sie Calendly in eine React-App einbetten

Wenn Sie eine React-App erstellen, können Sie Calendly einbetten, damit Benutzer einen Termin buchen können, ohne Ihre Website zu verlassen. Dieser Leitfaden behandelt Ihre Optionen und bietet Tipps für eine reibungslose Implementierung.

Verwenden Sie das React-Calendly-Paket.

Der einfachste Weg, Calendly in React einzubetten, ist die Verwendung des Drittanbieter-Pakets react-calendly. Obwohl es nicht von Calendly gewartet wird, wird es von vielen Entwicklern in der Produktion verwendet.

So beginnen Sie:

Installieren Sie das Paket mit npm oder yarn:

npm install react-calendly
# oder 
yarn add react-calendly

Importieren Sie die Komponente und verwenden Sie sie dann in Ihrem React-Code:

import { InlineWidget } from "react-calendly";

function BookingPage() {
return (
<InlineWidget url="https://calendly.com/YOUR_LINK" />
);
}

Dadurch wird Ihrer Seite eine Inline-Einbettung hinzugefügt.

Andere verfügbare Komponenten

Das React-Calendly-Paket unterstützt auch:

• PopupText – Rendert einen Textlink, der ein Popup öffnet
• PopupButton – zeigt eine Schaltfläche an, die den Planer öffnet
• PopupWidget – fügt Ihrer App ein schwebendes Widget hinzu

Besuchen Sie das React-Calendly-Paket, um vollständige Beispiele und Anpassungsoptionen zu erhalten.

Passen Sie Ihre Einbettung an

Sie können Eigenschaften übergeben, um das Widget anzupassen. Sie können beispielsweise:

• Füllen Sie das Buchungsformular mit den Details zur eingeladenen Person aus
• UTM-Parameter verfolgen
• Höhe und Stil steuern

Beispiel mit Eigenschaften:

<InlineWidget
url="https://calendly.com/YOUR_LINK"
styles={{ height: '700px' }}
utm={{ utmSource: 'facebook', utmCampaign: 'spring_sale' }}
prefill={{
name: 'Jane Doe',
email: 'jane@example.com'
}}
/>

Layoutprobleme beheben

Calendly verwendet Iframes. Einige React-Layouts – insbesondere Designs für mobile Geräte – können zu Problemen bei der Größenanpassung oder beim Scrollen führen.

Wenn Sie Scroll-Probleme bemerken (häufig auf iOS):

• Stellen Sie sicher, dass der Container mindestens 700px hoch ist
• Vermeiden Sie overflow: auto oder Container mit fester Höhe.
• Layout mit Browser-Entwicklungstools testen

Verwenden Sie das Standard-Einbettungsskript (ohne Paket)

Wenn Sie react-calendly nicht verwenden möchten, können Sie Calendly mit dem Standard-JavaScript und einem useEffect-Hook einbetten.

Beispiel:

import { useEffect } from "react";

function BookingPage() {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://assets.calendly.com/assets/external/widget.js";
script.async = true;
document.body.appendChild(script);

 window.Calendly.initInlineWidget({
url: "https://calendly.com/YOUR_LINK",
parentElement: document.getElementById("calendly-embed"),
});
}, []);

return <div id="calendly-embed" style={{ minWidth: "320px", height: "700px" }} />;
}

Dadurch haben Sie die volle Kontrolle, ähnlich wie bei der Einbettung von Calendly in reguläres HTML.