Apploy WebView Bridge API Reference

Note: To use these bridges, you must enable the Apploy App Manager Theme Extension.

Navigate back to previous page - `goBackToPreviousPage`

The goBackToPreviousPage bridge function allows your web page inside the mobile app WebView to navigate back to the previous page within the app’s navigation stack.
If the app is not running inside a mobile environment, it falls back to the browser’s native history.back() method.

This function is useful for implementing custom back button behavior in your eCommerce WebView pages.

Example Usage

if(window.apployAppManager.apployCanGoBack){
    window.apployAppManager.sendDataToMobileAppBridge({'type':'goBackToPreviousPage'});
}else{
    history.back();
}

Use Case

Use this bridge to implement a custom back button in your storefront or web app header. It ensures consistent navigation behavior on both mobile (WebView) and desktop browsers.

Update Back Button Visibility

You can determine if a back button should be visible using window.apployCanGoBack:

function updateBackButtonVisibility(){
const backButton=document.querySelector('.backcta');
if(!backButton)return;
if(window.apployCanGoBack){
    backButton.style.display='block';
 }else{
    backButton.style.display='none';
 }
}
updateBackButtonVisibility();

window.apployCanGoBack → true if the app can navigate back to a previous page.
false means the current page is likely the first (primary) page.

Integration Example

<button class="backcta" onclick="goBackToPreviousPage()">Back</button>
<script>
function goBackToPreviousPage(){
if(window.apployAppManager.apployCanGoBack){
    window.apployAppManager.sendDataToMobileAppBridge({'type':'goBackToPreviousPage'});
}else{
    history.back();
}
}
updateBackButtonVisibility();
</script>

Send any custom analytics/event data - sendCustomEvent

The sendCustomEvent bridge allows your web page to send any custom event to the mobile app.

This can be used for analytics, tracking conversions, or logging any user activity.

The event is sent via the app bridge and is only processed if running inside the mobile app. Otherwise, the button or action will simply do nothing in a browser environment.

Example Usage

<button id="send-event" onclick="window.apployAppManager.sendDataToMobileAppBridge({'type':'event','eventData':{'name':'CustomEvent','type':'conversion/activity','data':{'metrics':{},'attributes':{}}}});">Send Custom Event</button>

Use Case

Use this bridge when you want to:

Track custom user actions (e.g., clicks, purchases, signups).
Send conversion or activity events to your analytics pipeline.
Capture metrics and attributes dynamically from your web app.

Event Structure

{
  "type": "event",
  "eventData": {
     "name": "CustomEvent",
     "type": "conversion/activity",
     "data": {
     "metrics": {},
     "attributes": {}
  }
 }
}

Note:

metrics can include numeric values such as counts, amounts, or scores.
attributes can include descriptive values like product names, user IDs, or categories.

Integration Example

function sendCustomEvent(){  window.apployAppManager.sendDataToMobileAppBridge({'type':'event','eventData':{'name':'Purchase','type':'conversion/activity','data':{'metrics': {'amount':100},'attributes':{'productId':'123'}}}});
}

Manage user-level attributes - setUserAttributes & removeUserAttribute

These bridges allow your web page to set or remove user-level attributes that will be sent automatically with all future custom events.

setUserAttributes → Adds or updates one or multiple attributes for the current user.
removeUserAttribute → Removes a specific user attribute.

Attributes are useful for enriching analytics and tracking personalized data (e.g., customer ID, plan type, region, loyalty status).

Example Usage

<button id="set-user-attributes" onclick="window.apployAppManager.sendDataToMobileAppBridge({'type':'setUserAttributes','attributes':{'userId':'12345','plan':'premium','region':'US','loyaltyTier':'gold'}});">Set User Attributes</button>

window.apployAppManager.sendDataToMobileAppBridge({'type':'removeUserAttribute','key':'loyaltyTier'});

With these two bridges, merchants can fully customize user metadata and track personalized events efficiently.

Integration Example

function removeUserAttribute(key){
window.apployAppManager.sendDataToMobileAppBridge({'type':'removeUserAttribute','key':key});
}
removeUserAttribute('loyaltyTier');

Update the cart badge count - cartBadgeUpdate

The cartBadgeUpdate bridge updates the cart badge count in the mobile app header or navigation bar.
It allows your web page to notify the app of the current number of items in the user’s cart.

This is useful for real-time cart updates in WebView apps.

Example Usage

<button id="update-cart" onclick="window.apployAppManager.sendDataToMobileAppBridge({'type':'cartBadgeUpdate','cart':{'itemCount':10}});">Update Cart Count</button>

Integration Example

function updateCartBadge(count){
  window.apployAppManager.sendDataToMobileAppBridge({'type':'cartBadgeUpdate','cart':{'itemCount':count}});
}
updateCartBadge(3);

Refresh a specific tab by ID - refreshTab

The refreshTab bridge allows your web page to refresh a specific tab in the mobile app.
You need to provide the tab ID, which is assigned by the Apploy team.

