---
title: Content Cards on a Website
slug: docs/content-cards-on-a-website
docTags:
createdAt: 2024-11-14T06:59:37.249Z
---
Content Cards are a **digital messaging feature** that allows brands to deliver persistent, non-intrusive, and engaging messages directly on the website. These cards present personalized, rich media content, such as offers, updates, or recommendations, without interrupting the user's flow. They stay visible on the website until the user interacts with them.
:::hint{type="success"}
To see the live working example of this scenario visit the Luma home page [https://dsn.adobe.com/web/luma3](https://dsn.adobe.com/web/luma3). Scenario description is here [Content Cards in Luma](docId:6W2vahjmxvpbsIJgRgRs1)
:::
### Prerequisites:
1. Create a web project using DSN Quick Setup (Example: [https://dsn.adobe.com/docs/retail-demo-environment)](https://dsn.adobe.com/docs/retail-demo-environment)
2. Make sure the project is connected to Data Collection on the project integrations tab
3. Ensure the Data collection datastream has the Adobe Journey Optimizer checkbox checked for the *Experience Platform.*
### Setup:
### Create a content card configuration
1. Navigate to **Channels > Channel Configurations** menu.
- Click **Create channel configuration.**
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.
4\. Choose the platform: **Web** where the content card experience will apply:
- 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.
:::hint{type="info"}
** Location - ****ContentCardContainer**** as seen in the screenshot below is the unique identifier for the content card. **
:::
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 Management> Campaigns. Create a Campaign.
2\. Select Campaign Type as "Scheduled"
::Image[]{src="https://images.archbee.com/bAgVaanSi1tFmfc8PghaH/_vVrMvdpYMraOOkhrlAiM_image.png?format=webp" size="58" width="868" height="1114" position="center" showCaption="false"}
3\. Define Campaign Properties:
- In the **Properties** section, provide a name and description for the campaign.
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.
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- **ContentCardsWeb**
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.
Let's keep the triggers empty.
8\. Set your campaign to run on a specific date or recur at regular intervals
9\. Begin creating the content by clicking **Edit content**.
**Target**: To provide the target value, it has to be a page URL. Example:
[https://dsn.adobe.com/web/luma3/fall-24-collection](https://dsn.adobe.com/web/luma3/fall-collection)
Go to your target page and copy the link from the URL.
*Provide sample content as below: *
**Title**: Explore the Fall '24 Collection
**Body**: Embrace fall with cozy, stylish essentials.
**Media Url**: [[[https://demo-system-next.s3.amazonaws.com/assets/luma/fall-collection-web.jpg](https://demo-system-next.s3.amazonaws.com/assets/luma/fall-collection-web.jpg)](https://as2.ftcdn.net/v2/jpg/09/21/80/11/1000_F_921801165_CPowIyk2b5kguCKufJXZlEXIWQsRUy1H.jpg)](https://t4.ftcdn.net/jpg/09/29/45/99/240_F_929459911_XLhX1UScH55K1JfWU2D1FLFLOC0xJ3ey.jpg)
**Button Label**: Shop Fall Collection
**Target**: [https://dsn.adobe.com/web/luma3/fall-24-collection](https://dsn.adobe.com/web/luma3/fall-24-collection)
### Update the AEP Data Collection tag property configuration
To display the Content Cards on the DSN web project, you will have to update the rule in the tag property.
**Update the Tag properly Web view rule**
1. Go to your web project --> integrations and open your Data Collection property
2.
3. Using the menu, click on **Rules**
4. Click on the rule **Page View **to edit the configuration. Click on the action - **'Send "PageView" Experience Event'. **Add a surface under surfaces - for example -web://dsn.adobe.com/luma3/home#ContentCardContainer. When you are using your custom project it would be web://dsn.adobe.com/projectName/page#location. This location needs to match the location specified when creating the channel configuration.
5.
6. 
:::hint{type="info"}
Following steps 1-6 are temporary. The Rule: Subscribe ruleset items will be part of the Luma preset soon and these docs will be updated.
:::
1. In the **Events**, click on the **+ **button to add an event.
2. Select **Extension **and set it to** Adobe Experience Platform Web SDK, **set** Event Type **to** Subscribe ruleset items and Name **to** Adobe Experience Platform Web SDK - Send event complete. **On the right side, under Schemas, select Manually Enter Schemas and select Value - **Content Card. **Under surfaces, provide surface name as done in the previous step.
3.
4. In the **Actions**, click on the **+ **button to add a new action
5. In the action, set the Extension to **Core, **the Action Type to **Custom Code**, set the name to **Display Content Card**, set the language to **JavaScript **then click on **Open Editor**
6. Copy and paste the following code in the Data Collection code editor, make sure to** update the ID in the code on line 23 which should be the same as provided on the website configuration page.**
```javascript
if (!Array.isArray(event.propositions)) {
console.log("No personalization content");
return;
}
console.log("##Received response##", event.propositions);
event.propositions.forEach(function (payload) {
payload.items.forEach(function (item) {
if (!item.data || !item.data.content || item.data.content === "undefined") {
return;
}
const { content } = item.data;
const { title, body, image, buttons } = content;
const titleValue = title.content;
const description = body.content;
const imageUrl = image.url;
const buttonLabel = buttons[0]?.text.content;
const buttonLink = buttons[0]?.actionUrl;
const html = `
${titleValue}
${description}
`;
if (document.querySelector(".ContentCardContainer")) {
const contentCardContainer = document.querySelector(
".ContentCardContainer"
);
contentCardContainer.innerHTML = html;
contentCardContainer.style.height = "300px";
}
});
});
```
### Configure Website for Content Cards
1. Open web project in builder configuration.
2. Navigate to the Home screen(or any screen)
3. Add module - **Banner **under General category**.**
4. Click on the component and open the right sidebar. In the** Styles **section - provide value for Custom CSS Classes as **ContentCardContainer**.
:::hint{type="warning"}
The class name must match the id used in the script code mentioned above, to render the card in the
:::
In our case: **ContentCardContainer** is the location on the page where Content Cards will be rendered.
5\. Open the website. Navigate to the home screen. The content card should be rendered in the place you have added the banner.
