---
title: Using Content Cards
slug: docs/using-content-cards
docTags: 
createdAt: 2024-10-22T05:28:08.054Z
---

Content Cards, a digital messaging feature in Adobe Journey Optimizer, deliver personalized, engaging content directly within mobile apps. Unlike conventional push notifications, they blend smoothly into the user interface, providing persistent and non-intrusive updates that enhance interaction and user experience.

This tool allows marketers to present relevant, rich media content to users, boosting engagement and ensuring key messages are noticed without interrupting the user's journey.

The [Live Demos app](https://dsn.adobe.com/docs/dsn-demo-mobile-app) supports **Content Cards.**

### Prerequisites:

Ensure the Data collection datastream has Adobe Journey Optimizer checkbox checked for the *Experience Platform.*



::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/GWhTzG0-IFYZBDLzp50Y0_image.png" size="62" width="1358" height="1360" position="center" darkWidth="1358" darkHeight="1360" showCaption="false"}

## Setup:

### Create a content card configuration

1.Navigate to **Channels > Channel configurations** menu.

- Click **Create channel configuration**.



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/jeInuICtoi8AP2lQzbxQG_image.png)

2.Enter Configuration Details

- Provide a **name** and an optional **description** for the configuration.
- **Note**: Names must start with a letter (A-Z) and can only contain alphanumeric characters, underscores (\_), dots (.), and hyphens (-).

3.Choose the **Content Cards **channel for the configuration.



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/yL0gA0KwbPwzEbHj9J96C_image.png)

4.Choose the platform where the content card experience will apply:

**For Web**:

- Specify a **Page URL** to target a single page.
- Or, create a **Pages matching rule** to apply changes to multiple URLs that meet the rule. This is useful for making global changes across a website, such as updating a hero banner or adding an image across product pages.

**For iOS and Android**:

- Enter or select the **App ID**, **Location** or path within the app, and provide a **Preview URL**.
- **Location or path inside the app**: You can either use the same path as shown in the screenshot below ,luma.home.contentCardArea1 or use a custom surface name using the following recommended naming convention: ldap+projectid-uniqueidentifier

:::hint{type="info"}
**Location or path inside the app : **It is is simply a unique identifier that represents a specific area on a page or screen. In DSN Builder, this identifier is used to configure the **Content Card component**.

If you plan to place multiple Content Cards on the same page, each one must be assigned its **unique value**. This ensures that DSN can distinguish between the cards and deliver the right content to the right area.

**Important:**

The surface identifiers in your Adobe Journey Optimizer campaigns must exactly match the surface identifiers used in your app code. Mismatched identifiers will result in no content cards being returned.
:::



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/ZUiReB9YjhxqOBLW6tv8T_image.png)

5.After configuring the settings, submit your changes.

Once completed, you can use your new configuration when creating a **Content card experience.**

### Template Layouts

Content cards support three template types: **SmallImage, LargeImage, and ImageOnly.**

**SmallImage Template :**

- **Layout:** Horizontal layout with image on the left and content on the right

::Image[]{src="https://github.com/adobe/aepsdk-react-native/raw/content-card-ui/packages/messaging/tutorials/resources/small-image-template.png" size="44" width="747" height="429" position="center" showCaption="false"}

**LargeImage Template**

- **Layout:** Vertical layout with image at top and content below

::Image[]{src="https://github.com/adobe/aepsdk-react-native/raw/content-card-ui/packages/messaging/tutorials/resources/large-image-template.png" size="44" width="345" height="488" position="center" showCaption="false"}

**ImageOnly Template**

- **Layout:** Single image container

::Image[]{src="https://github.com/adobe/aepsdk-react-native/raw/content-card-ui/packages/messaging/tutorials/resources/image-only-template.png" size="44" width="328" height="350" position="center" showCaption="false"}

### Create content cards

To begin building your content cards through a campaign, follow these steps:

1.Navigate to Journey Managment > Campaigns. Create a Campaign.



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/1Do2gI7UHYZcuAoafzo0m_image.png)

2.Select Campaign Type as "Scheduled"