This is useful when you want to programmatically reload a tab after a certain action (e.g., updating cart, completing checkout, or changing user settings).

Example Usage

<button id="refresh-tab" onclick="window.apployAppManager.sendDataToMobileAppBridge({'type':'refreshTab','id':'TAB_ID_HERE'});">Refresh Tab</button>

Integration Example

function refreshTab(tabId){
window.apployAppManager.sendDataToMobileAppBridge({'type':'refreshTab','id':tabId});
}
refreshTab('899ac33e-2530-400e-bd7f-f74609fff9e0');

Inject or update content/script in a tab - updateContentInTab

The updateContentInTab bridge allows your web page to inject or update content/scripts in a specific tab of the mobile app WebView.
You need to provide the tab ID (assigned by the Apploy team) and the JavaScript code to execute in that tab.

This is useful for dynamically updating UI elements, triggering functions, or modifying content in other tabs based on certain conditions.

Example Usage

<button id="update-tab-content" onclick="window.apployAppManager.sendDataToMobileAppBridge(JSON.stringify({'type':'updateContentInTab','id':'TAB_ID_HERE','script':'window.toggleSiteMenuSidebar();true;'}));">Update content in a tab</button>

Parameter	Type	Description
`id`	String	The unique tab ID assigned by Apploy team
`script`	String	JavaScript code to execute in the specified tab. Must return `true` to confirm execution.

This bridge is perfect for conditional UI updates or script execution in other tabs without requiring the user to reload the app.

Integration Example

function updateTabContent(tabId, jsScript){
window.apployAppManager.sendDataToMobileAppBridge(JSON.stringify({'type':'updateContentInTab','id':tabId,'script':jsScript}));
}
updateTabContent('2804e432-dea0-41d8-a645-9e64741822e0','window.toggleSiteMenuSidebar();true;');

Refresh all screens in the app - reloadAllScreens

The reloadAllScreens bridge allows your web page to refresh all screens/tabs in the mobile app.
This ensures that every screen displays the latest content without requiring the user to manually reload the app.

Example Usage

<button id="reload-all-screens" onclick="window.apployAppManager.sendDataToMobileAppBridge(JSON.stringify({'type':'reloadAllScreens'}));">Reload All Screens</button>

Parameters

This bridge does not require any parameters. Simply calling it will trigger a refresh of all active screens/tabs in the app.

Integration Example

function reloadAllScreens(){
window.apployAppManager.sendDataToMobileAppBridge(JSON.stringify({'type':'reloadAllScreens'}));
}
reloadAllScreens();

This bridge is useful for synchronizing content across multiple screens or tabs after a major update, such as cart changes, promotions, or user profile updates.

Open a URL in bottom sheet - redirectTo

The redirectTo bridge allows your web page to redirect the user to a specific URL within the mobile app.

The URL will open in a bottom sheet, keeping the current app context intact.

This is useful for opening external links, promotional pages, or deep links without leaving the app.

Example Usage

<button id="redirect-to" onclick="window.apployAppManager.sendDataToMobileAppBridge({'type':'redirectTo','url':'https://example.com'});">Redirect To URL</button>

Parameters

Parameter	Type	Description
`url`	String	The URL to open in the bottom sheet. Example: `'https://example.com'`

