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
Updated over a week ago

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

Analytics

  • event

User Attributes

  • setUserAttributes

  • removeUserAttribute

Data Requests

  • getActiveTabDetails

  • getAllTabDetails

  • getLocation

  • getCustomerDetails

Bridge Architecture

Webpage Script
     │
     │ requestData() / sendData()
     ▼
window.apployBridge
     │
     │ postMessage
     ▼
React Native Mobile App
     │
     │ processes request
     ▼
Response returned to WebView
     │
     ▼
Promise resolved automatically

Scripts using the bridge do not need to listen for message events manually.

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);

}

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"
});

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>

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
Add an app exclusive design block to your Apploy Mobile App
Setup a custom discounting logic for app users
Did this answer your question?