Events not properly encoded, only PAGE_HEIGHT works

[wsdt]

    PROFILE_PAGE_VIEWED = "calendly.profile_page_viewed",
    EVENT_TYPE_VIEWED = "calendly.event_type_viewed",
    DATE_AND_TIME_SELECTED = "calendly.date_and_time_selected",
    EVENT_SCHEDULED = "calendly.event_scheduled",
    PAGE_HEIGHT = "calendly.page_height",

When using this we consistently only receive the onPageHeight event such as On page height {"height": "602px"} when logging to the console.

Other than that we only receive events of type "undefined" such as:

{"canGoBack": false, "canGoForward": false, "data": "\"{\\\"originatingScript\\\":\\\"m2\\\",\\\"payload\\\":{\\\"guid\\\":\\\"5fed1a94-6532-49f5-81bc-fa79318799530 f36f3\\\",\\\"muid\\\":\\\"0e990be4-3f1f-4e35-a502-e5f66a32da67a2e3a0\\\",\\\"sid\\\":\\\"e5b8189a-0928-4837-be2f-31357f50385a692760\\\"}}\"", "loading": false, "target": 89, "title": "Select a Date & Time - Calendly", "url": "https://calendly.com/.............?hide_event_type_details=1&hide_landing_page_details=1&primary_color=36797d&hide_gdpr_banner=1&utm_source=MobileApp&embed_type=Inline&embed_domain=1&month=2024-09"}

Are these CalendlyEvent selectors still up-to-date? Thank you in advance!

[wsdt]

They are basically just not fired.

[tcampb]

Hey @wsdt,

Would you be able to provide the calendly URL you are testing? I'm not able to reproduce the issue; when using my link I'm seeing all events fired.

[wsdt]

https://calendly.com/wavect/safety-call

We were able to capture it ourselves by listening to onSubmit but not the Calendly Events.

[tcampb]

Thanks for sending this over, I tested the URL in this project - https://stackblitz.com/edit/stackblitz-starters-7cdiye?file=src%2FApp.tsx - and I was able to see the events in the console. Can you confirm that this example project works for you as well?

[wsdt]

window.addEventListener('message', function(e) {
        window.ReactNativeWebView.postMessage(JSON.stringify(e.data));
      });

We are capturing the events through this right now as we are using it through a WebView/IFrame.

The PageHeight works, but the others don't. Are they emitted differently?

[tcampb]

Yes, Calendly only sends the other events if the embed_domain query parameter is defined. If you are embedding this in a mobile app it's possible that the domain is undefined.

Could you try adding this query param to your url, for example:

https://calendly.com/wavect/safety-call?embed_domain=1

[tcampb]

Also, I believe they require an embed_type as well, so the full url would be:

https://calendly.com/wavect/safety-call?embed_domain=1&embed_type=Inline

[wsdt]

https://calendly.com/wavect/safety-call?hide_event_type_details=1&hide_landing_page_details=1&primary_color=36797d&hide_gdpr_banner=1&utm_source=MobileApp&embed_type=Inline&embed_domain=1&month=2024-09

That's the one I'm using to be more specific.

[tcampb]

Looking at Calendly's client code I do see a difference in how the events are emitted.

Page height event:

window.parent.postMessage(data, '*')

Other events:

if (window.parent !== window) {
   window.parent.postMessage(data, '*')
}

I'm not too familiar with react native, but I'm wondering if the window.parent and window are the same object in this context?

[wsdt]

Interesting!

Tried it now this way, but it also didn't work interestingly.

       function captureMessage(event) {
    window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
  }

  // Capture messages sent to window
  window.addEventListener('message', captureMessage);

  // Capture messages sent to window.parent
  var originalPostMessage = window.parent.postMessage;
  window.parent.postMessage = function(message, targetOrigin, transfer) {
    captureMessage({data: message});
    originalPostMessage.call(this, message, targetOrigin, transfer);
  };

[tcampb]

