@Raagavendiran06086 - 

Can you try adding the embed_domain query parameter to your Calendly URL? The calendly message is only sent when the url includes the embed_domain query parameter. Typically, the Calendly script will automatically detect the domain; however, in react native applications the webview domain is set to “undefined”.


https://stackoverflow.com/a/69017867/13641812

Hi Team,

It looks like you're trying to capture events from Calendly within your React Native app using a WebView. Based on the code you’ve shared, here are a few potential issues and solutions to consider:

1. Event Data Handling:

   • Ensure that the event.nativeEvent.data in your handleMessage function is actually receiving the data as expected. You might want to add additional logging to confirm the exact structure of the data being received.
   • Check if the parsedData.event field is correctly set in the Calendly.initInlineWidget call. It might be worth adding more debug information to see the contents of parsedData.

2. JavaScript Injection:

   • Verify that the injected JavaScript is being executed correctly. You can do this by adding a console.log statement in the onload function of the injected script to confirm it’s running.

script.onload = function() {
  console.log("Calendly widget script loaded");
  // Rest of your code
};
 

1. Cross-Origin Issues:

   • Ensure that there are no cross-origin issues preventing the postMessage from being sent or received. Browsers can sometimes block messages if the domains don’t match correctly.

2. WebView Configuration:

   • Check that the WebView component is properly configured and that javaScriptEnabled is set to true. Your configuration looks correct, but make sure there are no other settings or restrictions that might affect it.

3. Event Listening:

   • Confirm that the window.addEventListener('message', ...) is correctly set up and that it’s being triggered. Sometimes timing issues can prevent the listener from being active when messages are sent.

4. Calendly Widget Initialization:

   • Make sure the Calendly widget is correctly initialized. There could be issues if the widget URL or settings are not correctly specified.

Here's a modified version of your injectedJavaScript with additional logging to help with debugging:

const injectedJavaScript = `
(function() {
  console.log("Injecting Calendly widget script");
  var script = document.createElement('script');
  script.src = 'https://assets.calendly.com/assets/external/widget.js';
  script.async = true;
  script.onload = function() {
    console.log("Calendly widget script loaded");
    Calendly.initInlineWidget({
      url: '${calendlyUrl}',
      parentElement: document.getElementById('calendly-container'),
      prefill: {},
      utm: {}
    });

    window.addEventListener('message', function(event) {
      console.log("Message received:", event.data);
      if (event.data.event) {
        window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
      }
    });
  };
  document.head.appendChild(script);
})();
true;

Summary: By adding more logging and ensuring all parts of your integration are correctly configured, you should be able to identify why the events aren’t consistently captured. Check each step of the process to pinpoint where things might be going wrong.

Let me know if you need further assistance!

Thanks @Calforce50652. That’s worked for me.