Skip to main content

Apploy WebView Bridge API Reference

The Apploy Mobile App Builder loads your storefront inside a WebView and injects a JavaScript bridge that allows the webpage to communicate with the mobile app. NOTE: You must have the Apploy App Manager(App Embed Extension) turned on in your Theme.

T
Written by Toolstr Dev

Scripts running on the webpage can:

  • Trigger actions in the mobile app

  • Send analytics events

  • Update UI elements in the app

  • Request information from the mobile app

The bridge exposes two methods:

Method

Purpose

apployBridge.sendData()

Trigger actions in the mobile app (no response expected)

apployBridge.requestData()

Request data from the mobile app (returns a Promise)

Supported Bridge Types

Navigation

  • goBackToPreviousPage

  • redirectTo

  • openInTab

App Control

  • cartBadgeUpdate

  • refreshTab

  • reloadAllScreens

  • locationPermission

  • setLocale

  • openAppSettings

Analytics

  • event

User Attributes

  • setUserAttributes

  • removeUserAttribute

Data Requests

  • getActiveTabDetails

  • getAllTabDetails

  • getLocation

  • getCustomerDetails

  • getMicrophoneAccess

  • getPushNotificationPermissionStatus

Detecting the Apploy Mobile App

There are two ways to detect this.

Method 1: JavaScript Detection (Recommended for Scripts)

Use the apployAppManager.isMobileApp() method.

if (window.apployAppManager?.isMobileApp()) {
  console.log("Running inside Apploy mobile app");
}

Example usage with the bridge:

if (window.apployAppManager?.isMobileApp()) {

  window.apployBridge.sendData({
    type: "reloadAllScreens"
  });

}

This method works for JavaScript-based integrations and storefront scripts.

Method 2: Shopify Liquid Detection

If you are working inside a Shopify theme template or section, you can detect the Apploy app using the cart attribute _SalesChannel.

{% if cart.attributes['_SalesChannel'] == 'Apploy' %}
  <p>This customer is using the Apploy mobile app.</p>
{% endif %}

Example: Load a mobile-specific script.

{% if cart.attributes['_SalesChannel'] == 'Apploy' %}
<script src="{{ 'apploy-mobile.js' | asset_url }}"></script>
{% endif %}

When to Use Each Method

Method

When to Use

window.apployAppManager.isMobileApp()

JavaScript logic inside the storefront

Liquid check (cart.attributes['_SalesChannel'])

Shopify theme templates or conditional rendering

Apploy Bridge Methods

Method: sendData()

Used when you want to trigger an action in the mobile app without expecting a response.

Example

window.apployBridge.sendData({
  type: "reloadAllScreens"
});

Method: requestData()

Used when the webpage needs a response from the mobile app.

Returns a Promise.

Example

const res = await window.apployBridge.requestData({
  type: "getActiveTabDetails"
});

console.log(res.data);

Example: Request Location and Log Response

Use requestData() to ask the mobile app for the device location.

Example

async function requestLocation() {

  try {

    const res = await window.apployBridge.requestData({
      type: "getLocation"
    });

    console.log("Location Response:", res);

  } catch (error) {

    console.error("Failed to get location", error);

  }

}

Example Response

{
  "type": "getLocation",
  "data": {
    "granted": true,
    "coordinates": {
      "latitude": 19.076,
      "longitude": 72.877
    }
  }
}

Example: Use Coordinates

async function showUserLocation() {

  const res = await window.apployBridge.requestData({
    type: "getLocation"
  });

  if (!res.data.granted) {
    console.log("Location permission not granted");
    return;
  }

  const { latitude, longitude } = res.data.coordinates;

  console.log("Latitude:", latitude);
  console.log("Longitude:", longitude);

}

Example: Request Push Notification Status and Log Response


Fetches the current push notification permission status from the mobile app.

This API allows the web layer to determine whether push notifications are enabled, denied on the device.


Use requestData() to ask the mobile app for the push notification status.

Example

async function getPushPermissionStatus() {
  try {
    const res = await window.apployBridge.requestData({
      type: "getPushNotificationPermissionStatus"
    });

    console.log("Push Permission Status:", res.data);
  } catch (error) {
    console.error("Failed to get push permission status", error);
  }
}

Example Response

{
  "type": "getPushNotificationPermissionStatus",
  "data": {
    "granted": true,
    "status": "granted"
  }
}

Example: Request Microphone Access and Log Response

Use requestData() to ask the mobile app for the microphone access .

Example

async function requestMicrophoneAccess() {

  try {

    const res = await window.apployBridge.requestData({
      type: "getMicrophoneAccess"
    });

    console.log("Microphone Access Response:", res);

  } catch (error) {

    console.error("Failed to get Microphone Access", error);

  }

}

