diff --git a/src/App.js b/src/App.js
index a2c813c9..bf7c78f8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,85 +1,104 @@
-import React, { useEffect, useRef } from 'react';
-import { ThemeProvider } from '@mui/material';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { StyledEngineProvider } from '@mui/material/styles';
-import FingerprintJS from '@fingerprintjs/fingerprintjs';
-import routes from './routes';
-import { AppContent } from './views';
-import theme from './assets/styles/theme';
-import { initialize } from './services/telementryService';
-import { startEvent } from './services/callTelemetryIntract';
-import '@project-sunbird/telemetry-sdk/index.js';
+import React, { useEffect, useRef } from "react";
+import { ThemeProvider } from "@mui/material";
+import { BrowserRouter as Router } from "react-router-dom";
+import { StyledEngineProvider } from "@mui/material/styles";
+import FingerprintJS from "@fingerprintjs/fingerprintjs";
+import routes from "./routes";
+import { AppContent } from "./views";
+import theme from "./assets/styles/theme";
+import { initialize } from "./services/telementryService";
+import { startEvent } from "./services/callTelemetryIntract";
+import "@project-sunbird/telemetry-sdk/index.js";
 
 const App = () => {
-    const ranonce = useRef(false); 
-    useEffect(() => {
-        const initService = async () => {
-            var did;
-            if (localStorage.getItem('fpDetails_v2') !== null) {
-                let fpDetails_v2 = localStorage.getItem('fpDetails_v2');
-                 did = fpDetails_v2.result;
-            } else {
-                 did = localStorage.getItem('did');
-            }
+  const ranonce = useRef(false);
+  useEffect(() => {
+    const initService = async () => {
+      var did;
+      if (localStorage.getItem("fpDetails_v2") !== null) {
+        let fpDetails_v2 = localStorage.getItem("fpDetails_v2");
+        did = fpDetails_v2.result;
+      } else {
+        did = localStorage.getItem("did");
+      }
 
-            await initialize({
-                context: {
-                    mode: process.env.REACT_APP_MODE, // To identify preview used by the user to play/edit/preview
-                    authToken: '', // Auth key to make  api calls
-                    did: did, // Unique id to identify the device or browser
-                    uid: 'anonymous',
-                    channel: process.env.REACT_APP_CHANNEL, // Unique id of the channel(Channel ID)
-                    env: process.env.REACT_APP_ENV,
+      await initialize({
+        context: {
+          mode: process.env.REACT_APP_MODE, // To identify preview used by the user to play/edit/preview
+          authToken: "", // Auth key to make  api calls
+          did: did, // Unique id to identify the device or browser
+          uid: "anonymous",
+          channel: process.env.REACT_APP_CHANNEL, // Unique id of the channel(Channel ID)
+          env: process.env.REACT_APP_ENV,
 
-                    pdata: {
-                        // optional
-                        id: process.env.REACT_APP_ID, // Producer ID. For ex: For sunbird it would be "portal" or "genie"
-                        ver: process.env.REACT_APP_VER, // Version of the App
-                        pid: process.env.REACT_APP_PID, // Optional. In case the component is distributed, then which instance of that component
-                    },
-                    tags: [
-                        // Defines the tags data
-                        '',
-                    ],
-                    timeDiff: 0, // Defines the time difference// Defines the object roll up data
-                    host: process.env.REACT_APP_HOST, // Defines the from which domain content should be load
-                    endpoint: process.env.REACT_APP_ENDPOINT,
-                    apislug: process.env.REACT_APP_APISLUG,
-                },
-                config: {},
-                // tslint:disable-next-line:max-line-length
-                metadata: {},
-            });
-            if (!ranonce.current) {
-                if (localStorage.getItem('contentSessionId') === null) {
-                    startEvent();
-                }
-                ranonce.current = true;
-            }
-        };
+          pdata: {
+            // optional
+            id: process.env.REACT_APP_ID, // Producer ID. For ex: For sunbird it would be "portal" or "genie"
+            ver: process.env.REACT_APP_VER, // Version of the App
+            pid: process.env.REACT_APP_PID, // Optional. In case the component is distributed, then which instance of that component
+          },
+          tags: [
+            // Defines the tags data
+            "",
+          ],
+          timeDiff: 0, // Defines the time difference// Defines the object roll up data
+          host: process.env.REACT_APP_HOST, // Defines the from which domain content should be load
+          endpoint: process.env.REACT_APP_ENDPOINT,
+          apislug: process.env.REACT_APP_APISLUG,
+        },
+        config: {},
+        // tslint:disable-next-line:max-line-length
+        metadata: {},
+      });
+      if (!ranonce.current) {
+        if (localStorage.getItem("contentSessionId") === null) {
+          startEvent();
+        }
+        ranonce.current = true;
+      }
+    };
 
-        const setFp = async () => {
-            const fp = await FingerprintJS.load();
+    const setFp = async () => {
+      const fp = await FingerprintJS.load();
 
-            const { visitorId } = await fp.get();
-            if (!localStorage.getItem('did')) {
-                localStorage.setItem('did', visitorId);
-            }
-            initService();
-        };
+      const { visitorId } = await fp.get();
+      if (!localStorage.getItem("did")) {
+        localStorage.setItem("did", visitorId);
+      }
+      initService();
+    };
 
-        setFp();
-     }, []);
+    setFp();
+  }, []);
 
-    return (
-        <StyledEngineProvider injectFirst>
-            <ThemeProvider theme={theme}>
-                <Router>
-                    <AppContent routes={routes} />
-                </Router>
-            </ThemeProvider>
-        </StyledEngineProvider>
-    );
+  useEffect(() => {
+    const handleMessage = (event) => {
+      // Destructure the message data
+      const { messageType, localStorageKeyValue } = event.data;
+      if (messageType === "customData") {
+        for (const item of localStorageKeyValue) {
+          const key = item.key;
+          const value = item.value;
+
+          localStorage.setItem(key, value);
+        }
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <Router>
+          <AppContent routes={routes} />
+        </Router>
+      </ThemeProvider>
+    </StyledEngineProvider>
+  );
 };
 
 export default App;