Create a Banner Message Action

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 sdk methods 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 omni json action template code { "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" } } } omni json action template code { "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" } } } omni json action template code { "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 } ] } ] } } omni json action template code { "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 sdk methods method this method is used when you want to satisfy an experience using a single event condition getactions method 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 method 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 method 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 getactions method 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 omni json banner action full example 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>; }; omni json banner action full example 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>; }; omni json banner action full example 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 } } } } } } } } } omni json banner action full example 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