diff --git a/app/web/src/render/live/logic/init.tsx b/app/web/src/render/live/logic/init.tsx
index 1dbe0dc8..8c735291 100644
--- a/app/web/src/render/live/logic/init.tsx
+++ b/app/web/src/render/live/logic/init.tsx
@@ -33,6 +33,7 @@ export const initLive = async (p: PG, domain_or_siteid: string) => {
     p.status = "loading";
 
     if (w.mobile && w.mobile.send) {
+      w.mobile.bind(p);
       w.mobile.send({ type: "ready" });
     }
 
@@ -48,6 +49,7 @@ export const initLive = async (p: PG, domain_or_siteid: string) => {
         if (
           location.hostname === "prasi.app" ||
           location.hostname === "prasi.web.andromedia.co.id" ||
+          location.hostname.includes("ngrok") ||
           location.hostname === "localhost" ||
           location.hostname === "127.0.0.1" ||
           location.hostname === "10.0.2.2" // android localhost
diff --git a/app/web/src/render/live/logic/mobile.ts b/app/web/src/render/live/logic/mobile.ts
index 391d5a67..7930fd42 100644
--- a/app/web/src/render/live/logic/mobile.ts
+++ b/app/web/src/render/live/logic/mobile.ts
@@ -1,5 +1,9 @@
+import { apiClient } from "web-utils";
+import { PG } from "./global";
+import { w } from "../../../utils/script/init-api";
+
 type NOTIF_ARG = {
-  user_id: string;
+  user_id: any;
   body: string;
   title: string;
   data?: any;
@@ -10,37 +14,94 @@ export const registerMobile = () => {
       register: (user_id: string) => {},
       send: (data: NOTIF_ARG) => {},
       onTap: (data: NOTIF_ARG) => {},
+      onReceive: (data: NOTIF_ARG) => {},
     },
   };
   if (window.parent) {
-    let config = { notif_token: "" };
+    let config = { notif_token: "", p: null as null | PG };
     window.addEventListener("message", ({ data: raw }) => {
       if (typeof raw === "object" && raw.mobile) {
-        const data = raw as unknown as {
-          type: "notification-token";
-          token: string;
-        };
+        const data = raw as unknown as
+          | {
+              type: "notification-token";
+              token: string;
+            }
+          | { type: "notification-tap"; notif: NOTIF_ARG }
+          | { type: "notification-receive"; notif: NOTIF_ARG };
 
         switch (data.type) {
           case "notification-token":
             config.notif_token = data.token;
-            console.log(config);
+            break;
+          case "notification-tap":
+            notifObject.notif.onTap(data.notif);
+            break;
+          case "notification-receive":
+            notifObject.notif.onReceive(data.notif);
             break;
         }
       }
     });
 
-    return {
+    const getP = () => {
+      const p = config.p;
+      if (p && p.site && p.site.api_url) {
+        const api = w.prasiApi[p.site.api_url];
+        if (
+          api &&
+          api.apiEntry &&
+          api.apiEntry._notif &&
+          p.script &&
+          p.script.api
+        ) {
+          return p;
+        }
+      }
+    };
+
+    const notifObject = {
       send: (msg: { type: "ready" }) => {
         window.parent.postMessage({ mobile: true, ...msg }, "*");
       },
+      bind(p: PG) {
+        config.p = p;
+      },
       config,
       notif: {
-        register: (user_id: string) => {},
-        send: (data: NOTIF_ARG) => {},
-        onTap: (data: NOTIF_ARG) => {},
+        register: async (user_id: any) => {
+          const p = getP();
+          if (p) {
+            return await p.script.api._notif("register", {
+              type: "register",
+              id: typeof user_id === "string" ? user_id : user_id.toString(),
+              token: config.notif_token,
+            });
+          }
+        },
+        send: async (data: NOTIF_ARG) => {
+          const p = getP();
+          if (p) {
+            return await p.script.api._notif("send", {
+              type: "send",
+              id:
+                typeof data.user_id === "string"
+                  ? data.user_id
+                  : data.user_id.toString(),
+              body: data.body,
+              title: data.title,
+              data: data.data,
+            });
+          }
+        },
+        onTap: (data: null | NOTIF_ARG) => {
+          console.log("ontap", data);
+        },
+        onReceive: (data: NOTIF_ARG) => {
+          console.log("onreceive", data);
+        },
       },
     };
+    return notifObject;
   }
   return {
     ...default_mobile,
diff --git a/app/web/src/utils/script/types/base.ts b/app/web/src/utils/script/types/base.ts
index 5ae694f2..7bcdf9e3 100644
--- a/app/web/src/utils/script/types/base.ts
+++ b/app/web/src/utils/script/types/base.ts
@@ -66,7 +66,13 @@ const mobile: {
       body: string,
       data: any
     }) => void;
-    onTap: (data: {
+    onTap: (data: null |{
+      user_id: string,
+      title: string,
+      body: string,
+      data: any
+    }) => void | Promise<void>;
+    onReceive: (data: {
       user_id: string,
       title: string,
       body: string,