Create a Banner Message Action

Note :This legacy flow remains supported for backward compatibility.New integrations are recommended to use the Context Layer–based getActions() approach. check below

Displaying a banner involves creating an action trigger that activates an Omnichannel experience to return an appropriate JSON object. This object contains data that you can use to populate a banner message. You can use the getActions method to set up this trigger and obtain the JSON.

You can use the returned JSON data for multiple purposes. This example uses the JSON to display a banner message.

Creating the Experience

You must first create an Omnichannel experience in the Monetate platform that uses an Omni JSON action type. Refer to Create an Omnichannel Experience in the Monetate Knowledge Base for instructions, and to Available Action Types for additional information on Omni JSON actions.

You can use the following JSON template for the required input:

React Native

React Web

iOS

Android

{
  "meta": {
    "type": "action",
    "tool": "react-native",
    "version": "1"
  },
  "data": {
    "actionId": "12345",
    "actionType": "monetate:action:OmnichannelJson",
    "component": "home_component_1",
    "impressionId": "5678",
    "json": {
      "text": "Experience Configured for React Native personalization SDK ",
      "color": "#FF0000",
      "style": "bold",
      "fontSize":24,
      "buttonText": "Reset All",
      "buttonColor": "#7B68EE",
      "type": "monetate:action:GenericAction"
    }
  }
}

{
  "meta": {
    "type": "action",
    "tool": "react-web",
    "version": "1"
  },
  "data": {
    "actionId": "12345",
    "actionType": "monetate:action:OmnichannelJson",
    "component": "home_component_1",
    "impressionId": "5678",
    "json": {
      "text": "Experience Configured for React Web Personalization SDK",
      "color": "#FF0000",
      "style": "bold",
      "fontSize":24,
      "buttonText": "Reset All",
      "buttonColor": "#7B68EE",
      "type": "monetate:action:GenericAction"
    }
  }
}

{
  "meta": 
  {
    "code": 200
  },
  "data": 
  {
    "responses": 
    [      
      {
        "requestId": "sample-unique-request-id-ABC-123",
        "actions": 
        [          
          {
            "json": 
            {
              "text": "Free Shipping on orders over $500",
              "color": "#FFFFFF",
              "style": "bold",
              "fontSize": 24,
              "background-color": "#697895"
            },
            "actionType": "monetate:action:OmnichannelJson",
            "component": "home_component_1",
            "actionId ": 5005228
          }
        ]
      }
    ]
  }
}

{
  "meta": {
    "type": "action",
    "tool": "android",
    "version": "1"
  },
  "data": {
    "actionId": "12345",
    "actionType": "monetate:action:OmnichannelJson",
    "component": "home_component_1",
    "impressionId": "5678",
    "json": {
      "text": "Experience Configured for Android Personalization SDK",
      "color": "#FF0000",
      "style": "bold",
      "fontSize":24,
      "buttonText": "Reset All",
      "buttonColor": "#7B68EE",
      "type": "monetate:action:GenericAction"
    }
  }
}

This is the JSON object that is returned on the trigger. Modify this template to suit your needs.

Triggering the Experience

The Omnichannel experience is triggered using the getActions method. This method is used when you want to satisfy an experience using a single event condition.

React Native

React Web

iOS

Android

getActions(actionType, context?, eventData?, includeReporting?) : Promise<any>

The parameters are as follows:

actionType is the type of action you want to request. You can specify one action or multiple actions in an array to handle.

context is name of the event.

eventData is the data associated with the event.

includeReporting indicates whether the response will have impression reporting data.

getActions(actionType, context?, eventData?, includeReporting?) : Promise<any>

The parameters are as follows:

actionType is the type of action you want to request. You can specify one action or multiple actions in an array to handle.

context is name of the event.

eventData is the data associated with the event.

includeReporting indicates whether the response will have impression reporting data.

objPersonalization.getActions(context: <ContextEnum>, requestId: <String>, includeReporting: <Bool>, arrActionTypes: <[String]>, event: <MEvent?>)

The parameters are as follows:

context is name of the event.

requestID is the request ID for the API.

includeReporting indicates whether the response will have impression reporting data.

arrActionType is the type of action you want to request. You can specify one action or multiple actions in an array to handle.

event is the data associated with the event.

public String getActions(String context, Object event, String[] actionTypes, boolean includeReports) {returns response;}

The parameters are as follows:

context is name of the event.

eventData is the data associated with the event.

actionTypes is the type of action you want to request. You can specify one action or multiple actions in an array to handle.

includeReporting indicates whether the response will have impression reporting data.

Full Code Example

This code triggers the configured Omni JSON experience and handles the experience by displaying a banner. Customize the example code as you see fit.

React Web

React Native

iOS

Android

import React, { useEffect, useState} from "react" ;
import { View , Text} from "web" ;
import Personalization from '@personalization-js-sdk/web';.
import { ActionTypes, EventTypes } from "@personalization-js-sdk/common";

