---
title: Modify CX App content
slug: docs/modify-cx-app-content
docTags: 
createdAt: 2024-11-19T16:57:37.616Z
---

The Customer Experience App project allows you to customize various elements to meet customer branding and use cases. In the section below, we will configure the minimum required for the Call Center use case.

## Branding 

Follow the steps below to configure the Customer Experience App branding:

1. Open the newly created Customer Experience App project.

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/2GhPUDWm9_-lmUexxFTX8_image.png)

   2\. You are redirected to the default tab **Branding**. Using this screen, you can modify the customer logo and the background/text colors.

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

##  Integrations

To connect your Customer Experience App project with your AEP/AJO sandbox, you need to select the Adobe Data Collection tag property (Launch) in the **Integrations **tab. The one you created during the project creation process should appear at the top.

![](https://api.archbee.com/api/optimize/5DDrYpNrf6iEJahKpoKSv-QSxthc4jbA2yfRDDbq70h-20241216-101824.png)

When you select a tag property, the Launch Property ID, IMS Org, and the AEP Sandbox Name details will be automatically filled. 

## Modules

The **Modules **tab allows you to configure the display order, labels, and properties of the Customer Experience App modules.

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

For the Call Center use cases, we recommend using the following modules:

- Activity Timeline
- Activity Summary
- Recommendation
- Contact
- Customer Satisfaction

For example, let's configure the **Recommendation** module to display the next best offer powered by Offer Decisioning.

As prerequisites, you need to have a [Decision](https://experienceleague.adobe.com/docs/journey-optimizer/using/offer-decisioniong/create-manage-activities/create-offer-activities.html?lang=en) created and activated. The [offers](https://experienceleague.adobe.com/docs/journey-optimizer/using/offer-decisioniong/managing-offers-in-the-offer-library/configure-offers/creating-personalized-offers.html?lang=en) included in the decision must have a JSON representation with the following structure:

:::CodeblockTabs
JSON

```javascript
{
     "name": "Bring your mug and enjoy a free coffee cup",
    "description": "Show you love your mug and the environment",
    "image": "https://adobedemo.com/demo/myimage.png",
    "link": "https://adobedemo.com/mycategory"
}
```
:::

*Note: HTML and Image offers are not supported but are in scope for a future release.*

Below are steps to configure the module:

1. In Adobe Journey Optimizer, copy the Decision scope.

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

  2\. In your Customer Experience App project, edit the **Recommendation **module and paste the decision scope.

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

  3\. Update the number of Offers to display.

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

Your project is now ready to display the Next best offer for the customer calling the Call Center!

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

## User 

The **User **tab lets you modify the Name, Role, and avatar of the advisor interacting with the customer e.g. Call Center Agent, Financial Advisor, etc.

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/Bf_TIZM6RyTIwdh163-J7_image.png)