Configuring embed integrations

// Using FullStory sdk
import { FullStory, init } from '@fullstory/browser';

export default function Index() {
  const [url1]: string = useLoaderData();
  const [omniReady, setOmniReady] = useState(false)

  // Listen for events from Omni.
  useEffect(() => {
    const listener = async (event: MessageEvent) => {
      switch (event.data.name) {
        // When a page:changed event is emitted from Omni, we can assume the Omni iframe is loaded
        // and ready to receive events from the parent page.
        case "page:changed": {
          setOmniReady(true);
          break;
        }
      }
    };
    window.addEventListener("message", listener);
  }, []);

  // Send integration:enable event to Omni when ready and initialize FullStory.
  useEffect(() => {
    if (omniReady) {
      // Send integration:enable event to Omni via postMessage to iframe.
      document
        .querySelector("iframe")
        ?.contentWindow?.postMessage(
          {
            name: 'integration:enable',
            payload: { name: 'fullstory' }, // Payload must include name: 'fullstory'
          },
          '*'
        );

      // Initialize FullStory
      init({ orgId: '[YOUR_FULLSTORY_ORG_ID]' }, () => {
        // Note: Unlike LogRocket, FullStory requires the parent application
        // handle identification.
        FullStory('setIdentity', {
          properties: {
            displayName: '[YOUR_TRACKED_USERS_NAME]',
          },
          uid: '[YOUR_TRACKED_USERS_UID]',
          })
      });
    }
  }, [omniReady]);

  return (
    <div
      style={{
        fontFamily: "system-ui, sans-serif",
        lineHeight: "1.8",
        width: "100%",
        height: "100%",
      }}
    >
      <iframe src={url1} width={"100%"} height={"800px"} />
    </div>
  );
}

// Import LogRocket sdk
import LogRocket from "logrocket";

export default function Index() {
  // Embed URL from server
  const [url1]: string = useLoaderData();
  const [omniReady, setOmniReady] = useState(false)

  // Add Omni event listener.
  useEffect(() => {
    const listener = async (event: MessageEvent) => {
      switch (event.data.name) {
        // When a page:changed event is emitted from Omni, we can assume the Omni iframe is loaded
        // and ready to receive events from the parent page.
        case "page:changed": {
          setOmniReady(true);
          break;
        }
      }
    };
    window.addEventListener("message", listener);
  }, []);

  // Send integration:enable event to Omni when ready and initiate LogRocket.
  useEffect(() => {
    // Wait for the Omni iframe to load before sending the `integration:enable` event.
    if (omniReady) {
      document
        .querySelector("iframe")
        ?.contentWindow?.postMessage(
          {
            name: "integration:enable",
            payload: { name: 'logrocket', parentDomain: "[YOUR_PARENT_APPLICATION_DOMAIN]" }, // standard payload for enabling LogRocket
          },
          '*'
        );

      // Initiate LogRocket
      // Note: The mergeIframes and childDomains parameters are necessary to
      // make sure Omni iframes are included in session.
      LogRocket.init('[YOUR_LOGROCKET_APP_ID]', {
        mergeIframes: true,
        childDomains: ["[YOUR_OMNI_EMBED_DOMAIN]"]
      });
    }
  }, [omniReady]);

  return (
    <div
      style={{
        fontFamily: "system-ui, sans-serif",
        lineHeight: "1.8",
        width: "100%",
        height: "100%",
      }}
    >
      <iframe src={url1} width={"100%"} height={"800px"} />
    </div>
  );
}