Demo Storefront

The Selwise demo storefront is the reference implementation for customer onboarding, integration testing, and end-to-end event verification.

It is designed for two audiences:

Panel operators who need to validate campaigns, widgets, and recommendations before production rollout.
Developers who need concrete examples of canonical event instrumentation and API behavior.

App Location

/Users/selimgunaydin/Desktop/widget_saas/apps/demo
Default port: 3010

Route Map

/
/category/[slug]
/product/[slug]
/search
/cart
/checkout
/order/success/[orderId]
/auth/login
/auth/register
/account
/dev/events-lab

Local Setup

Start required services:

pnpm --filter api dev
pnpm --filter ./apps/client dev
pnpm demo:dev

Create apps/demo/.env.local:

NEXT_PUBLIC_SELWISE_SITE_KEY="sk_xxx"
NEXT_PUBLIC_SELWISE_API_URL="http://localhost:3001/api/v1"
NEXT_PUBLIC_SELWISE_WIDGET_URL="http://localhost:8080/client.js"

Open http://localhost:3010 in your local browser and verify /api/health is healthy.

Production demo reference: https://demo.selwise.com.

Operator Workflow (Panel User)

Log in to Admin/Panel and open the target site.
Configure storefront resources:

campaign(s)
widget(s)
recommendation source(s)
search settings
segments/experiments (optional)

Load the demo storefront and verify content rendering.
Execute core journeys:

browse home/category/product
run search queries + filters + sort
add/remove/update cart lines
complete checkout
sign up/login/update/logout user

Confirm analytics/event ingestion in panel reporting and/or network traces.

Developer Workflow (Integration Owner)

Confirm runtime boot requests:

GET /api/v1/public/sites/:siteKey/config
fallback endpoints only when needed

Confirm event ingestion path:

POST /api/v1/public/sites/:siteKey/events/batch

Confirm order ingestion path:

POST /api/v1/public/sites/:siteKey/orders

Validate required event contracts:

canonical event name
entityType provided
metadata.productItemCode for product-critical events

Use /dev/events-lab to force single-event testing when reproducing edge cases.

Environment Variables

Variable	Required	Purpose
`NEXT_PUBLIC_SELWISE_SITE_KEY`	Yes	Public site key used by widget runtime and event ingestion.
`NEXT_PUBLIC_SELWISE_API_URL`	Yes	Public API base URL for config + tracking + order endpoints.
`NEXT_PUBLIC_SELWISE_WIDGET_URL`	Yes	Client script URL loaded by demo storefront.
`NEXT_PUBLIC_DEMO_URL`	Optional (deploy)	Public demo origin used in deployment environments.

Canonical Event Coverage Matrix

The demo emits all canonical events through natural UI flows. Events Lab remains available for direct/manual trigger testing.

Route / Component	Emitted events	Mode
Global layout (`RouteEventTracker`, `ScrollDepthTracker`)	`page_view`, `virtual_page_view`, `scroll`	Natural
Global runtime boot (`SelwiseBoot`)	`script_injected`, `script_error`	Natural
Home hero + campaign banner	`impression`, `click`, `close`, `view`	Natural
Home newsletter/promo CTA	`custom_event`	Natural
Home product grid + `ProductCard`	`product_impression`, `product_click`, `add_to_cart`, `hover`	Natural
Recommendation strips (home, PDP, checkout)	`impression`, `click`, `slider_navigate`, `slider_swipe`	Natural
Widget surfaces (home load)	`widget_impression`, `widget_view`	Natural
Category page	`category_view`, `category_filter`	Natural
Product detail page	`product_view`, `product_dwell_time`, `add_to_cart`, `wishlist`	Natural
Cart page	`update_cart`, `remove_from_cart`, `cart_abandon`, `cart_restore`, `checkout_begin`	Natural
Checkout page	`checkout_progress`, `checkout_option`, `purchase` + `trackOrder(...)`	Natural
Search page	`search_instant_open`, `search_query`, `search_results`, `search_zero_results`, `search_filter`, `search_sort`, `search_page`, `search_close`, `recent_search_click`, `popular_search_click`, `popular_category_click`, `popular_product_click`	Natural
Auth flows (register/login/account/logout)	`identify`, `user_signup`, `user_login`, `user_update`, `user_logout`	Natural
`/dev/events-lab`	All canonical events	Manual utility

PDP DOM Contract (Count Widgets)

product_view_count and cart_count widgets auto-resolve the active product from the first matching DOM marker when contentJson.productId is not set.

The demo storefront product detail page exposes this marker with SKU/productItemCode:

<section className="page-card two-col" data-product-id={product.sku}>

Use the same value you send as metadata.productItemCode in product events.

Demo Auth Notes

Login/register/account flows are localStorage based and intentionally deterministic for integration testing.
Default seed account:
demo@selwise.dev
demo1234!

VPS / CloudPanel Deployment

docker/docker-compose.yml runs demo on port 3010.

Set runtime values in root .env:

NEXT_PUBLIC_SELWISE_SITE_KEY="sk_xxx"
NEXT_PUBLIC_SELWISE_API_URL="https://api.selwise.com/api/v1"
NEXT_PUBLIC_SELWISE_WIDGET_URL="https://widget.selwise.com/client.js"
NEXT_PUBLIC_DEMO_URL="https://demo.selwise.com"

Deploy:

./scripts/deploy-smart.sh --branch main --tag main-latest

Configure CloudPanel reverse proxy:

Location: / -> http://127.0.0.1:3010

Verify health:

curl http://127.0.0.1:3010/api/health
curl https://demo.selwise.com/api/health

Notes

The demo storefront is independent; site-level setup is controlled from the panel.
Domain verification and production access controls must be completed in Admin before live rollout.