Example Response

{
  "type": "getMicrophoneAccess",
  "data": {
    "granted": true
  }
}

Navigation Bridges

goBackToPreviousPage

Navigates back in the mobile app navigation stack.

If running in a normal browser, it falls back to history.back().

function goBack() {

  if (window.apployAppManager?.apployCanGoBack) {

    window.apployBridge.sendData({
      type: "goBackToPreviousPage"
    });

  } else {

    history.back();

  }

}

Example button:

<button onclick="goBack()">Back</button>

redirectTo

Open a URL inside the mobile app using a bottom sheet.

window.apployBridge.sendData({
  type: "redirectTo",
  url: "https://example.com/promo"
});

Example: open product page

function openProduct(handle) {

  window.apployBridge.sendData({
    type: "redirectTo",
    url: `/products/${handle}`
  });

}

openInTab

Navigate to a specific tab and optionally execute a script.

window.apployBridge.sendData({
  type: "openInTab",
  id: "2804e432-dea0-41d8-a645-9e64741822e0",
  url: "https://example.com/account"
});

App Control Bridges

cartBadgeUpdate

Update the cart badge count in the mobile app.

function updateCartBadge(count) {

  window.apployBridge.sendData({
    type: "cartBadgeUpdate",
    count: count
  });

}

Example Shopify integration:

document.addEventListener("cart:updated", function (event) {

  const count = event.detail.item_count;

  window.apployBridge.sendData({
    type: "cartBadgeUpdate",
    count: count
  });

});

refreshTab

Refresh a specific tab in the mobile app.

window.apployBridge.sendData({
  type: "refreshTab",
  id: "TAB_ID"
});

openAppSettings

Opens the device app settings screen for the your mobile app.

This allows users to manually update permissions (such as location, microphone, notifications) when they have been denied or permanently blocked.

window.apployBridge.sendData({
  type: "openAppSettings"
});

reloadAllScreens

Reload all screens in the mobile app.

window.apployBridge.sendData({
  type: "reloadAllScreens"
});

Example use case:

function refreshAppAfterLogin() {

  window.apployBridge.sendData({
    type: "reloadAllScreens"
  });

}

locationPermission

Trigger the mobile location permission popup.

window.apployBridge.sendData({
  type: "locationPermission"
});

Example button:

<button onclick="window.apployBridge.sendData({ type: 'locationPermission' })">
Enable Location
</button>

setLocale

After changing the language/locale update the locale across the all the tabs. 

window.apployBridge.sendData({
  type: "setLocale",
  value: "/ar/"
});

Example button:

<button onclick="window.apployBridge.sendData({ type: "setLocale",
  value: "/ar/" })">
Change language 
</button>

Analytics Bridges

sendCustomEvent

Send custom analytics events to the mobile app.

window.apployBridge.sendData({
  type: "event",
  eventData: {
    name: "ProductViewed",
    type: "activity",
    data: {
      metrics: {
        value: 1
      },
      attributes: {
        productHandle: "running-shoes"
      }
    }
  }
});

Example: track add-to-cart

function trackAddToCart(productHandle) {

  window.apployBridge.sendData({
    type: "event",
    eventData: {
      name: "AddToCart",
      type: "conversion",
      data: {
        attributes: {
          product: productHandle
        }
      }
    }
  });

}

User Attribute Bridges

setUserAttributes

window.apployBridge.sendData({
  type: "setUserAttributes",
  attributes: {
    loyaltyTier: "gold",
    region: "pune"
  }
});

removeUserAttribute

window.apployBridge.sendData({
  type: "removeUserAttribute",
  key: "loyaltyTier"
});

Data Request Bridges

getActiveTabDetails

Get details about the currently active tab.

async function getActiveTab() {

  const res = await window.apployBridge.requestData({
    type: "getActiveTabDetails"
  });

  console.log("Active Tab:", res.data);

}

getAllTabDetails

Get details of all tabs in the mobile app.

async function getTabs() {

  const res = await window.apployBridge.requestData({
    type: "getAllTabDetails"
  });

  console.log("All Tabs:", res.data);

}

Timeout Behavior

Requests made using requestData() automatically timeout after 15 seconds if the mobile app does not respond.

Example error:

ApployBridge: Request timed out after 15 seconds

Best Practices

Use sendData() for actions that do not return data.

Use requestData() when the webpage expects a response.

Do not use:

window.ReactNativeWebView.postMessage()

Always communicate with the mobile app using:

window.apployBridge

Related Articles
Customizing In-App Experience
Did this answer your question?