Skip to main content
Self-handled cards give you the flexibility of creating Card Campaigns on the MoEngage Platform and displaying the cards anywhere inside the application. SDK provides APIs to fetch the campaign’s data using which you can create your own view for cards.

​
Get Cards Info

Fetch All the cards campaign data that are eligible to show for the particular user which returns data as CardsInfo.  
import ReactMoEngageCards from "react-native-moengage-cards";
const cardsInfo = await ReactMoEngageCards.getCardsInfo();
Refer to the Cards Data Payload to get the details about the available data in CardsInfo.

​
Widget and Widget ID Mapping

​
Basic Card/Illustration Card

Widget IdWidget TypeWidget Information
0Image (WidgetType.IMAGE)Image widget in the card.
1Text (WidgetType.TEXT)Header text for the card.
2Text (WidgetType.TEXT)Message text for the card.
3Button (WidgetType.Button)Call to action(CTA) for the card.

​
Refresh Cards

Use the refreshCards*()*** API to refresh cards on the User Demand. This API can be used to mimic Pull to refresh behavior. 
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.refreshCards((data) => {});
Refer to the Cards Data Payloadto get the detail about the available data in SyncCompleteData.

​
Fetch Cards

Use the fetchCards*()*** API to fetch cards for the User. This API can be used to sync the latest cards data. 
import ReactMoEngageCards from "react-native-moengage-cards";
const cardsData = await ReactMoEngageCards.fetchCards();
Refer to the Cards Data Payloadto get the details about the available data in CardsData.
For details on the sync timing and rate limits for fetchCards(), see When Does the MoEngage SDK Sync Card Data?

​
Inbox Loaded

You can show the cards on a separate screen or a section of the screen. When the cards screen/section is loaded call onCardSectionLoaded(). 
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.onCardSectionLoaded((data) => {});
Refer to the Cards Data Payloadto get the details about the available data in SyncCompleteData.

​
Inbox UnLoaded

Call onCardSectionUnloaded() when the screen/section is no longer visible or going to the background. 
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.onCardSectionUnLoaded();

​
Fetch Categories

To fetch all the categories for which cards are configured, use thegetCardsCategories() API. It will return an array of strings. 
import ReactMoEngageCards from "react-native-moengage-cards";
const cardsCategories = await ReactMoEngageCards.getCardsCategories();

​
All Cards Categories Enabled

To fetch all the categories for which cards are configured, use theisAllCategoryEnabled() API. 
import ReactMoEngageCards from "react-native-moengage-cards";
const isAllCategoryEnabled = await ReactMoEngageCards.isAllCategoryEnabled();

​
Fetch Cards for Categories

To fetch cards eligible for display for a specific category use the getCardsForCategory() API. 
import ReactMoEngageCards from "react-native-moengage-cards";
const cardsData = await ReactMoEngageCards.getCardsForCategory(cardCategory);
Refer to the Cards Data Payloadto get the details about the available data in CardsData.

​
Get New Cards Count

To obtain the new cards count use ***getNewCardsCount()***method as shown below: 
import ReactMoEngageCards from "react-native-moengage-cards";
const newCardsCount = await ReactMoEngageCards.getNewCardsCount();

​
Card Shown

Call the cardShown() API to notify a card is shown to the user. 
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.cardShown(card);

​
Card Clicked

Call the cardClicked() API to notify a card is shown to the user. 
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.cardClicked(card, widgetId);

​
Delete Card

Call the deleteCard() API to delete a card. 
import ReactMoEngageCards from "react-native-moengage-cards";
// Delete a single card
ReactMoEngageCards.deleteCard(card);
// Delete a multiple card, pass the Array<Card>
ReactMoEngageCards.deleteCard(cards);

​
Mark Card Delivered

To track delivery to the card section of the application call the cardDelivered() API when the cards section of the application is loaded. 
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.cardDelivered();

​
Get Unclicked Cards Count

To obtain the unclicked cards count use ***getUnClickedCardsCount()***method as shown below. 
import ReactMoEngageCards from "react-native-moengage-cards";
const unClickedCard = await ReactMoEngageCards.getUnClickedCardsCount();

​
Card Sync Listener

​
Version 4.0.0 and below.

Set this listener to get a callback for card sync on the App opened. This listener should be set before calling ***initialize()***API. In most cases, this API is not required. 
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.setAppOpenSyncListener((data) => {});

​
Version  5.0.0 and above.

Set this listener to receive a callback for card sync upon app launch or when user login.This listener should be set before calling ***initialize()***API. 
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.setSyncCompleteListener((data) => {});
Refer to the Cards Data Payloadto get the details about the available data in SyncCompleteData.