How to embed Calendly in a mobile app

Add Calendly to your mobile app using our embed options. This lets users schedule with you directly—without leaving your app.

Display Calendly using a WebView

Calendly embeds are designed to run in a browser. To use them in a mobile app, most developers load the embed code into a WebView.

A WebView is a browser window that opens inside your app. It shows Calendly’s scheduling page like a regular webpage, but within your app’s layout.

Supported embed types

You can use any standard or advanced Calendly embed in a WebView:

  • Inline embed
  • Popup widget
  • Popup text

Calendly embeds use HTML and JavaScript. If your mobile framework supports WebView and those technologies, it will work.

Select the right embed for your app

Calendly offers two levels of embed control:

Option Best for
Standard  Simple setups; quick and easy
Advanced Custom styling, event tracking, pre-fill

Load Calendly in a WebView

Use your mobile framework’s WebView component to load Calendly. Here’s a basic example using an iframe:

<iframe src="https://calendly.com/YOUR_LINK"
style="width: 100%; min-width: 320px; height: 700px;"
frameborder="0">
</iframe>
Or use the JavaScript API for more control:
<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>

Troubleshoot your embed

  • Test on real devices—behavior can differ from emulators
  • Start with a standard embed to check compatibility
  • Confirm JavaScript is enabled in your WebView for advanced features
  • For iOS, watch for content overflow and layout scaling in Safari-based WebViews
  • Use developer options to pre-fill forms or track booking events

Unlock advanced features

With Calendly’s advanced embed options, you can:

To learn more, see Advanced Calendly embed for developers

 

.