---
title: Experience Decisioning
slug: docs/vJ_d-experience-decisioning
docTags: 
createdAt: 2026-02-11T06:41:38.973Z
---

The **Experience Decisioning** component renders personalized content from **Adobe Journey Optimizer (EXD)** campaigns on your website pages. It connects to your EXD campaign, matches the configured **surface** with decisions from the campaign response, and displays the personalized content.



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

The component supports **three rendering formats**:

- **Ribbon**
   A compact banner bar with optional image and text. It can be displayed inline on a page or fixed at the top of all pages. 
- **Banner**
   A full-width hero section with image, title, subtitle, and an optional call-to-action button. 
- **Card**
   A flexible card layout with multiple variants (image on top, left, right, or overlayed) for displaying personalized content. 

## Simplifies Data Collection Rule

- **Simplified data collection**
   The data collection rule is handled directly by the component code. You no longer need complex Launch rules for each personalization variant. 
- **Complex logic handled in code**
   All EXD communication, surface matching, and content parsing are managed internally by the component. 
- **Simple drag-and-drop**
   Add the component through the visual editor, configure it, and it works immediately—no custom JavaScript required. 

## Prerequisites

Before using the ExperienceDecision component, ensure the following:

- You have an **Adobe Journey Optimizer** campaign configured with decisions, and the surface and Content format should be JSON.

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

- Your website project has **data collection (Launch)** configured to call
   updateEXDOffer(response) with the EXD response. 
- The campaign should use the following structure for content:

```javascript
{
      "image": "https://example.com/image.jpg",
      "text": "Main title or text",
      "description": "Subtitle or description",
      "link": "https://example.com/page",
      "buttonLabel": "Click Here"
}
```

For more details, see:
 **[Experience Decisioning](https://dsn.adobe.com/docs/D0Yv-experience-decisioning)**

## Steps

### Step 1: Create Website Project

1. Go to:
    https\://dsn.adobe.com/quick-setup
2. Select your environment. 
3. Select the preset **“Luma Advanced”** (or your preferred preset). 

### Step 2: Add ExperienceDecision Component to Home Page

- Go to:
   https\://dsn.adobe.com/workspace
- Open your website project. 
- Click the **Home** page tile.  

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

- Select **Edit Content** from the right-hand panel. 
- In the visual editor, click **+**.  

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

- Search for and select **ExperienceDecision **under the General Category. 
- Click on the component, and it is added to the page and is ready for configuration. 

For more details, see:
 **Step 3 – Modify the website**
 https\://dsn.adobe.com/docs/step-3-modify-the-website

### Step 3: Configure ExperienceDecision Component

After adding the component, configure it using the panel on the right.

Basic Configuration

- **Render as**
   Choose how the content should be displayed: 
  - **Ribbon** 
  - **Banner** 
  - **Card** 
- **Surface**
   Enter the surface identifier that matches your EXD campaign
   *(for example: web://dsn.adobe.com/luma3#TopRibbon)* 
- **Styles → Background colour**
   Set the background color (for example: #ffffff) 

**Ribbon-Specific Configuration**

When **Render as** is set to **Ribbon**:

- **Ribbon position** 
  - **Inline**: Renders within the page content flow 

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

:::Paragraph{listStyleType="disc" indent="2"}
**Top of page**: Renders fixed at the top of all pages 
:::

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

**Note:**
 When **Top of page** is selected:

- The ribbon appears on **all pages** of the website. 
- The component itself does not render content on the page where it is placed. 
- The ribbon is managed globally by the **Page** component. 



**Banner-Specific Configuration**

When **Render as** is set to **Banner**:

- **Full width**: Toggle to span the full browser width 
- **Alignment**: Left, Center, or Right 
- **Vertical alignment**: Top, Middle, or Bottom 
- **Styles** 
  - **Height** (for example: auto or 500px) 
  - **Text colour** (for example: #f9e322) 



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



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

**Card-Specific Configuration**

When **Render as** is set to **Card**:

- **Card layout** 
  - Image on top 
  - Image on the left 
  - Image on the right 
  - Image partially overlayed 
  - Image fully overlayed 
- **Alignment**: Left, Center, or Right 
- **Vertical alignment**: Top, Middle, or Bottom 

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