perkly

Widget Demo

Choose a workspace, tune the same options as in Admin → Widget, then load. Changes apply automatically after the widget is running—or click Load / Reload.

Workspace
Slug must exist in your database (e.g. from Super Admin).
Widget appearance
Same fields as admin. Here they use window.__PERKLY_WIDGET_OVERRIDES__ and do not write to your database.

Text beside the floating icon. Clear to hide the label.

Embed code
Production sites usually rely on saved admin settings. For static overrides, set __PERKLY_WIDGET_OVERRIDES__ before the script runs.
(function () {
  var s = document.createElement("script");
  s.src = "/widget.js";
  s.setAttribute("data-workspace", "acme-inc");
  s.async = true;
  document.head.appendChild(s);
})();

// Optional (e.g. /demo): override colors & layout without saving to the database
window.__PERKLY_WIDGET_OVERRIDES__ = {
  "primary_color": "#4f46e5",
  "secondary_color": "#6366f1",
  "font_family": "sans-serif",
  "button_style": "rounded",
  "position": "bottom-right",
  "launcher_label": "Loyalty"
};

Live preview

The widget adds a floating launcher on document.body. Use Position above to move it. The launcher label appears next to the gem (default demo: Loyalty).

Open the panel from the gem icon, sign in if needed, and try rewards—redemption success screens use your primary color.

What happens when someone redeems
Points drop immediately. For coupon rewards (admin: static / generated / legacy discount titles), the success screen shows Your coupon code and a copy button—same layout as the live widget after redeem.

Discount / coupon reward

Reward redeemed

10% off your order — coupon

−500 points · New balance: 1,250 points

Your coupon code

PERK-A1B2-C3D4

Other rewards (no code)

Reward redeemed

Free shipping perk

−300 points · New balance: 1,450 points

Points were deducted. This reward does not use a checkout code—your redemption is saved to your account.