HTML in-app messages for Android support a bridge interface for web apps to interact with the MoEngage SDK.

The bridge contains a set of APIs that can be accessed using a global variable moengage.

The below table lists all the JS Bridge methods and in the subsequent sections, each API is explained in detail.

The subsequent sections provide more details on how to use each API. The provided JS Methods are classified into two categories - JS Methods for Actions and JS Methods for Data Tracking

Actions

The following sections will provide more details on the JS Methods for actions.

Dismiss In-App Message

To dismiss in-app messages use moengage.dismissMessage() API.

moengage.dismissMessage();

Navigation Actions

Navigate to Screen

You can open a screen using moengage.navigateToScreen(<screen-name>, <optional-data-json>).

var screenName = "com.moengage.sampleapp.ui.activity.MainActivity";
// Optionally add data json object
var attributes = {
  "nav_screen_attr1": "val1",
  "nav_screen_attr2": 100,
  "nav_screen_attr3": 123.11,
  "nav_screen_attr4": true
};
    
moengage.navigateToScreen(value, attributes);

Open Deeplink URL

To open a deeplink URL use moengage.openDeepLink(<deeplink-url>, <optional-data-json>).

var value = "moengage://testdeeplink/testActivity";
// Optionally add data json object
var attributes = {
  "nav_screen_attr1": "val1",
  "nav_screen_attr2": 100,
  "nav_screen_attr3": 123.11,
  "nav_screen_attr4": true
};
moengage.openDeepLink(value, attributes);

Open Richlanding Screen

To open a Richlanding screen use moengage.openRichLanding(<richlanding-url>, <data-json>).

var value = "https://www.google.com";
// Optionally add data json object
var attributes = {
  "nav_screen_attr1": "val1",
  "nav_screen_attr2": 100,
  "nav_screen_attr3": 123.11,
  "nav_screen_attr4": true
};
moengage.openRichLanding(value, attributes);

Open Web URL

To open a URL in a web browser use moengage.openWebURL(<web-url>, <optional-data-json>).

var value = "https://www.google.com";
// Optionally add data json object
var attributes = {
  "nav_screen_attr1": "val1",
  "nav_screen_attr2": 100,
  "nav_screen_attr3": 123.11,
  "nav_screen_attr4": true
};
    
moengage.openWebURL(value, attributes);

Copy Text to Clipboard

To copy text to clipboard use moengage.copyText(<text-to-copy>, <message>) API.

moengage.copyText("COUPON100", "Rs.100 OFF!");

Call

To perform call action use moengage.call(<mobile-number> API.

moengage.call("1234567890");

SMS

To send an SMS use moengage.sms(<mobile-number>, <message>) API.

moengage.sms("1234567890", "Hi There!");

Share

To share a string content use moengage.share(<share-text>) API.

moengage.share("Content to share");

Custom Action

To perform custom action set the data using moengage.customAction(<data-json>) API.

var attributes = {
  "attr1": "val1",
  "attr2": 100,
  "attr3": 123.11,
  "attr4": {
    "int": 30
  }
};
moengage.customAction(attributes);

Data Tracking

The following sections will provide more details on the JS Methods for data tracking.

Track Event

To track an event use moengage.trackEvent(eventName, generalAttrJson, locationAttrJson, dateAttrJson, isNonInteractive, shouldAttachCampaignMeta) API.

The trackEvent() takes in up to six parameters.

• eventName : String
• generalAttrJson : JSON Object for general attributes. Accepted data types are string, float, boolean, int, JSON objects.
  JavaScript

  {
    " <attribute_name >": " <attribute_value >",
    " <attribute_name >": " <attribute_value >",
    ...  
  }

• locationAttrJson : JSON Object for location attributes. Accepts attribute name and latitude and longitude
  JavaScript

  {
    " <attribute_name >": {
      "latitude":  <latitude >,
      "longitude":  <longitude >
    },
    " <attribute_name >": {
      "latitude":  <latitude >,
      "longitude":  <longitude >
    },
    ...
  }

• dateAttrJson : JSON Object for date-time attributes. Accepts only ISO-8601 format dates
  JavaScript

  {
    " <attribute_name >": "yyyy-MM-dd'T'HH:mm:ss.fff'Z'",
    " <attribute_name >": "yyyy-MM-dd'T'HH:mm:ss.fff'Z'",
    ...
  }

• isNonInteractive: true if you want the event to be non-interactive, else false.
• shouldAttachMetaData: true if you want to attach campaign metadata to the event, else false.

  info

  Note Apart from the eventName parameter, other parameters are non-mandatory you can pass {}. It is important to maintain the order in which parameters are passed, i.e. if you want to pass only the location attributes general attribute should be passed {}. For general cases, you would just be passing the event-name and event-attributes JSON and in this case you can skip the other params. A method for this case would be like - moengage.trackEvent(Response_Submitted,{"response1":"johndoe@gmail.com","response2":"approved"})

Track Click Event

To track widget click events use moengage.trackClick(widgetId) API. The <widgetId> can be int or string, otherwise, the click event will not be tracked.

//track click event
moengage.trackClick("image_1");
moengage.trackClick(10);

Track Dismiss

To track the in-app dismissal use moengage.trackDismiss() API.

moengage.trackDismiss();

Track Default User Attributes

The following JavaScript methods are available for tracking default user attributes.

Example:

// Set alias            
moengage.setAlias("user-alias");
// Set UniqueId
moengage.setUniqueId("unique-id");
// Set user name        
moengage.setUserName("John Doe");
// Set user first name
moengage.setFirstName("Jane");
//Set user last name                     
moengage.setLastName("Doe");
// Set Email id                    
moengage.setEmailId("abc@abc.com");
// Set mobile number
moengage.setMobileNumber("1234567890");
// Set User gender
moengage.setGender("female");
// Set user birthday    
moengage.setBirthDate("2017-08-02T06:05:30.000Z");
//Set user location       
moengage.setUserLocation(3.0539652, 77.672683);     
// Set rating value       
moengage.trackRating(4.5);

Track Custom user attributes

The following JavaScript methods are available for tracking custom user attributes.

Example:

// Set custom user attribute
moengage.setUserAttribute("int", 100);
moengage.setUserAttribute("float", 10.5);
moengage.setUserAttribute("String", "test");
moengage.setUserAttribute("Boolean", true);

//Set custom date attribute
moengage.setUserAttributeDate("Date1", "2017-08-02T06:05:30.000Z");

//Set custom user location
moengage.setUserAttributeLocation("Location 1", 3.0539652, 77.672683);