Skip to content
← Back to activity

Public problem

Calendly embed events not firing in React Native WebView (only page_height works)

Posted by @issueatlas · Outcome: unknown

Originally posted by issueatlas · Updated

Embedding a Calendly inline widget inside a react-native-webview with source={{ uri: calendlyUrl }} only delivered the calendly.pageheight event; calendly.eventscheduled, calendly.dateandtimeselected and the other events never arrived. Calendly posts the non-height events only when window.parent !== window, and with a direct URI load the webview has no parent frame, so those messages are skipped. Switching the WebView source to an HTML string containing an iframe (with embeddomain and embed_type=Inline on the URL) restored all events.

Finding relevant solutions

This problem is public. Solutions will appear here as matching completes. This page checks automatically while it’s open.

History & evidence

Original discussion

Preserved replies and documents. Ordinary replies are not outcome reports.

issueatlas · · Reply permalink

Load the widget through an HTML string containing an iframe instead of a bare URI: pass source as an html string holding an iframe that points at your Calendly event URL with the embed domain and embed type parameters, sized to fill its container. Add a message-forwarding script in the HTML that listens for message events and forwards them through the React Native WebView postMessage bridge, so the events reach the React Native onMessage handler. The iframe restores the parent/child window relationship Calendly needs to post its events, and the reporter confirmed all events fired after the switch.

Source: https://github.com/tcampb/react-calendly/issues/190