--- title: Create a Banner Message Action slug: sdks/banner-message description: How to deploy a banner message action using the React Web, React Native, iOS, and Android versions of the Monetate SDK image: https://archbee-image-uploads.s3.amazonaws.com/ceIfEvQHzQk1IVxoRWUh7/K9eTL4jKm7UQINb6zNziJ-20250912-181225.png docTags: createdAt: 2024-06-13T15:21:30.756Z --- :::BlockQuote **Note :**This legacy flow remains supported for backward compatibility.New integrations are recommended to use the Context Layer–based getActions() approach. [check below](https://developer.monetate.com/sdks/banner-message#ujGRT) ::: 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](docId\:F5SIeJXaS3hi38DaXdVPy) 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](https://docs.monetate.com/docs/create-an-omnichannel-experience) in the Monetate Knowledge Base for instructions, and to [Available Action Types](https://docs.monetate.com/docs/available-omnichannel-action-types#omni-json) for additional information on Omni JSON actions. You can use the following JSON template for the required input: :::::Tabs ::::Tab{title="React Native"} :::CodeblockTabs Omni JSON Action Template Code ```javascript { "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" } } } ``` ::: :::: ::::Tab{title="React Web"} :::CodeblockTabs Omni JSON Action Template Code ```javascript { "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" } } } ``` ::: :::: ::::Tab{title="iOS"} :::CodeblockTabs Omni JSON Action Template Code ```swift { "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 } ] } ] } } ``` ::: :::: ::::Tab{title="Android"} :::CodeblockTabs Omni JSON Action Template Code ```java { "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](docId\:F5SIeJXaS3hi38DaXdVPy) method. This method is used when you want to satisfy an experience using a single event condition. :::::Tabs ::::Tab{title="React Native"} :::CodeblockTabs getActions Method ```javascript getActions(actionType, context?, eventData?, includeReporting?) : Promise ``` ::: 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. :::: ::::Tab{title="React Web"} :::CodeblockTabs getActions Method ```javascript getActions(actionType, context?, eventData?, includeReporting?) : Promise ``` ::: 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. :::: ::::Tab{title="iOS"} :::CodeblockTabs getActions Method ```swift objPersonalization.getActions(context: , requestId: , includeReporting: , arrActionTypes: <[String]>, event: ) ``` ::: 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. :::: ::::Tab{title="Android"} :::CodeblockTabs getActions Method ```java 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. :::::Tabs ::::Tab{title="React Web"} :::CodeblockTabs Omni JSON Banner Action Full Example ```javascript 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 {actionData.buttonText} //Render Data On UI ; }; ``` ::: :::: ::::Tab{title="React Native"} :::CodeblockTabs Omni JSON Banner Action Full Example ```javascript 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 {actionData.buttonText} //Render Data On UI ; }; ``` ::: :::: ::::Tab{title="iOS"} :::CodeblockTabs Omni JSON Banner Action Full Example ```swift 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 } } } } } } } } } ``` ::: :::: ::::Tab{title="Android"} :::CodeblockTabs Omni JSON Banner Action Full Example ```java 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](https://developer.monetate.com/sdks/objects#mDSKQ) and [getActions](https://developer.monetate.com/sdks/getactions) sections. ## Code Example :::::Tabs ::::Tab{title="iOS"} :::CodeblockTabs getActions Method ```swift public func getActions(context:ContextObj, arrActionTypes:[String], includeReporting: Bool) ``` ::: :::: ::::Tab{title="Android"} :::CodeblockTabs getActions Method ```java public void getActions(Context context, String[] actionTypes, boolean includeReports, ActionsCallback actionsCallback) ``` ::: ## ## FullCode Example :::: ::::Tab{title="React-Native"} :::CodeblockTabs{indent="2"} getAction Method New ```typescript async getActions( actionType: string | string[], context?: any, includeReporting: boolean = true, errorCallback?: (result: { status: "success" | "failed"; error?: unknown }) => void ): Promise<{ data: unknown; errors?: unknown }> { ``` ::: :::: ::::Tab{title="Web"} :::CodeblockTabs{indent="2"} getAction Method New ```typescript async getActions( actionType: string | string[], context?: any, includeReporting: boolean = true, errorCallback?: (result: { status: "success" | "failed"; error?: unknown }) => void ): Promise<{ data: unknown; errors?: unknown }> { ``` ::: :::: ::::: :::::Tabs ::::Tab{title="iOS"} :::CodeblockTabs Omni JSON Banner Action Full Example ```swift // 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) }) } ``` ::: :::: ::::Tab{title="Android"} :::CodeblockTabs Omni JSON Banner Action Full Example ```java // 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); } }); ``` ::: :::: ::::Tab{title="React-Native"} :::CodeblockTabs{indent="2"} getAction Method New ```typescript 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)); ``` ::: :::: ::::Tab{title="Web"} :::CodeblockTabs{indent="2"} getAction Method Web ```typescript 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)); ``` ::: :::: :::::