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.
SDK Installation
Pass the Cards config in the SDK initialization script as shown below:
<script type="text/javascript">
!function(e,n,i,t,a,r,o,d){var s=e[a]=e[a]||[];if(s.invoked=0,s.initialised>0||s.invoked>0)return console.error("MoEngage Web SDK initialised multiple times. Please integrate the Web SDK only once!"),!1;e.moengage_object=a;var l={},g=function n(i){return function(){for(var n=arguments.length,t=Array(n),a=0;a<n;a++)t[a]=arguments[a];(e.moengage_q=e.moengage_q||[]).push({f:i,a:t})}},u=["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"],m={onsite:["getData","registerCallback"]};for(var c in u)l[u[c]]=g(u[c]);for(var v in m)for(var f in m[v])null==l[v]&&(l[v]={}),l[v][m[v][f]]=g(v+"."+m[v][f]);r=n.createElement(i),o=n.getElementsByTagName("head")[0],r.async=1,r.src=t,o.appendChild(r),e.moe=e.moe||function(){return(s.invoked=s.invoked+1,s.invoked>1)?(console.error("MoEngage Web SDK initialised multiple times. Please integrate the Web SDK only once!"),!1):(d=arguments.length<=0?void 0:arguments[0],l)},r.addEventListener("load",function(){if(d)return e[a]=e.moe(d),e[a].initialised=e[a].initialised+1||1,!0}),r.addEventListener("error",function(){return console.error("Moengage Web SDK loading failed."),!1})}(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.
<script type="text/javascript">
!function(e,n,i,t,a,r,o,d){var s=e[a]=e[a]||[];if(s.invoked=0,s.initialised>0||s.invoked>0)return console.error("MoEngage Web SDK initialised multiple times. Please integrate the Web SDK only once!"),!1;e.moengage_object=a;var l={},g=function n(i){return function(){for(var n=arguments.length,t=Array(n),a=0;a<n;a++)t[a]=arguments[a];(e.moengage_q=e.moengage_q||[]).push({f:i,a:t})}},u=["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"],m={onsite:["getData","registerCallback"]};for(var c in u)l[u[c]]=g(u[c]);for(var v in m)for(var f in m[v])null==l[v]&&(l[v]={}),l[v][m[v][f]]=g(v+"."+m[v][f]);r=n.createElement(i),o=n.getElementsByTagName("head")[0],r.async=1,r.src=t,o.appendChild(r),e.moe=e.moe||function(){return(s.invoked=s.invoked+1,s.invoked>1)?(console.error("MoEngage Web SDK initialised multiple times. Please integrate the Web SDK only once!"),!1):(d=arguments.length<=0?void 0:arguments[0],l)},r.addEventListener("load",function(){if(d)return e[a]=e.moe(d),e[a].initialised=e[a].initialised+1||1,!0}),r.addEventListener("error",function(){return console.error("Moengage Web SDK loading failed."),!1})}(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.
<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.
<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.
<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.
<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:
<script type="text/javascript">
Moengage.cards.setCardClickListener(function(cardId){
console.log('Card clicked: ', cardId)
})
</script>