Perk toast
Celebrate each perk on your site the moment a member unlocks it, with their code or claim link.
The perk toast pops up on any page of your site when a member unlocks a milestone perk. It shows what they got (a coupon code to copy, a claim link or your message) beside their streak, and it plays once per perk in each browser. It never plays on top of the streak widget's own celebration.
Set up perks and build the toast in your dashboard on the Perks page under Add to your site, or from Connect › On your site.
Snippet
The toast reads the same member as the streak widget, from the same attributes. Put it on every page where members are signed in:
<script
src="https://cdn.perkadoo.com/widget.js"
data-widget="perk"
data-project="YOUR_PROJECT_KEY"
data-event="YOUR_ACTION"
data-identity-token="SIGNED_TOKEN_FROM_YOUR_SERVER"
defer
></script>Already running the streak widget? Keep its script and add the element, so the page loads widget.js once:
<perkadoo-perk
data-project="YOUR_PROJECT_KEY"
data-event="YOUR_ACTION"
data-identity-token="SIGNED_TOKEN_FROM_YOUR_SERVER"
></perkadoo-perk>Attributes
The element and its script tag read the same attributes.
| Attribute | Type | Default | What it does |
|---|---|---|---|
data-project | project key | required | Your project key, the same data-project the streak widget uses. |
data-event | action key | visit | The streak's action. data-kind works too, as on the streak widget. |
data-member | text | none | The signed-in member's email or platform ID, as on the streak widget. |
data-identity-token | signed token | none | A short-lived signed identity. Codes and claim links show only with one. |
data-user-hash | text | none | Your own stable member hash, when the streak widget gets one too. |
data-position | bottom-right, bottom-left, top-right or top-left | bottom-right | The corner the toast pops into. |
data-theme | auto, light or dark | none | Unset uses your brand theme. auto follows the member's light or dark setting. |
data-accent | hex color | none | Tints the toast's button. Unset uses your brand theme's button color. |
data-dismiss-after | seconds, 0 to 60 | 8 | When the toast leaves on its own. 0 keeps it until the member closes it. |
data-api-base | URL | none | Only for testing against your own API. |
Hovering, tabbing into the toast or opening its share panel holds it on screen. Members can always close it.
Theming
data-theme matches your site, and auto follows each member's light or dark setting. data-accent recolors the button. Leave both out and the toast uses your workspace's brand theme from Settings. data-position picks the corner.
Privacy
- Protected rewards. Coupon codes and claim links are revealed only on pages that pass a signed
data-identity-token, exactly as the streak widget does. Without one, the toast still celebrates the perk and says the reward arrives through your site's verified reward flow. The value never reaches the browser. See Connecting users. - Seen perks are remembered in the member's own browser storage, so each perk plays once there.
- Sharing a perk card never shares the code. See Share.
React
@perkadoo/react is in preview and not yet on npm, so this is how it will work. Until then, use the script tag above.
import { PerkToast } from "@perkadoo/react";
export function Perks({ token }: { token: string }) {
return <PerkToast project="YOUR_PROJECT_KEY" event="YOUR_ACTION" identityToken={token} />;
}Every attribute is a prop of the same name in camel case, such as dismissAfter. PerkToastPreview renders a toast from a perk you pass, without fetching or remembering anything.