Trigger automations with In app notifications

🔍 Problem Statement

We need an in-app notification channel for event-based workflows that works across ALL Pelcro UIs — Default UI, React Elements, and fully custom UIs built directly on the JS SDK. Building rendering logic per UI layer would leave custom-UI publishers without coverage. The JS SDK is the common denominator across all Pelcro frontends.

💡 User Story

As a marketer, I want to send an in-app notification (banner, toast, or inline card) to customers matching an event-based segment, so I can engage users in the moment — regardless of which Pelcro UI surface they are on.

As a developer integrating Pelcro, I want a simple way to either auto-render notifications OR listen to an event and render them myself, so I am not forced to migrate UI surfaces just to use this feature.

🎯 Definition of Done (DoD)

────────────────────────────────

ARCHITECTURE — JS SDK MODULE

────────────────────────────────

✔ New Pelcro.notifications module in the JS SDK, following the same conventions as Pelcro.user, Pelcro.subscription, etc.

✔ On user authentication, the SDK calls GET /notifications/active and fetches the list of pending in-app notifications for that customer.

✔ For each pending notification, the SDK dispatches a notification.received event consumable by publisher code.

✔ The SDK exposes a simple API for retrieval, dismissal, and click tracking:

• Pelcro.notifications.list()

• Pelcro.notifications.refresh()

• Pelcro.notifications.dismiss(id)

• Pelcro.notifications.markAsClicked(id)

• Pelcro.notifications.on('received' | 'dismissed' | 'clicked', callback)

────────────────────────────────

TWO INTEGRATION PATHS

────────────────────────────────

Path 1 — Default UI/React elements:

✔ Pelcro.notifications.enable({ position, theme, maxVisible, autoDismissAfter }) opt-in renders notifications automatically with brand-aware styling (site logo + color palette).

Default UI and React Elements use this built-in renderer under the hood — zero integration effort for those publishers.

Path 2 — Custom UIs

✔ Custom-UI publishers subscribe to Pelcro.notifications.on('received', callback) and render notifications however they want.

✔ A ~20-line sample HTML/JS snippet is published in the developer docs showing how to subscribe and render.

────────────────────────────────

Platform UI

────────────────────────────────

Add a simple rich text editor for notification content in the automation form.

Fields:

• Title (required) — plain text, single line, no formatting

• Body (required) — rich text editor: bold, italic, links, ordered/unordered lists. No images, no embeds, no custom HTML.

• CTA label (optional) — plain text, single line

• CTA URL (optional) — validated as URL

• Dismissible (toggle, default: true)

• Expiry (default: 30 days, configurable per workflow)

✔ Notifications are delivered on the customer's next page load after they enter the segment

✔ Notifications are user-scoped — only authenticated customers receive them. Anonymous visitors do not.

✔ Notifications NOT loaded by the customer within the expiry window are marked expired and not redelivered.