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.

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

Cards is a separate module and it gets loaded asynchronously with core SDK module. So it may not be available immediately on the page load.

Please use this event listener and call the Cards API once it has been initialised:

window.addEventListener('MOE_LIFECYCLE', event = {
  if (event.detail.name === 'CARDS_INITIALIZED') {
    // call the cards APIs here
  }
});

If you are using npm package, then use this helper function:

moengage.on_cards_loaded().then(function() {
  // call the cards APIs here
})

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>

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

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

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

Refresh Cards from the Server

Use the fetchCards() API to refresh cards from the MoEngage server if required.

<script type="text/javascript">
   Moengage.cards.fetchCards().then(function() {
   	console.log(cards); // 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>