UpStride · Braze Web SDK Testbench
One page that exercises every Braze Web SDK surface — identity, attributes, subscriptions, events, content cards, banners, in-app messages, feature flags, push, and session controls — with a live log of every SDK call.
1 · Content cards 0 loaded
subscribe · refresh · impression · click · dismissAll cards for this user. Impressions log once per card, per page. Use the buttons to force a refresh or open the built-in feed.
2 · Banner placement demo_1234
subscribeToBannersUpdates · insertBannerRenders the banner via insertBanner. Auto-handles impression + click logging. Falls back if placement is empty.
3 · User identity
changeUser · addAliasStable ID is held in us_cid cookie for 365 days. Use the controls below to swap users or attach aliases.
4 · Standard user attributes
getUser().set*Set Braze's reserved profile fields. Calls flush on next session or via the Flush button.
5 · Custom user attributes
setCustom · increment · arraySet scalars, increment counters, or mutate string arrays.
6 · Subscriptions
notifications · groupsToggle email/push subscription state and manage subscription group membership.
7 · Custom events & purchases
logCustomEvent · logPurchaseCustom events can trigger canvases, campaigns, and in-app messages. Purchases feed revenue reporting.
8 · In-app messages
subscribe · show · logAuto-display is on. Trigger an IAM by firing a custom event matched by a Braze campaign.
9 · Feature flags
getFeatureFlag · refresh · impressionPull flags into the SDK, then log impressions when a variation is actually used.
No flag fetched yet.
10 · Push notifications
push permission · register · diagnoseWeb push needs HTTPS, a service-worker.js at site root, and browser permission. The checks below show exactly what's missing.
- HTTPS context
- —
- Service Worker API
- —
- Notification API
- —
/service-worker.js- —
- Braze isPushSupported
- —
- Permission state
- —
- Braze isPushBlocked
- —
- Registered SW scope
- —
If /service-worker.js is missing, host the provided service-worker.js file at your site root next to this page.
11 · Session & data
openSession · flush · wipeForce the SDK to flush queued data, wipe local state, or destroy the SDK instance.
Tip: wipeData clears the local user and forces re-init on next page load.
12 · Quick submit to Braze
event + standard + custom · one clickBuild an event, add standard attributes, and stack any number of custom attributes — then submit all three to Braze in one go. Each piece is optional; submit just the parts you need.
Custom event logCustomEvent
Naming guidance
- Use snake_case, past-tense, action-first — e.g.
checkout_started, notStartCheckout. - Keep names stable — they're permanent in Braze and power campaigns & canvases.
- Don't put variable data in the name (no
purchase_sku_001) — put it in a property instead. - Max length 255 chars; avoid PII in the name.
Property guidance
- Keys: snake_case, ≤255 chars. Same key should always carry the same type.
- Types accepted by Braze: string, number, boolean, date (ISO 8601), array of strings.
- Strings — short labels:
surface=hero,variant=A,plan=pro. - Numbers — for amounts, counts, durations:
cart_value=49.9,items=3. - Booleans — for flags:
is_first_time=true,used_promo=false. - Date — pass an ISO string; the SDK sends it as a timestamp Braze can filter on.
- Array — comma-separated values, e.g.
tags = martech, crm, growth. - Limits: up to ~50 properties per event, ~255 chars per string value. Don't send PII you wouldn't put in a profile.
- Where they show up: as filters in segment/canvas triggers and as Liquid in messages:
{{event_properties.${'{'}surface}}}.
Default attributes getUser().set*
Custom attributes setCustomUserAttribute
Type controls how the value is parsed (string · number · boolean · date · array).
13 · Key log info 0 events
at-a-glance · errors · last submissionsA summary of the most important signals from the SDK so you don't have to scroll the full log.
14 · Live SDK log
every call · every callbackUpStride · MarTech consultancy · Singapore · teamupstride.com