Developers Guide

Click Redirection Bridge for In-App WebViews

Suggest Edits

When you show an HTML-based in-app message (banner, modal, survey) inside your app, it’s rendered in a WebView. The “click redirection bridge” is a tiny interface that lets the HTML page ask the native app to open links, either in the app’s webview, the device browser, or via deep links.

NotifyVisitors exposes this bridge so your HTML can call a simple method on click. No custom native plumbing required.

What you can do with the bridge

  • Open a web page (offer pages, T&Cs, blog posts)
  • Open deep links / app screens (product page, cart, profile)
  • Pass dynamic data or user tokens
  • Track click events through the SDK callbacks

You’ll typically wire a button or link in your HTML to call the bridge method. The SDK handles the rest and logs the interaction.

NotifyVisitors Android JS Bridge — Actions & Methods

Action Method What It Does
Open a native screen (JSON)
(added since SDK v5.5.4)		 NV.openInAppScreen("click_through_data_as_json_string") Opens a native screen using a stringified JSON payload (e.g., activity + extras).
Open a deeplink (JSON)
(added since SDK v5.5.4)		 NV.openDeeplink("click_through_data_json_string") Opens a deeplink URL using a stringified JSON payload (optionally with extras).
Open a native/app screen (Activity) [deprecated] NV.openInApp("full_activity_path_as_string") When an activity is launched using its explicit activity path, allowing the app to navigate directly to a specific Android Activity.
Open a web page NV.openWeb("web_url_as_string") Opens the given URL in the device's default browser (e.g., https://example.com).
Launch a third-party app NV.openThirdPartyApp("app_package_name_path_as_string") To open a third-party application by its package name or custom URI scheme, allowing seamless handoff to another app.
Share text NV.share("shareable_text_as_string") To share the specified text via the system share sheet, enabling users to send content through messaging or social apps.
Start a call NV.call("mobile_number_as_string") To initiate a phone call by opening the device dialer prefilled with the specified number.
Copy to clipboard NV.copyToClipboard("text_as_string") To copy the given text to the system clipboard, allowing the user to paste it elsewhere.
Don’t show again NV.stopShowAgain() When a specific banner or survey is suppressed, allowing developers to prevent it from being displayed based on custom logic or user preferences.
Track survey attempt NV.surveyAttempt("click_through_data") When the user starts or attempts the survey, allowing developers to track engagement or trigger preliminary actions.
Track survey submission NV.surveySubmit("click_through_data") Once the survey form is validated and submitted, allowing developers to capture responses and execute any follow-up actions.

JS Methods for Actions

Integrate these methods with your HTML template to perform navigation, launch apps, share content, or track survey actions.

1. Navigate to a native screen (with JSON payload) [Added since v5.5.4)]

const payload = {
    actionUrl: "com.example.app.ui.DetailsActivity",
    callToAction: “1”,
    parameters: {
      nav_screen_attr1: "val1",
      nav_screen_attr2: 100,
      nav_screen_attr3: 123.11,
      nav_screen_attr4: true
    }
};
NV.openInAppScreen(JSON.stringify(payload));

For example

<div style="padding: 20px; text-align: center;"><span style="font-size: 25px; display: block;">Refer &amp; Earn<br /><b style="margin-top: 7px;">$10 Credit</b></span> <span style="font-size: 16px; margin-top: 15px; margin-bottom: 7px; padding: 0px; display: block; font-weight: bold;">Hello John,</span>
<p style="font-size: 18px; font-family: arial; line-height: 22px; margin: 0px;">thanks for completing your first booking. Refer your friends &amp; earn $10 credit on your next.</p>
<!-- Bottom-center button --> <button onclick="handleNavClick(); return false;" style="position: absolute; background-color: #fc882c; color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-family: Arial, sans-serif; font-weight: bold; cursor: pointer;"> Notify Me </button></div>
<script>// <![CDATA[
const payload = {
    actionUrl: "com.example.app.ui.DetailsActivity",
    callToAction: “1”,
    parameters: {
      nav_screen_attr1: "val1",
      nav_screen_attr2: 100,
      nav_screen_attr3: 123.11,
      nav_screen_attr4: true
    }
  };

  function handleNavClick() {
    NV.openInAppScreen(JSON.stringify(payload));
  }
