ReferenceWidgets
Badges widget
A shelf of the buddy's earned badges, with hover details and share actions.
Mount
<div
data-hatched-widget="badges"
data-hatched-token="SESSION_OR_EMBED_TOKEN"
data-hatched-layout="grid"
></div>Attributes
| Attribute | Values | Default |
|---|---|---|
data-hatched-token | session or embed token | required |
data-hatched-layout | grid row compact | grid |
data-hatched-limit | number | 12 |
data-hatched-filter | all recent category:<key> | all |
data-hatched-show-locked | true false | true |
Required scopes
buddy:readbadges:read
Events
el.addEventListener('hatched:badge-selected', (e) => {
openBadgeModal(e.detail.badgeId);
});Share actions
Each badge tile exposes a share button when
data-hatched-shareable="true". Share target URLs are resolved via the
customer's brand kit (Settings → Sharing) and include OG image metadata.