Wie Sie Calendly in eine mobile App einbetten

Fügen Sie Calendly mit unseren Einbettungsoptionen zu Ihrer mobilen App hinzu. So können Benutzer direkt Termine mit Ihnen vereinbaren – ohne Ihre App zu verlassen.

Calendly mit einer WebView anzeigen

Calendly-Einbettungen sind für die Ausführung in einem Browser konzipiert. Um sie in einer mobilen App zu verwenden, laden die meisten Entwickler den Einbettungscode in eine WebView.

Eine WebView ist ein Browserfenster, das in Ihrer App geöffnet wird. Sie zeigt die Terminplanungsseite von Calendly an, ähnlich wie eine normale Webseite, jedoch im Layout Ihrer App.

Unterstützte Einbettungstypen

Sie können jede Standard- oder erweiterte Einbettung von Calendly in eine WebView verwenden:

• Inline-Einbettung
• Popup-Widget
• Popup-Text

Calendly-Einbettungen verwenden HTML und JavaScript. Wenn Ihr mobiles Framework WebView und diese Technologien unterstützt, wird es funktionieren.

Wählen Sie die richtige Einbettung für Ihre App aus

Calendly bietet zwei Ebenen der Einbettungssteuerung:

Calendly in einer WebView laden

Verwenden Sie die WebView-Komponente Ihres mobilen Frameworks, um Calendly zu laden. Hier ist ein einfaches Beispiel für die Verwendung eines Iframes:

<iframe src="https://calendly.com/YOUR_LINK"
style="width: 100%; min-width: 320px; height: 700px;" 
frameborder="0">
</iframe>

<div id="calendly-embed" style="min-width:320px;height:700px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK',
parentElement: document.getElementById('calendly-embed')
});
</script>

Beheben Sie Probleme mit Ihrer Einbettung

• Auf echten Geräten testen – das Verhalten kann sich von dem der Emulatoren unterscheiden
• Beginnen Sie mit einer Standard-Einbettung, um die Kompatibilität zu prüfen
• Bestätigen Sie, dass JavaScript in Ihrer WebView aktiviert ist, um erweiterte Funktionen zu nutzen
• Achten Sie für iOS auf Überlauf von Inhalten und Layout-Skalierung in Safari-basierten WebViews
• Verwenden Sie Entwickleroptionen, um Formulare vorab auszufüllen oder Buchungsereignisse zu verfolgen

Erweiterte Funktionen freischalten

Mit den fortgeschrittenen Einbettungsoptionen von Calendly können Sie:

• Füllen Sie das Buchungsformular mit Benutzerdaten aus Ihrer App aus
• Planungsevents mithilfe von window.postMessage verfolgen
• Passen Sie die Größe der Einbettung dynamisch an Benutzeraktionen an
• Kampagnentracking mit UTM-Parametern hinzufügen

Weitere Informationen finden Sie unter Erweiterte Calendly-Einbettung für Entwickler.