--- title: Decisioning Renderer slug: docs/STWF-decisioning-renderer docTags: createdAt: 2026-09-05T09:15:12.641Z --- Showing personalized content (a banner, ribbon, or card from an Adobe Journey Optimizer campaign) directly on a real external website used to be genuinely hard to demo. Because the site isn't one of our own pages, the old way meant updating Data Collection (Adobe Launch) with a rule to request that content, and then writing actual code to render it correctly in the right location on the page — every time, for every site, before you could show anyone anything. This feature removes both of those steps entirely. There's no Data Collection rule to build and no code to write — you just configure where the content should appear and how it should look, and it's ready to demo, in minutes instead of a full engineering effort. You can also demo it live: open the Profile Viewer widget on the site, click one button, and watch the personalized content appear. ## Before you start You’ll need a project built from the **Luma - Advanced (External website)** template. ## Step 1: Create the project 1. Go to **Quick Setup - https\://dsn.adobe.com/quick-setup** 2. Choose the **Luma - Advanced (External website) ** 1. **** ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/roC5ILYlb5TEVkE909-FJ_image.png" size="60" isUploading="false" width="598" height="190" darkWidth="598" darkHeight="190" showCaption="false"} 3. Finish creating the project as you normally would. This would set up the external website project. It would also set up ExD campaigns.For more information on ExD setup : [https://dsn.adobe.com/docs/D0Yv-experience-decisioning](https://dsn.adobe.com/docs/D0Yv-experience-decisioning) :::hint{type="info"} Note: ExD Campaign should be JSON-based, not HTML. ::: 4. Open the data stream associated with web project in data collection. Check "Adobe Journey Optimizer" ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/uLybmMgdbUJH5BT8AIvwH_image.png" size="50" isUploading="false" width="526" height="90" darkWidth="526" darkHeight="90" showCaption="false"} ## Step 2: Open the project 1. Go to **dsn.adobe.com**. 2. Open the project you just created. ## Step 3: Configure where the content should appear 1. Click the **Decisioning Surfaces **tab - ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/dwrmxdBXBDVzdpbNGfUwi_image.png" size="40" isUploading="false" width="294" height="134" darkWidth="294" darkHeight="134" showCaption="false"} 2. Click **Add Surface**. 3. Fill in the row: - **Surface** — this must match the surface name set up on the Adobe Journey Optimizer campaign. - **CSS Selector** — this tells the page exactly where to put the content. Open the live website, right-click the location where you want the content to show, choose “Inspect”, and find a class name or ID on that element. Type that into this field (for example .hero-banner). - **Render as** — choose how the content should look: - **Ribbon** — a small strip with an image and one line of text. - **Banner** — a larger image with a headline and text overlaid on top. - **Card** — an image next to a headline, text, and an optional button. - ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/1aTHqIKEf9RjZZ1X_jJQY_image.png) 4. Click **Options** next to the row to fine-tune it — background colour, text colour, alignment, size, and (for Banner) width and height. There’s also a Custom CSS box here for anything the standard options don’t cover. ### Using the Custom CSS box Each render type is always built with the same fixed class name, so you always know exactly what to target. Type one line per rule. A few examples: - **Ribbon** — push the text to the left instead of centered: - .ribbon \{ justify-content: flex-start; } - **Banner** — make the banner narrower than the default: - .banner \{ max-width: 700px; } - **Card** — give the card a light grey background instead of white: - .card \{ background: #f5f5f5; } You can add more than one rule at a time — just put each on its own line. ### Run the live website with script injected. You would see an icon on middle right of the screen for Decisioning Renderer. :::Paragraph{indent="2"} a. Open Profile Viewer and click on the Utilities section. Click on Register to create a new profile. ::: :::Paragraph{indent="1"} ::: ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/GIKCq0LAN884ZIIfZR-yb_image.png" size="50" isUploading="false" width="734" height="730" darkWidth="734" darkHeight="730" showCaption="false"} :::Paragraph{indent="2"} b. Now the account is created. Click on the icon in the middle right of the screen to open the Decisioning Renderer. **This will appear by default if surfaces are configured.** ::: :::Paragraph{indent="2"} ::: ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/bxupDKDyNsJ_7So2f0x5N_image.png" size="30" isUploading="false" width="172" height="228" darkWidth="172" darkHeight="228" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/YOzJxvy9sFrIjiWrvLlKN_image.png" size="30" isUploading="false" width="620" height="646" darkWidth="620" darkHeight="646" showCaption="false"} :::Paragraph{indent="2"} c.Click on Run Content Decision. It is going to run decisioning based on the surfaces configured. You will see content appear on the live website. ::: :::Paragraph{indent="2"} ::: ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/UxMVjoMmwF8ZMXVhCVxVn_image.png" size="30" isUploading="false" width="582" height="602" darkWidth="582" darkHeight="602" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/y4RPH-hZdJGeGRwCWqDth_image.png" size="60" isUploading="false" width="3452" height="1490" darkWidth="3452" darkHeight="1490" showCaption="false"} :::Paragraph{indent="2"} d. Provide Loyalty Level as Blue and click on Update Profile. It will update the profile, but make take a couple of seconds. Once done, then click on Run Content Decision; the content will update on the page. ::: :::Paragraph{indent="2"} ::: ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/w7cimHsVz8njdw-m5LiaB_image.png" size="40" isUploading="false" width="602" height="776" darkWidth="602" darkHeight="776" showCaption="false"} :::Paragraph{indent="2"} ::: ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/0MZ19_1RyhESYC-Pc1wEE_image.png" size="50" isUploading="false" width="3456" height="1028" darkWidth="3456" darkHeight="1028" showCaption="false"} ## Step 4: Turn on the Decisioning Simulator 1. Click the **Profile Viewer **tab 1. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/iZxSbrC8vX_shH3RfXs0x_image.png" size="40" isUploading="false" width="218" height="90" darkWidth="218" darkHeight="90" showCaption="false"} 2. Look for the **Decisioning** 3. Check **Show decisioning simulator section**. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/2jgUFXRjj8eEeS_rR0z8b_image.png" size="50" isUploading="false" width="934" height="84" darkWidth="934" darkHeight="84" showCaption="false"} This adds a panel to the Profile Viewer widget on the live site. That panel is what lets you manually trigger and demo the personalized content. ## Step 5: Decide when it should appear Back in the **Decisioning** section (Step 3), there’s a second checkbox: ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/ZfJ41Y-b6w0n-4FODivju_image.png" size="50" isUploading="false" width="1020" height="92" darkWidth="1020" darkHeight="92" showCaption="false"} - **Automatically apply decisioning** the content shows automatically for every real visitor, as soon as the page loads, with no one needing to do anything. - Unchecked: the content only shows after someone manually clicks **Evaluate and Apply** in the Profile Viewer widget. This is useful for demos, since it gives you full control over exactly when the content appears and it can be used in conjuction with profile updater. Changing profile attributes and then evaluating the response. ## Step 6: Test it 1. Open the live website. 2. Open the Profile Viewer widget. 3. Click **Evaluate and Apply**. - \- It shows the response right there in the Profile Viewer widget, under each surface you configured — so you can see exactly what content was found before it goes anywhere. - \- It applies that content onto the live page, in the spot you set up with the CSS Selector. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/_miBd8mNwk25ocsGjNgM2_image.png" size="50" isUploading="false" width="720" height="1382" darkWidth="720" darkHeight="1382" showCaption="false"} 4. Confirm the content shows up in the location you configured. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/12xC-qJxggYtAQAiVJQwy_image.png" size="50" isUploading="false" width="3440" height="990" darkWidth="3440" darkHeight="990" showCaption="false"} If nothing appears, double-check the **Surface** name matches the campaign exactly, and that the **CSS Selector** points at an element that actually exists on the page. :::hint{type="info"} **Note**: If you use Automatic apply decisioning, it will be applied to the page independent of the profile viewer. :::