--- title: Create an Image-Based Badging Action slug: sdks/image-badging description: How to create an Omnichannel image-based product-badging action in 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-13T16:43:38.718Z --- :::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/image-badging#y0xPR) ::: Monetate's SDK [product badging](https://docs.monetate.com/docs/product-badging) action allows clients to apply a small promotional image displayed atop the product image to specific items on product listing pages and product detail pages to draw site visitors' attention to those items. A product badge frequently appears as a digital promotional sticker displayed atop the product image to indicate that the item is a bestseller or a top-rated product. These labels serve as customer endorsements, allowing shoppers to more quickly locate popular products on a page. You can set up a handler for Omnichannel badging actions using two methods. The [addEvent](docId\:F5SIeJXaS3hi38DaXdVPy) method defines the events that can trigger the action. The [getActionsData](docId\:F5SIeJXaS3hi38DaXdVPy) method is then used as the trigger and requests the experience based on the defined events. `getActionsData` then returns a JSON object containing badging image data that you can then handle in code. ## Prerequisites You must first create an Omnichannel badging action in the Monetate platform for the methods to reference. Refer to [Configure an Omnichannel Product Badging Action](https://docs.monetate.com/docs/configure-an-omnichannel-product-badging-action) in the Monetate Knowledge Base for instructions. This action uses Product Thumbnail View as an event listener. To accomplish this, you must configure a **Thumbnail's product ID =** [action condition](https://docs.monetate.com/docs/configure-a-product-badging-action#understanding-action-conditions). Make note of this product ID so that you can pass the appropriate ID in code. Optionally, you can add other conditions to this action. If you do, make note of those so that you can pass those as relevant events. ## addEvent This method adds event data to the SDK's internal stack. :::::Tabs ::::Tab{title="React Native"} :::CodeblockTabs addEvent Method ```javascript addEvent(context: EventTypes, events: ContextData): void ``` ::: The parameters are as follows: - `context` is name of the event. - `events` is the event data. :::: ::::Tab{title="React Web"} :::CodeblockTabs addEvent Method ```javascript addEvent(context: EventTypes, events: ContextData): void ``` ::: The parameters are as follows: - `context` is name of the event. - `events` is the event data. :::: ::::Tab{title="iOS"} :::CodeblockTabs addEvent Method ```swift addEvent(context: , event: ) ``` ::: The parameters are as follows: - `context` is name of the event. (Required) - `event` is the event data. (Required) :::: ::::Tab{title="Android"} :::CodeblockTabs addEvent Method ```java public void addEvent(String context, Object event) ``` ::: The parameters are as follows: - `context` is name of the event. (Required) - `event` is the event data. (Required) :::: ::::: For an Omnichannel badging action, use the `ContextProductThumbnailView` event as your context. Pass a list of product IDs that you want to set up a badge for as your events data. ### Code Example :::::Tabs ::::Tab{title="React Native"} :::CodeblockTabs addEvent Example ```javascript coreSdkInstance.addEvent(EventTypes.ContextProductThumbnailView, { products: ["SLBC", "99"], }); ``` ::: :::: ::::Tab{title="React Web"} :::CodeblockTabs addEvent Example ```javascript coreSdkInstance.addEvent(EventTypes.ContextProductThumbnailView, { products: ["SLBC", "99"], }); ``` ::: :::: ::::Tab{title="iOS"} :::CodeblockTabs addEvent Example ```swift objPersonalization.addEvent(context: .ProductThumbnailView, event: ProductThumbnailView(products: Set(["BackP_001", "BackP_002", "BackP_003", "BackP_004", "BackP_005", "BackP_006"]))) ``` ::: :::: ::::Tab{title="Android"} :::CodeblockTabs addEvent Example ```java // Events/context ProductThumbnailView productThumbnailView = new ProductThumbnailView(); productThumbnailView.setProducts(new String[] { "SLBC", "99" }); // addEvent personalization.addEvent(EventTypes.ContextProductThumbnailView, productThumbnailView); ``` ::: :::: ::::: If you added other action conditions to the Omnichannel badging action, then use additional calls of this method to handle them with the appropriate events and data. ## getActionsData This method sends the defined events to Monetate to trigger an experience. If the events fulfill the [WHO settings](docId\:uI0Or7GoerH9r_wUMbc6m) of an experience, then that experience is triggered. A JSON object containing the experience response is then returned. :::::Tabs ::::Tab{title="React Native"} :::CodeblockTabs getActionsData Method ```javascript getActionsData(actionType: Array, includeReporting?: boolean) : Promise ``` ::: The parameter is 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. - `includeReporting` indicates whether the response will have impression reporting data. Use `OmniChannelImageBadging` as the action type for this method. :::CodeblockTabs getActionsData Example ```javascript let imageBadge; personalizationInstance .getActionsData("monetate:action:OmniChannelImageBadging") .then(res => { imageBadge = res[0].actions; }) .catch(error => { console.warn('Error!', error); }); ``` ::: :::: ::::Tab{title="React Web"} :::CodeblockTabs getActionsData Method ```javascript getActionsData(actionType: Array, includeReporting?: boolean) : Promise ``` ::: The parameter is 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. - `includeReporting` indicates whether the response will have impression reporting data. Use `OmniChannelImageBadging` as the action type for this method. :::CodeblockTabs getActionsData Example ```javascript let imageBadge; personalizationInstance .getActionsData("monetate:action:OmniChannelImageBadging") .then(res => { imageBadge = res[0].actions; }) .catch(error => { console.warn('Error!', error); }); ``` ::: :::: ::::Tab{title="iOS"} :::CodeblockTabs getActionsData Method ```swift getActionsData(requestId: , includeReporting: , arrActionTypes: <[String]>) ``` ::: The parameters are as follows: - `requestID` is the request ID for the API. - `includeReporting` indicates whether the response will have impression reporting data. - `arrActionTypes` is the type of action you want to request. You can specify one action or multiple actions in an array to handle. Use [monetate\:action\:OmniChannelImageBadging](docId\:JrD_OD6JWuAGwlErZuXUc) as the action type for this method. :::CodeblockTabs getActionsData Example ```swift Personalization.shared.getActionsData( requestId: "test_request_id", includeReporting: false, arrActionTypes: ["monetate:action:OmniChannelImageBadging"] ).on { (res) in if res.status == 200 { let data = JSON(res.data) self.handleBadging(res: res) print(data) } else { } } ``` ::: :::: ::::Tab{title="Android"} :::CodeblockTabs getActionsData Method ```java public String getActionsData(String[] actionTypes, boolean includeReports) ``` ::: The parameters are as follows: - `actionTypes` is the type of action you want to request. You can specify one action or multiple actions in an array to handle. - `includeReports` indicates whether the response will have impression reporting data. Use [monetate\:action\:OmniChannelImageBadging](docId\:JrD_OD6JWuAGwlErZuXUc) as the action type for this method. :::CodeblockTabs getActionsData Call Example ```java responseData = personalization.getActionsData(new String[]{"monetate:action:OmniChannelImageBadging"},true); ``` ::: :::: ::::: ## Full Code Example This code triggers the configured Omnichannel badging experience. Customize the example code as you see fit. :::::Tabs ::::Tab{title="React Native"} :::CodeblockTabs Image-Based Product Badging Action Example ```javascript // Add the required events used in experience. personalizationInstance.addEvent(EventTypes.ContextProductThumbnailView, { products: ["SLBC", "99"], }); // ----------------------------- // Fetch badging experience data let imageBadge; personalizationInstance .getActionsData("monetate:action:OmniChannelImageBadging") .then(res => { imageBadge = res[0].actions; }) .catch(error => { console.warn('Error!', error); }); ``` ::: :::: ::::Tab{title="React Web"} :::CodeblockTabs Image-Based Product Badging Action Example ```javascript // Add the required events used in experience. personalizationInstance.addEvent(EventTypes.ContextProductThumbnailView, { products: ["SLBC", "99"], }); // ----------------------------- // Fetch badging experience data let imageBadge; personalizationInstance .getActionsData("monetate:action:OmniChannelImageBadging") .then(res => { imageBadge = res[0].actions; }) .catch(error => { console.warn('Error!', error); }); ``` ::: :::: ::::Tab{title="iOS"} :::CodeblockTabs Image-Based Product Badging Action Example ```swift // Add the required events used in experience. objPersonalization.addEvent( context: .ProductThumbnailView, event: ProductThumbnailView( products: Set(["BackP_001", "BackP_002", "BackP_003", "BackP_004", "BackP_005", "BackP_006"]))) // ----------------------------- // Fetch badging experience data objPersonalization.getActionsData( requestId: "test_request_id", includeReporting: false, arrActionTypes: ["monetate:action:OmniChannelImageBadging"] ).on { (res) in if res.status == 200 { let data = JSON(res.data) self.handleBadging(res: res) print(data) } else { } } // ----------------------------- // Handle badging experience response private func handleBadging(res: APIResponse) { let data = JSON(res.data!) for item in data["data"]["responses"].arrayValue { if item["requestId"].string == res.requestId { for oneAction in item["actions"].arrayValue { if oneAction["actionType"].string == "monetate:action:OmniChannelImageBadging" { if let pIds = oneAction["pids"].array { arrBadgedProductIds = oneAction["pids"].rawValue as! [String] } if !arrBadgedProductIds.isEmpty { let imageContent = oneAction["image_content"] let imageURL = URL(string: imageContent["ref"].stringValue) if imageURL != nil { downloadImage(from: imageURL!) } return } } } } } } ``` ::: :::: ::::Tab{title="Android"} :::CodeblockTabs Image-Based Product Badging Action Example ```java // Events and context data ProductThumbnailView productThumbnailView = new ProductThumbnailView(); productThumbnailView.setProducts(new String[] { "SLBC", "99" }); // addEvent personalization.addEvent(EventTypes.ContextProductThumbnailView, productThumbnailView); //getActionsData new Thread(new Runnable() { @Override public void run() { // Gets the responseData using getActionsData responseData = personalization.getActions(EventTypes.ContextIpAddress, address, new String[] { "monetate:action:OmniChannelImageBadging" }, 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`. The code example above uses `Thread` and `Handler` to update the main thread and change the UI. :::: ::::: ## Response Data An example of the JSON data returned from `getActionsData` is below. Handle this response in your code accordingly to render the data in your UI as you see fit. :::::Tabs ::::Tab{title="React Native"} :::CodeblockTabs Image-Based Product Badging Action Response Example ```javascript { "actions": [ { "image_content": { "version": 2, "clickzones": [], "contentId": 775504, "top": 0, "title": "Test-Badge", "href": "https://marketer.monetate.net", "iwidth": 40, "alt": "Alt-Test-Badge", "iheight": 40, "ref": "https://sb.monetate.net/img/1/1094/4631519.jpg", "left": 180 }, "actionType": "monetate:action:OmniChannelImageBadging", "actionId": 4959427, "application_data": { "test": "React-native SDK" }, "positioning_hint": "center", "pids": [ "99", "SLBC" ] } ], "requestId": "81.2272963332645" } ``` ::: :::: ::::Tab{title="React Web"} :::CodeblockTabs Image-Based Product Badging Action Response Example ```javascript { "actions": [ { "image_content": { "version": 2, "clickzones": [], "contentId": 775504, "top": 0, "title": "Test-Badge", "href": "https://marketer.monetate.net", "iwidth": 40, "alt": "Alt-Test-Badge", "iheight": 40, "ref": "https://sb.monetate.net/img/1/1094/4631519.jpg", "left": 180 }, "actionType": "monetate:action:OmniChannelImageBadging", "actionId": 4959427, "application_data": { "test": "React-native SDK" }, "positioning_hint": "center", "pids": [ "99", "SLBC" ] } ], "requestId": "81.2272963332645" } ``` ::: :::: ::::Tab{title="Android"} :::CodeblockTabs Image-Based Product Badging Action Response Example ```java { "actions": [ { "image_content": { "version": 2, "clickzones": [], "contentId": 775504, "top": 0, "title": "Test-Badge", "href": "https://marketer.monetate.net", "iwidth": 40, "alt": "Alt-Test-Badge", "iheight": 40, "ref": "https://sb.monetate.net/img/1/1094/4631519.jpg", "left": 180 }, "actionType": "monetate:action:OmniChannelImageBadging", "actionId": 4959427, "application_data": { "test": "React-native SDK" }, "positioning_hint": "center", "pids": [ "99", "SLBC" ] } ], "requestId": "81.2272963332645" } ``` ::: :::: ::::: ## ImageBased badging using ContextLayer :::BlockQuote **Note:**The Context-based getActions() flow replaces the need to manually use addEvent and getActionsData when evaluating actions. ::: **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**, **Image-Based Badging** Actions can be implemented using a single 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 getAction() ```swift public func getActions (context:ContextObj, arrActionTypes:[String], includeReporting: Bool) ``` ::: :::: ::::Tab{title="Android"} :::CodeblockTabs getActions() ```java public void getActions(Context context,String[] actionTypes,boolean includeReports,ActionsCallback actionsCallback); ``` ::: :::: ::::Tab{title="React-Native"} :::CodeblockTabs{indent="2"} getAction Method RN ```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 Web ```typescript async getActions( actionType: string | string[], context?: any, includeReporting: boolean = true, errorCallback?: (result: { status: "success" | "failed"; error?: unknown }) => void ): Promise<{ data: unknown; errors?: unknown }> {} ``` ::: :::: ::::: ### Full Code Eample :::::Tabs ::::Tab{title="iOS"} :::CodeblockTabs ImageBased Badging FullCode Example ```swift //setting up context data let contextObj = ContextObj() contextObj.addProductThumbnailsData(["PROD001", "PROD002", "PROD003"]) //Request ImageBased Badging data objPersonalization.getActions(context: contextObj, arrActionTypes: ["monetate:action:OmniChannelImageBadging"], includeReporting: false) .on(success: { (actions) in self.handleImageAction(actions: actions) }) } ``` ::: :::: ::::Tab{title="Android"} :::CodeblockTabs ImageBased Badging FullCode Example ```java //setting up context data Context context = new Context(); context.addProductThumbnailsData(new String[] {"104", "94", "97"}); //Request DataCollection Action data personalization.getActions(context, new String[] {"monetate:action:OmniChannelImageBadging"}, 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 RN ```typescript const context = new Context(); context .addProductThumbnailsData() .product([ "prod_101", "prod_102", "prod_103" ]); Personalization.getActions( ["monetate:action:OmniChannelImageBadging"], 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 .addProductThumbnailsData() .product([ "prod_101", "prod_102", "prod_103" ]); Personalization.getActions( ["monetate:action:OmniChannelImageBadging"], context) .then((res: any) => console.log("Action === 1 res", res)); ``` ::: :::: ::::: ###