Create a Banner Message

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 Get Actions 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 within Monetate that uses an Omni JSON action type. Refer to Create an Omnichannel Experience for instructions, and Available Action Types for additional information on Omni JSON actions.

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

{
  "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"
    }
  }
}

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 Get Actions method. This method is used when you want to satisfy an experience using a single event condition.

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

Parameters:

  • actionType is the type of action you want to request. You can specify multiple actions in an array to handle. (Required)
  • context is name of the event. (Required)
  • eventData is the data associated with the event. (Required)

Full Code Example

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

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(ActionTypes.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>;
};

Related Articles