::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/_vVrMvdpYMraOOkhrlAiM_image.png" size="30" width="868" height="1114" position="center" showCaption="false"}

3.Define Campaign Properties:

- In the **Properties** section, provide a name and description for the campaign.



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/uSy6bEcjaEnFVbAWakiwq_image.png)

4.Choose Your Audience:

- In the **Audience** section, click **Select audience** to choose from the available Adobe Experience Platform audiences. 
- In the **Identity namespace** field, select the appropriate namespace to identify individuals in the segment.



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/mY7FC6WsKGKfs1M4_O_5z_image.png)

5.Choose the **Content card action **for the campaign.

6.Select or Create a Content Card Configuration

In our case, select an existing content card configuration



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/RPuour9ICHfPorO4ypOn3_image.png)

7.Enable Additional Delivery Rules (Optional):

- If needed, toggle **Enable additional delivery rules**. You can then click **Edit triggers** to define the events and criteria for message delivery using the rule builder.

Lets keep the triggers empty.



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/g5YsP0y3Rw_OuKmEwqJx5_image.png)

8.Set your campaign to run on a specific date or recur at regular intervals



::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/QmwkUMrtj6U9-2QDg89I__image.png" size="64" width="1270" height="768" position="center" showCaption="false"}

9.Begin creating the content by clicking **Content **tab.



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/tKrvSsUjzrIlIzkG-WtL-_image.png)

**Select one of the Content Card Layout. For now we will select Large Image.**

****

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/gbezR63W1WuShRQYn8833_image.png)

**Target**: To provide target value, it has to be com.adobe.dsn.dxdemo://**Name**

You can grab Name from mobile project configuration.

Go to mobile project in the builder. Click on any screen where you want to navigate.

Click on pencil icon to see the screen name and use Name property.



::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/-7ma9usBd_Lgtgwjoaos5_image.png" size="36" width="288" height="516" position="center" showCaption="false"}



::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/191vnQ2Z8mnVYbymNGToO_image.png" size="54" width="3392" height="1576" position="center" showCaption="false"}

Provide sample content as below: 

**Title**: Explore the Fall '24 Collection

**Body**: Get ready for cooler weather with our latest styles. From cozy knits to chic outerwear, discover must-have pieces for the season.

**Media Url** : [https://t4.ftcdn.net/jpg/09/29/45/99/240\_F\_929459911\_XLhX1UScH55K1JfWU2D1FLFLOC0xJ3ey.jpg](https://t4.ftcdn.net/jpg/09/29/45/99/240_F_929459911_XLhX1UScH55K1JfWU2D1FLFLOC0xJ3ey.jpg)

**Button Label**: Shop Fall Collection

**Target** : com.adobe.dsn.dxdemo://fall-24-collection 

**Button Label** : Get Styling Tips

**Target** : com.adobe.dsn.dxdemo://get-styling-tips



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/kYPkniSadX1Q6zZNisT3z_image.png)

### Configure Mobile App for Content Cards

1. Open mobile project in builder configuration.
2. Navigate to Products screen(or any screen)
3. Add component - **Content Cards **under General category**.**

 Provide surface value as **luma.home.contentCardArea1. **

While using your own Mobile project, users need to use the same **location path** used in the Content card channel configuration for the **surface** value of the Live Demos app *Content card *component.

![](https://images.archbee.com/bAgVaanSi1tFmfc8PghaH/ZUiReB9YjhxqOBLW6tv8T_image.png?format=webp)

 

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/IMglBghl4X2JiR5wypltA_image.png)

4.Open the app on the device. Navigate to products screen. It should look as below:



::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/Zox6mA6WtvFy9mmGl9gTf_image.png" size="54" width="816" height="780" position="center" showCaption="false"}

Sample Scenario is implemented in Luma - [More Info here](https://dsn.adobe.com/docs/content-cards)

**Troubleshooting:**

If an existing Content Card stops working after an app upgrade:

1. Go to **AJO** and then go to **Campaigns**. 
2. Select the campaign associated with the Content Card. 
3. Click **Modify Campaign**, then choose the **Content Card** layout. 
4. Click **Review** to reactivate the campaign.