Documentation Journey Optimizer Journey Optimizer Guide

Configure Inbox support in Web SDK inbox-configuration-sdk

Last update: September 8, 2026

CREATED FOR:

Experienced
Developer

On this page: Set up and run a sample that combines a Content Card campaign and an Inbox campaign with the Adobe Experience Platform Web SDK, so you can deliver a persistent notification inbox on your website.

style

shade-box

A message inbox is a persistent notification inbox driven by two Adobe Journey Optimizer campaigns that target the same surface:

A Content Card campaign, which delivers individual notification items to the inbox.
An Inbox campaign, which delivers configuration such as the title, empty-state copy, and layout.

Configure Adobe Journey Optimizer ajo-setup

Before you implement the Web SDK, set up the datastream, channels, and campaigns in Journey Optimizer that deliver content to the inbox.

Configure a datastream configured with Adobe Experience Platform as a service, with Journey Optimizer enabled and an event dataset selected.
Create two channel configurations that share the same surface: one Content Cards channel and one Inbox channel. Learn how to configure a content card channel and learn how to configure an Inbox channel.

Set the Page URL and Location on page of both channels to the surface you defined in the prerequisites. This location must match the surface you query for in your Web SDK code.
Create a Content Card campaign that uses the Content Cards channel for its content card configuration.

For messages that should be delivered based on user actions on the web page, enable Additional delivery rules on the relevant action and set the event and value conditions that determine when the message appears. Repeat this for each type of notification the inbox should receive.
Create an Inbox campaign that uses the Inbox channel. This campaign delivers the metadata that configures the inbox shell itself.

Match the audience and schedule settings of the Inbox campaign to the Content Card campaign so both are active for the same users at the same time.
Activate both campaigns.

Implement the Web SDK web-sdk-implementation

The inbox relies on two Web SDK commands:

subscribeRulesetItems registers a callback that runs each time the propositions eligible for display change.
sendEvent fetches those propositions. You can send additional events later to update which messages qualify for display.

Define the content card and inbox schemas, and the surface that matches your AJO channel configuration:

code language-javascript

const CONTENT_CARD_SCHEMA = "https://ns.adobe.com/personalization/message/content-card";
const INBOX_SCHEMA        = "https://ns.adobe.com/personalization/message/inbox";
const SURFACE             = "web://your-site.example/#message-inbox";

Configure the Web SDK with your datastream:

code language-javascript

alloy("configure", {
  datastreamId: "YOUR_DATASTREAM_ID",
  orgId: "YOUR_ORG_ID@AdobeOrg",
  defaultConsent: "in", // May not be usable in your implementation, but should be used for testing
  personalizationStorageEnabled: true,
})

Subscribe to ruleset items for your surface and schemas, and provide a callback that handles content card propositions as they change:

code language-javascript

alloy("subscribeRulesetItems", {
  surfaces: [SURFACE],
  schemas: [CONTENT_CARD_SCHEMA, INBOX_SCHEMA],
  callback: (result, collectEvent) => {
    const { propositions = [] } = result;
    const notifications = propositions
      .filter((p) => p.items?.[0]?.schema === CONTENT_CARD_SCHEMA)
      .map((proposition) => {
        const content = proposition.items[0]?.data?.content ?? {};
        return {
          id: proposition.scopeDetails.activity.id,
          title: content.title?.content ?? content.title ?? "",
          description: content.body?.content ?? content.body ?? "",
          proposition,
        };
      });
    renderNotifications(notifications, collectEvent);
  },
});

As users interact with your application, send events to update which content card propositions should be displayed:

code language-javascript
`alloy("sendEvent", { renderDecisions: true, personalization: { surfaces: [SURFACE] }, });`

Use the collectEvent function provided by the subscribeRulesetItems callback to report interactions back to AJO. This keeps campaign reporting accurate:

code language-javascript

// When a notification is displayed in the detail view:
collectEvent("display", [notification.proposition]);

// When a user clicks or interacts with a notification:
collectEvent("interact", [notification.proposition]);

// When a user dismisses a notification without reading it:
collectEvent("dismiss", [notification.proposition]);

// When a user deletes a notification:
collectEvent("interact", [notification.proposition]);
collectEvent("delete",   [notification.proposition]);

