Self Handled Cards

Self-handled cards allow you to create Card Campaigns on the MoEngage Platform and display the cards anywhere inside the website. SDK provides APIs to fetch campaign data, which you can use to create your view for cards.

SDK Installation

Pass the Cards config in the SDK initialization script, as shown below.

JavaScript
<script type="text/javascript">
  var moeDataCenter = "{DC}"; // Replace "DC" with the actual Data center value from the above table
  var moeAppID = "{AppID}"; // Replace "AppID" available in the settings page of MoEngage Dashboard.
      
  !function(e,n,i,t,a,r,o,d){if(!moeDataCenter||!moeDataCenter.match(/^dc_[0-9]+$/gm))return console.error("Data center has not been passed correctly. Please follow the SDK installation instruction carefully.");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","update_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/release/"+moeDataCenter+"/moe_webSdk.min.latest.js","Moengage");

  Moengage = moe({
    app_id: moeAppID,
    debug_logs: 0,
    cards: {
      enable: true
    } 
  });
</script>

Notify on Inbox Open

Whenever you open the inbox, you can notify Moengage as shown below to sync the data and track the inbox open event.

JavaScript
<script type="text/javascript">
   Moengage.cards.inboxOpened();
</script>

Fetch Categories

To fetch all the categories for which cards are configured, use the getCardCategories() API.

JavaScript
<script type="text/javascript">
   Moengage.cards.getCardCategories().then(function(categories) {
   	console.log(categories);
   })
</script>

Additionally, you can have an All category which would be a superset of all the categories. Use the isAllCategoryEnabled() API.

JavaScript
<script type="text/javascript">
   Moengage.cards.isAllCategoryEnabled().then(function(enabled) {
   	console.log(enabled); // boolean
   })
</script>

Fetch Cards for Categories

To fetch the cards eligible for display for a specific category, use the getCardsForCategory(categoryName) API.

JavaScript
<script type="text/javascript">
   Moengage.cards.getCardsForCategory('Announcement').then(function(cards) {
   	console.log(cards); // list of cards
   })
</script>

To fetch all the cards eligible for display irrespective of the category, pass the category 'All' as shown below

JavaScript
<script type="text/javascript">
   Moengage.cards.getCardsForCategory('All').then(function(cards) {
   	console.log(cards); // list of cards
   })
</script>

Fetch Card Info

Instead of using separate APIs to fetch Cards and categories, you can use the getCardsInfo(cardID)API to fetch all the information in one go.

JavaScript
<script type="text/javascript">
   Moengage.cards.getCardsInfo('12345').then(function(card) {
   	console.log(card); // card detail
   })
</script>

Track Statistics for Cards

Since the UI/display of the cards is controlled by the application, to track the statistics on display and click, we need the application to notify the SDK.

Impressions

Call the cardShown(cardID)API when a specific card is visible on the screen.

JavaScript
<script type="text/javascript">
   Moengage.cards.cardShown('12345')
</script>

Clicks

Whenever a user clicks on a card, call the cardClicked(cardID, widgetID) API and pass the card object widget identifier for the UI element clicked. 

JavaScript
<script type="text/javascript">
   Moengage.cards.cardClicked('12345', 123)
</script>

Delete Card

Call the deleteCard(cardID) API to delete a card.

JavaScript
<script type="text/javascript">
   Moengage.cards.deleteCard('12345')
</script>

Previous

Next

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

How can we improve this article?