Self Handled Cards

Build custom card views in your React Native app using the MoEngage self-handled cards SDK and APIs.

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. 

TypeScript

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 Id	Widget Type	Widget Information
0	Image (WidgetType.IMAGE)	Image widget in the card.
1	Text (WidgetType.TEXT)	Header text for the card.
2	Text (WidgetType.TEXT)	Message text for the card.
3	Button (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.

TypeScript

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.

TypeScript

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.

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

TypeScript

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.

TypeScript

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.

TypeScript

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.

TypeScript

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.

TypeScript

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:

TypeScript

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.

TypeScript

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.

TypeScript

import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.cardClicked(card, widgetId);

Delete Card

Call the deleteCard() API to delete a card.

TypeScript

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.

TypeScript

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.

TypeScript

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.

TypeScript

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.

TypeScript

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.