const test = () => {
  const personalizationInstance = new Personalization(account, user)
  const [actionData, setActionData] = useState({});

  const handleGetActions = () => {
    const eventType = EventTypes.ContextCart;
    personalizationInstance.getActions("monetate:action:OmnichannelJson", eventType)
      .then((res) => {
        if (res.length > 0) {
          res[0].actions.map((action) => {
            if (action.json.meta && action.json.meta.tool === 'web') {
              const data = {
                color: action.json.data.json.color,
                text: action.json.data.json.text,
                fontSize: action.json.data.json.fontSize,
                style: action.json.data.json.style,
                buttonText: action.json.data.json.buttonText,
                buttonColor: action.json.data.json.buttonColor,
              };
              setActionData(prevState => {
                return {
                  ...prevState,
                  decisionEventData: data,
                }
              });
            } else {
              console.warn('Meta Object not present in Omni JSON.');
            }
          });
        }
      })
      .catch((error) => console.warn('Please try after some time!', error));
  };

  useEffect(() => {
    handleGetActions();
  }, []);

  return <View> 
       <Text> {actionData.buttonText} //Render Data On UI 
    </View>;
};

import React, { useEffect, useState} from "react" ;
import { View , Text} from "react-native" ;
import Personalization from '@personalization-js-sdk/react-native';.
import { ActionTypes, EventTypes } from "@personalization-js-sdk/common";

const test = () => {
  const personalizationInstance = new Personalization(account, user)
  const [actionData, setActionData] = useState({});

  const handleGetActions = () => {
    const eventType = EventTypes.ContextCart;
    personalizationInstance.getActions("monetate:action:OmniChannelJson", eventType)
      .then((res) => {
        if (res.length > 0) {
          res[0].actions.map((action) => {
            if (action.json.meta && action.json.meta.tool === 'react-native') {
              const data = {
                color: action.json.data.json.color,
                text: action.json.data.json.text,
                fontSize: action.json.data.json.fontSize,
                style: action.json.data.json.style,
                buttonText: action.json.data.json.buttonText,
                buttonColor: action.json.data.json.buttonColor,
              };
              setActionData(prevState => {
                return {
                  ...prevState,
                  decisionEventData: data,
                }
              });
            } else {
              console.warn('Meta Object not present in Omni JSON.');
            }
          });
        }
      })
      .catch((error) => console.warn('Please try after some time!', error));
  };

  useEffect(() => {
    handleGetActions();
  }, []);

  return <View> 
       <Text> {actionData.buttonText} //Render Data On UI 
    </View>;
};

import MarqueeLabel
import UIKit
import monetate_ios_sdk

class CategoryViewController: UIViewController {

  @IBOutlet weak var bottomLabel: MarqueeLabel!
  @IBOutlet weak var bottomView: UIView!
  @IBOutlet weak var constraintHeightBottomView: NSLayoutConstraint!
  final var objPersonalization = Personalization(
    account: Account(
      instance: "p", domain: "localhost.org", name: "a-701b337c", shortname: "localhost"),
    user: User(deviceId: "62bd2e2d-213d-463f-83bb-12c0b2530a14"))

  override func viewDidLoad() {
    super.viewDidLoad()
    self.bottomView.isHidden = true
    self.constraintHeightBottomView.constant = 0
    bottomLabel.text = ""
  }

  override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    pageEvent()
  }

  func pageEvent() {
    objPersonalization.getActions(
      context: .PageView, requestId: "test_request_id", includeReporting: false,
      arrActionTypes: ["monetate:action:OmnichannelJson"],
      event: PageView(
        pageType: "Homepage", path: "n/a", url: "n/a", categories: [], breadcrumbs: [])
    ).on { (res) in
      if res.status == 200 {
        let data = JSON(res.data)
        print(data)
        self.handleAction(res: res)
      } else {
      }
    }
  }

  fileprivate func handleAction(res: APIResponse) {
    let data = JSON(res.data)
    for item in data["data"]["responses"].arrayValue {
      bottomLabel.animationCurve = .linear
      bottomLabel.speed = .duration(5)
      bottomLabel.fadeLength = 15.0

      if item["requestId"].string == res.requestId {
        for oneaction in item["actions"].arrayValue {
          let component = oneaction["component"].string ?? ""
          if component.lowercased() == "footer" {
            if let json = oneaction["json"].dictionary {
              print("final dict \(json)")
              if let text = json["text"]?.string {
                self.bottomView.isHidden = false
                self.constraintHeightBottomView.constant = 60
                bottomLabel.text = text
                if let fontStyle = json["style"]?.string, let fontSize = json["fontSize"]?.double {
                  if fontStyle == "bold" {
                    bottomLabel.font = UIFont(name: "Roboto-Bold", size: fontSize)
                  } else if fontStyle == "normal" {
                    bottomLabel.font = UIFont(name: "Roboto-Regular", size: fontSize)
                  } else if fontStyle == "italic" {
                    bottomLabel.font = UIFont(name: "Roboto-Italic", size: fontSize)
                  }
                }
                if let color = json["color"]?.string {
                  bottomLabel.textColor = MiscClass.hexStringToUIColor(hex: color)
                }
                if let backgroundColor = json["background-color"]?.string {
                  bottomView.backgroundColor = MiscClass.hexStringToUIColor(hex: backgroundColor)
                  return
                }
              }
            }
          }
        }
      }
    }
  }
}

