Flow Bridge API Overview

The JavaScript API available inside your flows for interacting with the native app.

Introduction#

When a flow is displayed, it runs inside a WebView with a JavaScript bridge that connects your flow's code to the native app. The bridge provides access to:

• Attribution and parameters passed from the app
• Flow control to complete or dismiss the flow
• Event tracking for analytics
• Permission requests (notifications, ATT, location)
• Native utilities (haptics, sounds, URLs)

Accessing the Bridge#

The bridge is available as window.Mobana (or just Mobana) inside your flow:

flow.js

// Inside your flow's JavaScript
document.addEventListener('DOMContentLoaded', () => {
  // Get attribution data
  const attribution = Mobana.getAttribution();
  
  // Get custom params passed from the app
  const params = Mobana.getParams();
  
  // Example: personalize greeting
  if (params.userName) {
    document.getElementById('greeting').textContent = `Welcome, ${params.userName}!`;
  }
  
  // Complete button handler
  document.getElementById('continue-btn').addEventListener('click', () => {
    Mobana.trackEvent('welcome_continued');
    Mobana.haptic('success');
    Mobana.complete({ onboardingCompleted: true });
  });
  
  // Dismiss button handler
  document.getElementById('skip-btn').addEventListener('click', () => {
    Mobana.dismiss();
  });
});

Waiting for the Bridge#

The bridge is injected before your flow's JavaScript runs, so it's usually available immediately. However, you can listen for the ready event:

// Wait for bridge to be ready
document.addEventListener('mobana:ready', () => {
  // Bridge is ready, safe to use Mobana
  initializeFlow();
});

// Or check immediately
if (window.__mobanaBridgeReady) {
  initializeFlow();
}

API Categories#

Data Access

Get attribution, params, device info

getAttribution()getParams()getInstallId()getPlatform()+2 more

Flow Control

Complete, dismiss, app callbacks

complete()dismiss()requestCallback()

Flow Events

Track events for analytics

trackEvent()

Permissions

Request notifications, ATT, location

requestNotificationPermission()requestATTPermission()requestLocationPermission()

Native Utilities

Haptics, sounds, URLs, reviews

haptic()playSound()openURL()requestAppReview()

CSS Variables#

In addition to JavaScript APIs, the bridge provides CSS variables for safe areas and theming:

/* Available CSS variables */
:root {
  --safe-area-top: 47px;
  --safe-area-bottom: 34px;
  --safe-area-left: 0px;
  --safe-area-right: 0px;
  --screen-width: 393px;
  --screen-height: 852px;
  --color-scheme: light; /* or 'dark' */
}

See CSS Variables for details.

Error Handling#

Bridge methods are designed to be safe and never throw. Async methods return Promises that resolve with results (or null on error). This ensures your flow doesn't break due to permission denials or other issues.

MobanaProvider

Data Access