@wsdt - how are you rendering the iframe in your mobile app? Are you using react-native-webview (https://docs.expo.dev/versions/latest/sdk/webview/)?

If so, are you passing in the html or a uri?

[wsdt]

This is what I'm doing, yes:

import { TR, i18n } from "@/localization/translate.service";
import React, { FC, useRef, useState } from "react";
import { DimensionValue } from "react-native";
import { WebView, WebViewMessageEvent } from "react-native-webview";
import {
    CalendlyEvent,
    IframeTitle,
    LoadingSpinner,
    PageSettings,
    Prefill,
    Utm,
    formatCalendlyUrl,
} from "./OCalendlyBase";
import styles from "./OCalendlyInline.styles";
import CalendlyLoadingSpinner from "./OCalendlyLoadingSpinner";

export interface Props {
    url: string;
    prefill?: Prefill;
    utm?: Utm;
    styles?: React.CSSProperties | undefined;
    pageSettings?: PageSettings;
    iframeTitle?: IframeTitle;
    LoadingSpinner?: LoadingSpinner;
    onEventScheduled?: (event: any) => void;
    onDateAndTimeSelected?: (event: any) => void;
    onEventTypeViewed?: (event: any) => void;
    onProfilePageViewed?: (event: any) => void;
    onPageHeight?: (event: any) => void;
}

const OCalendlyInline: FC<Props> = ({
    url,
    prefill,
    utm,
    pageSettings,
    iframeTitle,
    LoadingSpinner = CalendlyLoadingSpinner,
    onEventScheduled,
    onDateAndTimeSelected,
    onEventTypeViewed,
    onProfilePageViewed,
    onPageHeight,
}) => {
    const [isLoading, setIsLoading] = useState(true);
    const [webViewHeight, setWebViewHeight] = useState<DimensionValue>();
    const webViewRef = useRef<WebView>(null);

    // @dev This one might be more native/cleaner, but doesn't work for the Calendly events (except of PageHeight somehow)
    const injectedJavaScript = `
    (function() {
      window.addEventListener('message', function(e) {
        window.ReactNativeWebView.postMessage(JSON.stringify(e.data));
      });
      window.addEventListener('submit', event => {
                window.ReactNativeWebView.postMessage(JSON.stringify({event: event.type,payload:event}));
            });
      true;
    })();
  `;

    const handleMessage = (event: WebViewMessageEvent) => {
        try {
            const data = JSON.parse(event.nativeEvent.data);

            switch (data.event) {
                /** @dev Calendly is not correctly emitting the events except of PageHeight, for that reason we also just listen to "submit" */
                case "submit" || CalendlyEvent.EVENT_SCHEDULED:
                    onEventScheduled?.(data.payload);
                    break;
                case CalendlyEvent.DATE_AND_TIME_SELECTED:
                    onDateAndTimeSelected?.(data.payload);
                    break;
                case CalendlyEvent.EVENT_TYPE_VIEWED:
                    onEventTypeViewed?.(data.payload);
                    break;
                case CalendlyEvent.PROFILE_PAGE_VIEWED:
                    onProfilePageViewed?.(data.payload);
                    break;
                case CalendlyEvent.PAGE_HEIGHT:
                    setWebViewHeight(
                        parseInt(data.payload.height.replace("px", "")),
                    );
                    onPageHeight?.(data.payload);
                    break;
            }
        } catch (error) {
            console.error("Failed to parse WebView message:", error);
        }
    };

    const src = formatCalendlyUrl({
        url,
        pageSettings,
        prefill,
        utm,
        embedType: "Inline",
    });

    return (
        <>
            {isLoading && <LoadingSpinner />}
            <WebView
                ref={webViewRef}
                style={[styles.webView, { height: webViewHeight }]}
                source={{ uri: src }}
                originWhitelist={["*"]}
                onLoadEnd={() => setIsLoading(false)}
                injectedJavaScript={injectedJavaScript}
                onMessage={handleMessage}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                startInLoadingState={true}
                scalesPageToFit={true}
                onError={(syntheticEvent) => {
                    const { nativeEvent } = syntheticEvent;
                    console.error("WebView error: ", nativeEvent);
                }}
                onHttpError={(syntheticEvent) => {
                    const { nativeEvent } = syntheticEvent;
                    console.error("WebView HTTP error: ", nativeEvent);
                }}
                title={iframeTitle || i18n.t(TR.calendlySchedulingPageDefault)}
            />
        </>
    );
};

export default OCalendlyInline;

[tcampb]

@wsdt - would you be able to use the html prop instead of injectedJavaScript? I'm not sure why this is the case, but I was able to get the events to fire using the following code:

const html = `
<script>
window.addEventListener('message', function(e) {
        window.ReactNativeWebView.postMessage(JSON.stringify(e.data));
      });
</script>
<iframe width="100%" height="100%" src="https://calendly.com/calforce-support?embed_domain=1&embed_type=Inline"
`

<Webview source={{ html }} onMessage={(event) => alert(event.nativeEvent.data)} />

[wsdt]

    const src = formatCalendlyUrl({
        url,
        pageSettings,
        prefill,
        utm,
        embedType: "Inline",
    });

    const html = `
<script>
window.addEventListener('message', function(e) {
        window.ReactNativeWebView.postMessage(JSON.stringify(e.data));
      });
</script>
<iframe width="100%" height="100%" src={src} />
`

    return (
        <>
            {isLoading && <LoadingSpinner />}
            <WebView
                ref={webViewRef}
                style={[styles.webView, { height: webViewHeight }]}
                source={{ html }}
                originWhitelist={["*"]}
                onLoadEnd={() => setIsLoading(false)}
                onMessage={handleMessage}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                startInLoadingState={true}
                scalesPageToFit={true}
                onError={(syntheticEvent) => {
                    const { nativeEvent } = syntheticEvent;
                    console.error("WebView error: ", nativeEvent);
                }}
                onHttpError={(syntheticEvent) => {
                    const { nativeEvent } = syntheticEvent;
                    console.error("WebView HTTP error: ", nativeEvent);
                }}
                title={iframeTitle || i18n.t(TR.calendlySchedulingPageDefault)}
            />
        </>
    );
    ```
    
    Unfortunately I just receive a blank screen with this approach.

[tcampb]

@wsdt - from the code I see above I'm not able to reproduce the issue. Do you happen to have a public github repository that I could pull down to recreate the issue? I'm using the latest version of RN and webview, not sure if that changes anything.