Account account = new Account("localhost.org", "a-701b337c", "p", "localhost");
User user = new User();
user.setCustomerId(null);
user.setDeviceId("1769696968989");
Personalization personalization = new Personalization(user, account);
IpAddress address = new IpAddress();
address.setIpAddress("127.0.0.0.");
String responseData;

new Thread(new Runnable()
{
  @Override
  public void run()
  {
    // Gets the responseData using getActionsData
    responseData = personalization.getActions(EventTypes.ContextIpAddress, address, new String[]
    {
      "monetate:action:OmnichannelJson"
    }, true);
    // Once you receive the responseData from getActionsData, use the Handler and parse the required data from it 
    new Handler(Looper.getMainLooper()).post(new Runnable()
    {
      @Override
      public void run()
      {
        // Parse the received responseData, get the requiredData from it and use it accordingly
        try
        {
          // Example: textView.setText(requiredData);
        }
        catch (Exception ex)
        {
          // Catch any exception that occurs while parsing 
          ex.printStackTrace();
        }
      }
    });
  }
}).start();

You must handle the getActions method in a Thread or AsyncTask. To update the main thread, you can use either Handler or runOnUiThread. This code example uses Thread and Handler to update the main thread and change the UI.

Banner Message Action using Context layer approach

Supported SDK Versions

Android: 1.0.6-A or later

React-Native: 1.0.6-RN or later

Web: 1.0.6-W or later

iOS: 2026.01.06 or later

Using the new Context Layer–based approach, BannerMessage Actions can be implemented using enhanced getActions() method. Below is the sample code snippet demonstrating this usage.

For detailed information on the enhanced getActions() flow, please refer to the Context and getActions sections.

Code Example

iOS

Android

React-Native

Web

public func getActions(context:ContextObj, arrActionTypes:[String], includeReporting: Bool)

public void getActions(Context context, String[] actionTypes, boolean includeReports, ActionsCallback actionsCallback)

FullCode Example

 async getActions(
        actionType: string | string[],
        context?: any,
        includeReporting: boolean = true,
        errorCallback?: (result: { status: "success" | "failed"; error?: unknown }) => void
    ): Promise<{ data: unknown; errors?: unknown }> {

 async getActions(
        actionType: string | string[],
        context?: any,
        includeReporting: boolean = true,
        errorCallback?: (result: { status: "success" | "failed"; error?: unknown }) => void
    ): Promise<{ data: unknown; errors?: unknown }> {

iOS

Android

React-Native

Web

  // seting up context data
    let contextObj = ContextObj()
    contextObj.addPageDetails(
        pageType: "Cartpage",
        path: "n/a",
        url: "n/a",
        categories: [],
        breadcrumbs: []
    )

  // Request Banner Action data
    objPersonalization.getActions(
        context: contextObj,
        arrActionTypes: ["monetate:action:OmnichannelJson"],
        includeReporting: false
    )
    .on(success: { actions in
        self.handleAction(actions: actions)
    })
}


// Setting up context data
Context context = new Context();			
context.addPageDetails("Cartpage", "https://www.monetate.com", new String[] {"categories-here"},new String[] {"breadcrums--here"},"test/path");
		

// Request Banner Action data
personalization.getActions(context, new String[] {"monetate:action:OmnichannelJson"}, false,new ActionsCallback() {

 @Override
 public void onSuccess(String actions) {
		System.out.println("Action data :"+actions);
 }
 @Override
 public void onError(Exception e) {
		System.out.println("Ex :"+e);
	}
});

const context = new Context();
context
    .addPageDetails()
    .url("www.monetate.com")
    .path(monetate.com)
    .pageType("home")
    .breadcrumbs(["Home"])
    .categories(["Homepage"]);

Personalization.getActions(
  ["monetate:action:OmnichannelJson"], 
  context)
  .then((res: any) => console.log("Action === 1 res", res));

const context = new Context();
context
    .addPageDetails()
    .url("www.monetate.com")
    .path(monetate.com)
    .pageType("home")
    .breadcrumbs(["Home"])
    .categories(["Homepage"]);

Personalization.getActions(
  ["monetate:action:OmnichannelJson"], 
  context)
  .then((res: any) => console.log("Action === 1 res", res));

Create a Banner Message Action

Creating the Experience

Triggering the Experience

Full Code Example

Banner Message Action using Context layer approach

Code Example

﻿

FullCode Example