Self Handled Cards

Self-handled cards give you the flexibility of creating Card Campaigns on the MoEngage Platform and displaying the cards anywhere inside the website. SDK provides APIs to fetch campaign data using which you can create your view for 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
   }
 });
</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.

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

Fetch Categories

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

<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.

<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.

<script type="text/javascript">
   Moengage.cards.getCardsForCategory('Announcement').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.

<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.

<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.

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

Delete Card

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

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