Cards

Cards can be used to create targeted or automated App Inbox/NewsFeed messages that can be grouped into various categories and target users with different updates/offers that can stay in the Inbox/Feed over a designated period. For more information, refer to Cards.

Screenshot_2022-09-22_at_7.06.25_PM.png

SDK Installation

Pass the Cards config in the SDK initialization script as shown below:

JavaScript
<script type="text/javascript">
  (function(i,s,o,g,r,a,m,n){i.moengage_object=r;t={};q=function(f){return function(){(i.moengage_q=i.moengage_q||[]).push({f:f,a:arguments})}};f=['track_event','add_user_attribute','add_first_name','add_last_name','add_email','add_mobile','add_user_name','add_gender','add_birthday','destroy_session','add_unique_user_id','moe_events','call_web_push','track','location_type_attribute'],h={onsite:["getData","registerCallback"]};for(k in f){t[f[k]]=q(f[k])}for(k in h)for(l in h[k]){null==t[k]&&(t[k]={}),t[k][h[k][l]]=q(k+"."+h[k][l])}a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);i.moe=i.moe||function(){n=arguments[0];return t};a.onload=function(){if(n){i[r]=moe(n)}}})(window,document,'script','https://cdn.moengage.com/webpush/moe_webSdk.min.latest.js','Moengage')

  Moengage = moe({
    app_id: "APP ID",
    debug_logs: 0,
    cards: {
      enable: true,
      placeholder: '#cardIcon' // CSS selector of inbox icon 
    } 
  });
  </script>


placeholder is the icon on click of which the inbox will open. Make sure it is provided by you and it exist in the DOM.

UI Customizations

SDK provides a set of UI customizations that can overwrite the default values. Refer to the code snippet below for the UI customizations.

