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:
Option | Ideal für |
Einfache Einrichtung; schnell und einfach | |
Benutzerdefiniertes Styling, Ereignisverfolgung, Vorausfüllen |
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>Oder verwenden Sie die JavaScript-API für mehr Kontrolle:
<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.