If you need to modify your loyalty widget using Javascript, you may need to use Stamped's listening event to run the code after the widget is loaded. Follow this guide to learn how to add the listening event code.
In This Guide
Adding The Listening Event Code
Add this JS function for listening to events fired by Stamped:
function addEventListenerStamped(el, eventName, handler) {
if (el.addEventListener) { el.addEventListener(eventName, handler); }
else { el.attachEvent('on' + eventName, function () { handler.call(el); }); }
}
// Example: open the rewards launcher once it has loaded
addEventListenerStamped(document, 'stamped:launcher:loaded', function(e) {
StampedFn.toggleRewardsModal();
});Events
Rewards / Launcher events
| Event Name | Fired When |
|---|---|
| stamped:launcher:loaded | The rewards launcher has loaded |
| stamped:launcher:opened | The rewards launcher is opened |
| stamped:launcher:closed | The rewards launcher is closed |
| stamped:rewards:init | The rewards data has initialised |
| stamped:rewards:earned | A customer earns points via an activity |
| stamped:rewards:redeemed | A customer redeems points |
| stamped:rewards:coupon:applied | A rewards coupon is applied |
Per-widget "loaded" events
Each rewards widget fires its own load event following the pattern:
stamped:widget:{data-widget-type}:loaded
The {data-widget-type} token matches the widget's data-widget-type value exactly. So the earnings widget fires stamped:widget:rewards-earnings:loaded, the spendings widget fires stamped:widget:rewards-spendings:loaded, and so on — swap the token for whichever reward widget you're listening for.
| Event Name | Fired When |
|---|---|
| stamped:widget:rewards-earnings:loaded | The Ways to Earn Points (earnings) widget has loaded |
| stamped:widget:rewards-spendings:loaded | The Redeem for Discounts (spendings) widget has loaded |
| stamped:widget:rewards-vip-tiers:loaded | The VIP Tiers widget has loaded |
| stamped:widget:rewards-referral:loaded | The Referral widget has loaded |
| stamped:widget:rewards-activities:loaded | The Rewards Activities widget has loaded |
| stamped:widget:rewards-summary:loaded | The Rewards Summary widget has loaded |
The list above shows common reward widget types. The pattern applies to any rewards widget — use the exact data-widget-type value of the widget you're targeting as the token.
JS Methods
Launcher control (verified)
| Method | What it does | Example |
|---|---|---|
| StampedFn.toggleRewardsModal() | Opens/closes the rewards launcher | StampedFn.toggleRewardsModal(); |
| StampedFn.toggleLauncher() | Same as above (alias for the launcher toggle) | StampedFn.toggleLauncher(); |
| StampedFn.loadLauncherView(viewKey) | Loads a specific card view in the launcher. viewKey = string (see view keys below) | StampedFn.loadLauncherView('view-earnings'); |
| StampedFn.scrollLauncherView(selector) | Scrolls the launcher to a specific element | StampedFn.scrollLauncherView('.some-card'); |
| StampedFn.getLoggedInCustomer() | Returns the currently logged-in customer object | const c = StampedFn.getLoggedInCustomer(); |
| StampedFn.getDataRewards() | Returns the loaded rewards data object | const d = StampedFn.getDataRewards(); |
| StampedFn.rewardsPointsRefresh() | Refreshes the customer's points balance | StampedFn.rewardsPointsRefresh(); |
loadLauncherView — view keys
Verified in the client bundle:
| View Key | Card View |
|---|---|
| main | The main launcher view |
| view-earnings | Ways to Earn Points |
| view-your-rewards | Your Rewards |
| view-coupon | A redeemed coupon view |
| view-redeem-variable | Variable-points redemption slider |
How to test empirically (DevTools console)
You can test these by hooking the dispatcher, then interacting with the launcher:
const _dispatch = document.dispatchEvent.bind(document);
document.dispatchEvent = function(e) {
if (e && e.type && e.type.startsWith('stamped:')) console.log('📡', e.type, e);
return _dispatch(e);
};
Confirm valid view keys by calling StampedFn.loadLauncherView('view-spendings'); (etc.) with the launcher open and checking whether the view loads or errors.