I’ve been following the example and Getting Started guide for implementing the embedded Calendly control, and how the parent window may receive notifications by setting a message handler. The window is not receiving any messages. .My react-native code is copied below.]
I also copied the code from another user’s question, with no success.
Does this feature work? I’m looking to be able to confirm within my application that an event has been scheduled.
Feel free to simply address the code in the other user’s question, but I have copied my code below (with the link replaced).
React-native prototype code:
import React, { useEffect } from 'react';
import { View, Text, TextInput } from 'react-native';
export const IFrameTest = () => {
const htmlContent = `<!DOCTYPE html>
<html>
<body>
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/xxxxmy-linkxxxx?embed_domain=localhost&embed_type=Inline&hide_landing_page_details=1&hide_gdpr_banner=1&background_color=d2d5dd&text_color=202421&primary_color=b03d1b" style="min-width:320px;height:700px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->
</body>
</html>`;
const encodedHTML = encodeURIComponent(htmlContent);
const iframeSrc = `data:text/html;charset=utf-8,${encodedHTML}`;
useEffect(() => {
const handleMessage = (event) => {
if (event.origin !== 'https://calendly.com') return;
console.log('Calendly event:', event.data);
};
window.addEventListener('message', handleMessage);
return () => {
window.removeEventListener('message', handleMessage);
};
}, s]);
return (
<View>
<iframe
src={iframeSrc}
width="100%"
height="100%"
frameBorder="0"
></iframe>
</View>
);
};