Comment intégrer Calendly dans une application mobile

Ajoutez Calendly à votre application mobile en utilisant nos options d'intégration. Cela permet aux utilisateurs de planifier directement avec vous, sans quitter votre application.

Affichez Calendly avec une WebView

Les intégrations Calendly sont conçues pour fonctionner dans un navigateur. Pour les utiliser dans une application mobile, la plupart des développeurs chargent le code d'intégration dans une WebView.

Une WebView est une fenêtre de navigateur qui s'ouvre dans votre application. Elle affiche la page de planification de Calendly comme une page Web ordinaire, mais dans la mise en page de votre application.

Types d'intégration pris en charge

Vous pouvez utiliser n'importe quelle intégration Calendly standard ou avancée dans une WebView :

• Incorporation en ligne
• Widget de pop-up
• Texte de pop-up

Calendly utilise HTML et JavaScript. Si votre framework mobile prend en charge WebView et ces technologies, cela fonctionnera.

Sélectionnez la bonne intégration pour votre application

Calendly offre deux niveaux de contrôle des intégrations :

Charger Calendly dans une WebView

Utilisez le composant WebView de votre framework mobile pour charger Calendly. Voici un exemple de base utilisant un iframe :

<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>

Résoudre les problèmes de votre intégration

• Tester sur de vrais appareils : le comportement peut différer de celui des émulateurs
• Commencer par une intégration standard pour vérifier la compatibilité
• Confirmez que JavaScript est activé dans votre WebView pour des fonctionnalités avancées
• Pour iOS, surveillez le dépassement de contenu et l'adaptation de la mise en page dans les WebViews basées sur Safari
• Utiliser les options de développement pour préremplir des formulaires ou suivre les événements de réservation

Débloquer des fonctionnalités avancées

Avec les options d'intégration avancées de Calendly, vous pouvez :

• Pré-remplissez le formulaire de réservation avec les données utilisateur de votre application
• Suivre les événements de planification à l'aide de window.postMessage
• Redimensionner dynamiquement l'intégration en fonction des actions de l'utilisateur
• Ajouter un suivi de campagne avec des paramètres UTM

Pour en savoir plus, consulter l'intégration avancée de Calendly pour les développeurs.