On-site widgets

Perkadoo's widgets follow the loop: a giveaway banner brings new faces in, the streak widget brings them back, a perk toast makes it worth it, and share lets people show it off.

Build and preview each one in your dashboard under Connect › On your site. Every widget there has a live preview and its own snippet.

One script runs them all

https://cdn.perkadoo.com/widget.js defines every element. Load it once per page, then add an element for each widget:

<script
  src="https://cdn.perkadoo.com/widget.js"
  data-project="YOUR_PROJECT_KEY"
  data-event="YOUR_ACTION"
  defer
></script>
<perkadoo-giveaway
  data-giveaway="your-giveaway-slug"
  data-variant="bar"
  data-position="bottom"
></perkadoo-giveaway>
<perkadoo-perk data-project="YOUR_PROJECT_KEY" data-event="YOUR_ACTION"></perkadoo-perk>

The first tag is the streak widget's own script, so it loads the bundle and mounts the streak widget. Without the streak widget, load the bundle on its own:

<script src="https://cdn.perkadoo.com/widget.js" data-auto-mount="false" defer></script>

Bars, pills and toasts float over the page, so their elements can go anywhere in <body>. A banner card sits wherever you place its element.

One widget, one tag

A single widget can also mount from its script tag alone. data-widget names it and every other attribute is the element's own:

<script
  src="https://cdn.perkadoo.com/widget.js"
  data-widget="giveaway"
  data-giveaway="your-giveaway-slug"
  defer
></script>

Lazy loading

widget.js stays small. The banner and the toast each live in their own file next to it (giveaway.js and perk.js), which loads the first time its element appears on a page. A pinned or self-hosted widget.js loads the files beside it, and a CSP nonce on the widget.js tag carries over to them. Until a file loads the element renders nothing, and if it can't load, the element stays empty and never breaks your page.

Shared behavior

• Theme. data-theme is auto, light or dark. auto follows the visitor's setting.
• Accent. data-accent takes a hex color and tints the action button. Perkadoo's own colors stay.
• Never breaks your page. A bad attribute falls back to its default. A missing giveaway slug or project key renders nothing.
• Motion. Entrances and celebrations respect prefers-reduced-motion.