Note: Make sure the URL is valid and includes the protocol (https:// or http://).

Integration Example

function redirectTo(url){
window.apployAppManager.sendDataToMobileAppBridge({'type':'redirectTo','url':url});
}
redirectTo('https://example.com/promo');

This bridge is ideal for seamless in-app navigation to external pages without breaking the user experience.

Open URL/execute script in specific tab - openInTab

The openInTab bridge allows your web page to open a specific URL and/or execute JavaScript in a specified tab of the mobile app.
The bridge will navigate to the specified tab, open the URL in a bottom sheet, and execute the provided script (if any).

The tab ID is provided by the Apploy team.

Example Usage

<button id="open-in-tab" onclick="window.apployAppManager.sendDataToMobileAppBridge({'type':'openInTab','url':'https://example.com','script':'','id':'TAB_ID_HERE'});">Open In Tab</button>

Parameters

Parameter	Type	Description
`id`	String	The unique tab ID assigned by Apploy team
`url`	String	URL to open in the bottom sheet
`script`	String	Optional JavaScript code to execute in the tab (end with `true;`)

Note:

If script is provided, it will execute after navigating to the tab.
Always end scripts with true; for proper execution in WebView context.

Integration Example

function openInTab(tabId, url, jsScript=''){
window.apployAppManager.sendDataToMobileAppBridge({'type':'openInTab','id':tabId,'url':url,'script':jsScript});
}

openInTab('2804e432-dea0-41d8-a645-9e64741822e0','https://example.com','window.toggleSiteMenuSidebar();true;');

This bridge is ideal for dynamic navigation within specific tabs, enabling both URL opening and script execution in a single command.

Trigger location permission popup - locationPermission

The locationPermission bridge triggers the location permission popup in the mobile app.
It allows your web page to request geolocation access from the user within the app environment.

This is useful for features that require the user’s location, such as store locator, delivery tracking, or location-based offers.

Example Usage

<button id="location-permission" onclick="window.apployAppManager.sendDataToMobileAppBridge({'type':'locationPermission'});">Request Location Permission</button>

Parameters

This bridge does not require any parameters. Simply calling it will prompt the user for location access.

Integration Example

function requestLocationPermission(){
window.apployAppManager.sendDataToMobileAppBridge({'type':'locationPermission'});
}
requestLocationPermission();

This bridge is ideal for any feature that needs real-time user location while keeping the experience within the app.

Get info of the active tab - getActiveTabDetails

The getActiveTabDetails bridge allows your web page to request information about the currently active tab in the mobile app.
Once invoked, the mobile app sends back tab details to the web page, which can be used for dynamic UI updates, navigation handling, or conditional logic.

Example Usage

<button id="get-active-tab-details" onclick="window.apployAppManager.sendDataToMobileAppBridge({'type':'getActiveTabDetails'});">Get Active Tab Details</button>

Response Structure

The response sent back from the app will have the following structure:

const tabInfo = {
  type: 'tabInfoResponse',        // Response type
  tabId: 'string',                // Unique tab ID
  position: 0,             // Index of the tab (0-based), -1 if unknown
  totalTabs: 3,             // Total number of tabs in bottom navigation
  stackDepth: 1,            // Depth of the navigation stack in this tab
  canGoBack: true,   // Whether the tab can go back (secondary tab or webview history)
  settings: {...} || null,             // Tab-specific settings, if any
  url: 'https://example.com',          // Initial tab URL
  label: 'Home',                       // Tab label
  webviewType: 'default', // Type of WebView('primary', 'secondary', 'default')
  currentUrl: 'https://example.com',   // Current URL loaded in the tab
};

Integration Example

// Request active tab details
function getActiveTabDetails(){
  if(window.apployAppManager)window.apployAppManager.sendDataToMobileAppBridge({'type':'getActiveTabDetails'});
}

// Example: listen for the tab info response
window.addEventListener('message', function(event){
  const data = JSON.parse(event.data);
  if(data.type === 'tabInfoResponse'){
    console.log('Active Tab Info:', data);
    // You can access:
    // data.tabId, data.position, data.totalTabs, data.canGoBack, data.url, data.label, etc.
  }
});

This bridge is ideal for conditional UI rendering or logic based on the current tab’s state, such as enabling/disabling buttons, updating headers, or refreshing content dynamically.

Get info of all displayed tabs - getAllTabDetails

The getAllTabDetails bridge allows your web page to request information about all displayed tabs in the mobile app.
Once invoked, the mobile app sends back details of every tab, including their IDs, positions, URLs, labels, types, and settings.

This is useful for dynamic tab management, navigation logic, or UI rendering based on all available tabs.

Example Usage

<button id="get-all-tab-details" onclick="window.apployAppManager.sendDataToMobileAppBridge({'type':'getAllTabDetails'});">Get All Tab Details</button>

Response Structure

The response from the app will have the following structure:

const response = {
  type: 'allTabsInfoResponse',         // Response type
  activeTabId: 'string',               // ID of the currently active tab
  totalTabs: 3,                         // Total number of tabs
  stackDepth: 1,                        // Depth of the navigation stack
  tabs: [                               // Array of all tab info
    {
      tabId: 'string',                  // Unique tab ID
      position: 0,                      // Tab position/index (0-based)
      settings: {...} || null,          // Tab-specific settings if any
      url: 'https://example.com',       // Tab URL
      label: 'Home',                     // Tab label
      type: 'url' | 'script'            // 'url' if a normal page, 'script' if custom script tab
    },
    // ...other tabs
  ]
};

Integration Example

window.addEventListener('message', function(event){
  const data = JSON.parse(event.data);
  if(data.type==='allTabsInfoResponse'){
    console.log('All Tabs Info:', data);
  }
});

This bridge is ideal for tab management or UI updates that depend on the full tab list, such as building custom tab headers, indicators, or dynamic content per tab.

Apploy WebView Bridge API Reference

Navigate back to previous page - goBackToPreviousPage

Send any custom analytics/event data - sendCustomEvent

Manage user-level attributes - setUserAttributes & removeUserAttribute

Update the cart badge count - cartBadgeUpdate

Refresh a specific tab by ID - refreshTab

Inject or update content/script in a tab - updateContentInTab

Refresh all screens in the app - reloadAllScreens

Open a URL in bottom sheet - redirectTo

Open URL/execute script in specific tab - openInTab

Trigger location permission popup - locationPermission

Get info of the active tab - getActiveTabDetails

Get info of all displayed tabs - getAllTabDetails

Navigate back to previous page - `goBackToPreviousPage`