ReferenceWidgets
Marketplace widget
Browse items, preview on the buddy, purchase and equip with one tap.
Mount
<div
data-hatched-widget="marketplace"
data-hatched-token="SESSION_OR_EMBED_TOKEN"
data-hatched-marketplace-id="mp_default"
></div>Attributes
| Attribute | Values | Default |
|---|---|---|
data-hatched-token | session token (embed token NOT supported) | required |
data-hatched-marketplace-id | id | required |
data-hatched-layout | grid carousel | grid |
data-hatched-category | category key | all |
data-hatched-show-balance | true false | true |
Required scopes
marketplace:readmarketplace:purchase— to enable the Buy buttonbuddy:read— to show affordability and preview
Events
el.addEventListener('hatched:item-purchased', (e) => {
toast(`Bought ${e.detail.itemName}`);
});
el.addEventListener('hatched:item-equipped', (e) => {
// buddy widget picks this up automatically — no action needed
});Preview-on-buddy
When the marketplace widget is mounted on the same page as a buddy widget, hovering over an item previews it on the buddy live. This uses a cross-widget messaging bus; no extra wiring needed.