--- title: Using Content Cards - DEPRECATED slug: docs/using-content-cards-deprecated 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 [DSN Mobile App (DXDemo)](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" 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/9Wf2MgMTcby2gk2fYtORq_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-cc ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/pO0JdpUAwzUfqOAZ_bjcL_image.png) 5.After configuring the settings, submit your changes. Once completed, you can use your new configuration when creating a **Content card experience.** ### 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/2GKahRhV6SCXwhTMtUDIf_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- **ContentCards** ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/RYbZ0YCrj6iu6_KE1rBO4_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 **Edit content**. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/Xh45doCpYCAe1aFVnoWhp_image.png" size="54" width="1120" height="268" position="center" showCaption="false"} **Target**: To provide target value, it has to be 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** : dxdemo://fall-24-collection **Button Label** : Get Styling Tips **Target** : dxdemo://get-styling-tips ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/1RE7_uwXXnTqS0qtd80pb_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 DSN Mobile *Content card *component. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/dIM6W_OIrL4SuJs1JGkeE_image.png" size="36" width="1280" height="1052" position="flex-start" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/w9D1Z895Ig66TmUTY2zjj_image.png" size="54" width="3448" height="968" position="flex-start" showCaption="false"} 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/UfXBFJb9RPg9qzUzC1i1k_image.png" size="52" width="804" height="1732" position="center" showCaption="false"} Sample Scenario is implemented in Luma - [More Info here](https://dsn.adobe.com/docs/content-cards)