JavaScript
<script type="text/javascript">
 (function(i,s,o,g,r,a,m,n){i.moengage_object=r;t={};q=function(f){return function(){(i.moengage_q=i.moengage_q||[]).push({f:f,a:arguments})}};f=['track_event','add_user_attribute','add_first_name','add_last_name','add_email','add_mobile','add_user_name','add_gender','add_birthday','destroy_session','add_unique_user_id','moe_events','call_web_push','track','location_type_attribute'],h={onsite:["getData","registerCallback"]};for(k in f){t[f[k]]=q(f[k])}for(k in h)for(l in h[k]){null==t[k]&&(t[k]={}),t[k][h[k][l]]=q(k+"."+h[k][l])}a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);i.moe=i.moe||function(){n=arguments[0];return t};a.onload=function(){if(n){i[r]=moe(n)}}})(window,document,'script','https://cdn.moengage.com/webpush/moe_webSdk.min.latest.js','Moengage')

  Moengage = moe({
    app_id: "APP ID",
    debug_logs: 0,
    cards: {
      enable: true,
      placeholder: "#cardIcon", // CSS selector of inbox icon
      backgroundColor: "#F6FBFC", // any valid CSS color format
      overLayColor: "rgba(0, 0, 0, 0.8)",
      fontFaces: [{
        family: "Sofia",
        url: "https://fonts.gstatic.com/s/sofia/v14/8QIHdirahM3j_su5uI0Orbjl.woff2"
      }, {
        family: "Audiowide",
        url: "https://fonts.gstatic.com/s/audiowide/v16/l7gdbjpo0cum0ckerWCdlg_OMRlABg.woff2"
      }],
      cardDismiss: {
        color: "#db2828", // any valid CSS color format
        enable: false // boolean value, which enable the dismiss option.
      },
      optionButtonColor: "#C4C4C4", // any valid CSS color format
      dateTimeColor: "#8E8E8E", // any valid CSS color format
      unclickedCardIndicatorColor: "blue", // any valid CSS color format
      pinIcon: "https://app-cdn.moengage.com/sdk/pin-icon.svg", // absolute path to the icon image.
      refreshIcon: "https://app-cdn.moengage.com/sdk/refresh-icon.svg", // absolute path to the icon image.
      navigationBar: {
        backgroundColor: "#00237C", // any valid CSS color format
        text: "Notifications", // string. eg, Notifications
        color: "#fff", // any valid CSS color format
        fontSize: "16px", // any valid CSS size format
        fontFamily: "", // any font family which is added to the website
      },
      closeButton: {
        webIcon: "https://app-cdn.moengage.com/sdk/cross-icon.svg",
        mWebIcon: "https://app-cdn.moengage.com/sdk/cross-icon.svg",
      },
      tab: {
        active: {
          color: "#06A6B7",
          underlineColor: "#06A6B7",
          backgroundColor: "transparent"
        },
        inactiveTabFontColor: "#7C7C7C",
        fontSize: "14px", // any valid CSS size format
        fontFamily: "", // any font family which is added to the website
        backgroundColor: "#fff", // any valid CSS color format
      },
      webFloating: {
        enable: false, // false by default
        icon: "https://app-cdn.moengage.com/sdk/bell-icon.svg", // absolute path to the icon image. by default, our icon will be used.
        postion: "0px 10px 40px 0", // need all 4 offset in proper CSS format in the order of top, right, bottom, left.
        countBackgroundColor: "#FF5A5F",
        countColor: "#fff",
        iconBackgroundColor: "#D9DFED",
        fontFamily: "Audiowide"
      },
      mWebFloating: {
        enable: false, // false by default
        icon: "https://app-cdn.moengage.com/sdk/bell-icon.svg", // absolute path to the icon image. by default, our icon will be used.
        postion: "0px 10px 40px 0", // need all 4 offset in proper CSS format in the order of top, right, bottom, left.
        countBackgroundColor: "#FF5A5F",
        countColor: "#fff",
        iconBackgroundColor: "#D9DFED",
        fontFamily: "Audiowide"
      },
      card: {
        headerFontSize: "16px",
        descriptionFontSize: "14px",
        ctaFontSize: "12px",
        fontFamily: "inherit",
        horizontalRowColor: "#D9DFED"
      },
      noDataContent: {
        img: "https://app-cdn.moengage.com/sdk/cards-no-result.svg",
        text: "No notifications to show, check again later.",
      }
    }
  });
  </script>

APIs

Unclicked Count

The SDK provides an API to fetch the number of cards that haven't been clicked by the users. To get the count, use the following API.

JavaScript
<script type="text/javascript">
    Moengage.cards.getUnClickedCardCount().then(unclickedCardCount = {
    	console.log(unclickedCardCount); // unclickedCardCount is in Number format
    })
</script>

New Card Count

The SDK provides an API to get the new cards for the user on the device. To get the count, use the following API.

JavaScript
<script type="text/javascript">
    Moengage.cards.getNewCardCount().then(newCardCount = {
    	console.log(newCardCount); // newCardCount is in Number format
    })
</script>

Callbacks

The SDK provides the following callbacks:

Inbox Open Callback

To get a callback when the user clicks on the inbox icon and when the inbox is open, register the callback function to the setInboxOpenListener() method as shown below.

JavaScript
<script type="text/javascript">
    Moengage.cards.setInboxOpenListener(function(){
    	console.log('Inbox is opened.')
    })
</script>

Inbox Close Callback

To get a callback when the user closes the inbox, register the callback function to the setInboxCloseListener() method as shown below.

JavaScript
<script type="text/javascript">
    Moengage.cards.setInboxCloseListener(function(){
    	console.log('Inbox is closed.')
    })
</script>

Card Click Callback

To get a callback when the user clicks on a card, register the callback function to

setCardClickListener() method:
JavaScript
<script type="text/javascript">
    Moengage.cards.setCardClickListener(function(cardId){
    	console.log('Card clicked: ', cardId)
    })
</script>

 

 

 

Was this article helpful?
0 out of 0 found this helpful