// ]]></script>

2. Open a deeplink (with JSON payload) [Added since v5.5.4)]

const payload = {
    actionUrl: "myapp://product/details?sku=SKU-123",
    callToAction: “1”,
    parameters: {
      nav_screen_attr1: "val1",
      nav_screen_attr2: 100,
      nav_screen_attr3: 123.11,
      nav_screen_attr4: true
    }
};
NV.openDeeplink(JSON.stringify(payload));

For example

<div style="padding: 20px; text-align: center;"><span style="font-size: 25px; display: block;">Refer &amp; Earn<br /><b style="margin-top: 7px;">$10 Credit</b></span> <span style="font-size: 16px; margin-top: 15px; margin-bottom: 7px; padding: 0px; display: block; font-weight: bold;">Hello John,</span>
<p style="font-size: 18px; font-family: arial; line-height: 22px; margin: 0px;">thanks for completing your first booking. Refer your friends &amp; earn $10 credit on your next.</p>
<!-- Bottom-center button --> <button onclick="handleNavClick(); return false;" style="position: absolute; background-color: #fc882c; color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-family: Arial, sans-serif; font-weight: bold; cursor: pointer;"> Notify Me </button></div>
<script>// <![CDATA[
const payload = {
    actionUrl: "myapp://product/details?sku=SKU-123",
    callToAction: “1”,
    parameters: {
      nav_screen_attr1: "val1",
      nav_screen_attr2: 100,
      nav_screen_attr3: 123.11,
      nav_screen_attr4: true
    }
  };

  function handleNavClick() {
    NV.openDeeplink(JSON.stringify(payload));
  }
// ]]></script>

NOTE: When using Option 1 or Option 2, make sure to pass the data in the required payload format, as these options expect a well-defined structure for the function call. Further details are mentioned-below:

{
  "actionUrl": "<string>",          // Destination URL or deep-link
  "callToAction": "<string>",    // Unique action identifier
  "parameters": {
     "<key>": "<value>"    // Any additional key–value pairs
  }
}

actionUrl → is a string (activity path or deep-link).

callToAction → You can pass an action value (e.g., 1, 2, 3, or any unique number) to identify which element was clicked.

For example, if a banner contains three buttons, assigning a different action value to each button lets you determine exactly which one the user selected.

parameters → is an object containing extra key–value data you want to send.

3. Navigate to a native screen (by class path) [deprecated]

// Open a specific Activity by full classpath 
NV.openInApp("com.example.app.ui.MainActivity");

For example

<div style="padding: 20px; text-align: center;"><span style="font-size: 25px; display: block;">Refer &amp; Earn<br /><b style="margin-top: 7px;">$10 Credit</b></span> <span style="font-size: 16px; margin-top: 15px; margin-bottom: 7px; padding: 0px; display: block; font-weight: bold;">Hello John,</span>
<p style="font-size: 18px; font-family: arial; line-height: 22px; margin: 0px;">thanks for completing your first booking. Refer your friends &amp; earn $10 credit on your next.</p>
<button onclick="NV.openInApp('com.example.app.ui.MainActivity'); return false;" style="position: absolute; background-color: #fc882c; color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-family: Arial, sans-serif; font-weight: bold; cursor: pointer;"> Notify Me </button></div>

4. Open a web URL

