Welcome to example Vanilla JS



1. Placement on Components

Components with a placement attribute read trigger config (text, position, clickAction) from the backend-resolved placement. Configure placements via the business dashboard's merchant sdkConfig.

Placement IDs must match entries in the merchant's sdkConfig.placements. If no match, components fall back to HTML attributes / defaults.

No placement (default)

placement="hero-share"

placement="sidebar-promo"

placement="footer-cta"

2. Placement on Modals

Programmatic displayModal() calls with an optional placement parameter. The listener applies placement-scoped translations and CSS on top of global config.

3. Backend Served Translations

This modal relies on backend translations from the merchant's sdkConfig.translations (resolved via /resolve). Backend translations overwrite SDK customizations.i18n for overlapping keys.

Requires a backend running with a merchant configured for "localhost" that has translations in its sdkConfig.

1. Backend placement translations (highest priority)
2. Backend global translations
3. Per-modal metadata.i18n
4. SDK customizations.i18n
5. Built-in defaults (lowest priority)
[Ready] Click to test backend-served translations

4. Backend vs Dev Translations

Compare translation sources. The SDK config above includes customizations.i18n with dev overrides. Open each modal and observe which translation source wins.

Expected behavior:
• "Dev i18n" → SDK translations, overwritten by backend for overlapping keys
• "Per-modal" → per-call i18n wins over both SDK and backend
• "Placement" → placement translations win over everything
[Ready] Click to compare translation sources

Identity Merge Demo

This demonstrates cross-browser identity linking. Useful when users navigate from social app browsers (Instagram, TikTok) to external browsers via SSO/OAuth flows.

Note: Token generation requires backend running with a merchant configured for "localhost".

Your anonymousId: Loading...

[Ready] Merge token demo initialized