For cards with additional delivery rules, for example action = deposit-funds, call evaluateRulesets with the matching decisionContext to trigger them, since they don’t appear on sendEvent alone:

code language-javascript
`alloy("evaluateRulesets", { renderDecisions: true, personalization: { decisionContext: { action: "deposit-funds" }, }, });`

The subscribeRulesetItems callback runs again with any newly qualified cards included alongside the existing ones.

Install dependencies and start the sample server:

code language-bash
`npm install npm start`

Open https://localhost in your browser.
Update the datastreamId, orgId, and SURFACE constant in src/app/page.js to point at your AJO environment before testing.

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

TL;DR: This page explains how to set up and run a sample that combines a Content Card campaign and an Inbox campaign with the Adobe Experience Platform Web SDK to deliver a persistent notification inbox on a website.

Intents:

Configure the Journey Optimizer datastream, channels, and campaigns that feed the inbox
Deliver notification items with a Content Card campaign and inbox configuration with an Inbox campaign on the same surface
Subscribe to ruleset items and fetch propositions with the Web SDK
Report inbox interactions back to AJO with collectEvent
Trigger cards that have additional delivery rules with evaluateRulesets
Run the sample server locally and point it at your AJO environment

Glossary:

Message inbox: A persistent notification inbox driven by two AJO campaigns that target the same surface (product-specific)
Content Card campaign: The campaign that delivers individual notification items to the inbox (product-specific)
Inbox campaign: The campaign that delivers configuration such as the title, empty-state copy, and layout for the inbox shell (product-specific)
Surface: The Page URL and Location on page location that both channels target and that the Web SDK code queries for (product-specific)
subscribeRulesetItems: Web SDK command that registers a callback that runs each time the propositions eligible for display change (product-specific)
sendEvent: Web SDK command that fetches propositions (product-specific)
collectEvent: Function provided by the subscribeRulesetItems callback used to report interactions (display, interact, dismiss, delete) back to AJO to keep campaign reporting accurate (product-specific)
evaluateRulesets: Web SDK command called with a matching decisionContext to trigger cards that have additional delivery rules (product-specific)

Guardrails:

The datastream must be configured with Adobe Experience Platform as a service, with Journey Optimizer enabled and an event dataset selected.
The two channel configurations (one Content Cards channel and one Inbox channel) must share the same surface, and the Page URL and Location on page of both must be set to that surface.
The Location on page must match the surface you query for in your Web SDK code.
Match the audience and schedule settings of the Inbox campaign to the Content Card campaign so both are active for the same users at the same time.
Both campaigns must be activated.
Cards with additional delivery rules do not appear on sendEvent alone; you must call evaluateRulesets with the matching decisionContext to trigger them.
Before testing, update the datastreamId, orgId, and SURFACE constant in src/app/page.js to point at your AJO environment.

Terminology:

Canonical name: Message inbox — Acronym: n/a — variants: persistent notification inbox, inbox
Synonyms: “Web SDK” = “Adobe Experience Platform Web SDK”
Do not confuse: “Content Card campaign” (delivers individual notification items) ≠ “Inbox campaign” (delivers the inbox configuration/metadata such as title, empty-state copy, and layout)
Do not confuse: “sendEvent” (fetches propositions) ≠ “evaluateRulesets” (triggers cards with additional delivery rules via decisionContext)

FAQ:

Q: Which two campaigns drive the inbox? — A Content Card campaign that delivers individual notification items and an Inbox campaign that delivers configuration such as the title, empty-state copy, and layout, both targeting the same surface.
Q: Which Web SDK commands does the inbox rely on? — subscribeRulesetItems, which registers a callback that runs when eligible propositions change, and sendEvent, which fetches those propositions.
Q: Why do cards with additional delivery rules not appear after sendEvent? — They do not appear on sendEvent alone; you must call evaluateRulesets with the matching decisionContext to trigger them, after which the subscribeRulesetItems callback runs again with the newly qualified cards.
Q: How do I keep campaign reporting accurate? — Use the collectEvent function provided by the subscribeRulesetItems callback to report interactions (display, interact, dismiss, delete) back to AJO.
Q: How do I run the sample? — Run npm install and npm start, open https://localhost, and update datastreamId, orgId, and the SURFACE constant in src/app/page.js for your AJO environment.

recommendation-more-help

journey-optimizer-help