NV.openWeb(“https://www.example.com/offers”)

For example

<div style="padding: 20px; text-align: center;"><span style="font-size: 25px; display: block;">Refer &amp; Earn<br /><b style="margin-top: 7px;">$10 Credit</b></span> <span style="font-size: 16px; margin-top: 15px; margin-bottom: 7px; padding: 0px; display: block; font-weight: bold;">Hello John,</span>
<p style="font-size: 18px; font-family: arial; line-height: 22px; margin: 0px;">thanks for completing your first booking. Refer your friends &amp; earn $10 credit on your next.</p>
<button onclick="NV.openWeb('https://www.example.com/offers'); return false;" style="position: absolute; background-color: #fc882c; color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-family: Arial, sans-serif; font-weight: bold; cursor: pointer;"> Notify Me </button></div>

5. Launch a third-party app

// Package/Activity path format (varies by app) 
// Examples: 
// "com.maps.app" — package only 
// "com.maps.app/.HomeActivity" — package + activity 
NV.openThirdPartyApp("com.maps.app/.HomeActivity");

For example

<div style="padding: 20px; text-align: center;"><span style="font-size: 25px; display: block;">Refer &amp; Earn<br /><b style="margin-top: 7px;">$10 Credit</b></span> <span style="font-size: 16px; margin-top: 15px; margin-bottom: 7px; padding: 0px; display: block; font-weight: bold;">Hello John,</span>
<p style="font-size: 18px; font-family: arial; line-height: 22px; margin: 0px;">thanks for completing your first booking. Refer your friends &amp; earn $10 credit on your next.</p>
<button onclick="NV.openThirdPartyApp('com.maps.app/.HomeActivity'); return false;" style="position: absolute; background-color: #fc882c; color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-family: Arial, sans-serif; font-weight: bold; cursor: pointer;"> Notify Me </button></div>

6. Share text via system share sheet

NV.share("Hey! Check out the offers at https://www.example.com/deals");

For example

<div style="padding: 20px; text-align: center;"><span style="font-size: 25px; display: block;">Refer &amp; Earn<br /><b style="margin-top: 7px;">$10 Credit</b></span> <span style="font-size: 16px; margin-top: 15px; margin-bottom: 7px; padding: 0px; display: block; font-weight: bold;">Hello John,</span>
<p style="font-size: 18px; font-family: arial; line-height: 22px; margin: 0px;">thanks for completing your first booking. Refer your friends &amp; earn $10 credit on your next.</p>
<button onclick="NV.share('Hey! Check out the offers at https://www.example.com/deals'); return false;" style="position: absolute; background-color: #fc882c; color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-family: Arial, sans-serif; font-weight: bold; cursor: pointer;"> Notify Me </button></div>

7. Start a call (opens dialer)

NV.call("1800123456");

For example

<div style="padding: 20px; text-align: center;"><span style="font-size: 25px; display: block;">Refer &amp; Earn<br /><b style="margin-top: 7px;">$10 Credit</b></span> <span style="font-size: 16px; margin-top: 15px; margin-bottom: 7px; padding: 0px; display: block; font-weight: bold;">Hello John,</span>
<p style="font-size: 18px; font-family: arial; line-height: 22px; margin: 0px;">thanks for completing your first booking. Refer your friends &amp; earn $10 credit on your next.</p>
<button onclick="NV.call('1800123456'); return false;" style="position: absolute; background-color: #fc882c; color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-family: Arial, sans-serif; font-weight: bold; cursor: pointer;"> Notify Me </button></div>

8. Copy text to clipboard (e.g., coupon codes)

NV.copyToClipboard("SAVE100");

For example

<div style="padding: 20px; text-align: center;"><span style="font-size: 25px; display: block;">Refer &amp; Earn<br /><b style="margin-top: 7px;">$10 Credit</b></span> <span style="font-size: 16px; margin-top: 15px; margin-bottom: 7px; padding: 0px; display: block; font-weight: bold;">Hello John,</span>
<p style="font-size: 18px; font-family: arial; line-height: 22px; margin: 0px;">thanks for completing your first booking. Refer your friends &amp; earn $10 credit on your next.</p>
<button onclick="NV.copyToClipboard('SAVE100'); return false;" style="position: absolute; background-color: #fc882c; color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-family: Arial, sans-serif; font-weight: bold; cursor: pointer;"> Notify Me </button></div>

9. Stop showing this in-app again

NV.stopShowAgain();

For example

<div style="padding: 20px; text-align: center;"><span style="font-size: 25px; display: block;">Refer &amp; Earn<br /><b style="margin-top: 7px;">$10 Credit</b></span> <span style="font-size: 16px; margin-top: 15px; margin-bottom: 7px; padding: 0px; display: block; font-weight: bold;">Hello John,</span>
<p style="font-size: 18px; font-family: arial; line-height: 22px; margin: 0px;">thanks for completing your first booking. Refer your friends &amp; earn $10 credit on your next.</p>
<!-- Bottom-center button --> <button onclick="NV.stopShowAgain(); return false;" style="position: absolute; background-color: #fc882c; color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-family: Arial, sans-serif; font-weight: bold; cursor: pointer;"> Notify Me </button></div>

10. Track a survey attempt

// e.g., user selected an option but hasn't submitted
const payload = {
    "nid":"5126",
    name: "Ram",
    tokens: {
      userID: "ram678"
    }
};
NV.surveyAttempt(JSON.stringify(payload));

For example

<div style="padding: 20px; text-align: center;"><span style="font-size: 25px; display: block;">Refer &amp; Earn<br /><b style="margin-top: 7px;">$10 Credit</b></span> <span style="font-size: 16px; margin-top: 15px; margin-bottom: 7px; padding: 0px; display: block; font-weight: bold;">Hello John,</span>
<p style="font-size: 18px; font-family: arial; line-height: 22px; margin: 0px;">thanks for completing your first booking. Refer your friends &amp; earn $10 credit on your next.</p>
<button onclick="handleNavClick(); return false;" style="position: absolute; background-color: #fc882c; color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-family: Arial, sans-serif; font-weight: bold; cursor: pointer;"> Notify Me </button></div>
<script>// <![CDATA[
const payload = {
    "nid":"5126",
    name: "Ram",
    tokens: {
      userID: "ram678"
    }
  };

  function handleNavClick() {
    NV.surveyAttempt(JSON.stringify(payload));
  }
// ]]></script>

11. Track a survey submission

// e.g., user submitted rating 9 with a comment
const payload = {
    nid:"5126",
    name: "Ram",
    rate: 9,
    tokens: {
      userID: "ram678"
    }
};
NV.surveySubmit(JSON.stringify(payload));

For example

<div style="padding: 20px; text-align: center;"><span style="font-size: 25px; display: block;">Refer &amp; Earn<br /><b style="margin-top: 7px;">$10 Credit</b></span> <span style="font-size: 16px; margin-top: 15px; margin-bottom: 7px; padding: 0px; display: block; font-weight: bold;">Hello John,</span>
<p style="font-size: 18px; font-family: arial; line-height: 22px; margin: 0px;">thanks for completing your first booking. Refer your friends &amp; earn $10 credit on your next.</p>
<button onclick="handleNavClick(); return false;" style="position: absolute; background-color: #fc882c; color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-family: Arial, sans-serif; font-weight: bold; cursor: pointer;"> Notify Me </button></div>
<script>// <![CDATA[
const payload = {
    nid:"5126",
    name: "Ram",
    rate: 9,
    tokens: {
      userID: "ram678"
    }
  };

  function handleNavClick() {
    NV.surveySubmit(JSON.stringify(payload));
  }
// ]]></script>

Callback option

Whenever openInAppScreen & openDeeplink functions are triggered, a callback is invoked with the data associated with the specific function or click.

You can use this callback in your app to process any action or perform additional tasks.

NotifyVisitorsApi.getInstance(context).notificationClickCallback(new OnNotificationClicksHandler() {
   @Override
   public void onClick(JSONObject response) {
       //do your task here
   }
});

Output Format for the above Callback

JSONObject

{
   "notifyvisitors_cta":{
      "type":"banner",
      "source":"nv",
      "actionURL":"com.example.app.ui.DetailsActivity",
      "target":0,
      "callToAction":"1",
      "parameters":{
         "nav_screen_attr1":"val1",
         "nav_screen_attr2":100,
         "nav_screen_attr3":123.11,
         "nav_screen_attr4":true
      }
   }
}

Updated 1 day ago