Giveaway banner
Turn site visitors into giveaway entrants with a bar, card or pill that follows your giveaway on its own.
The giveaway banner brings visitors from your site into a hosted giveaway. Paste it once and it follows the giveaway from countdown to winners:
- Coming up. The prize and a countdown to when entries open.
- Open. The prize, how many people have entered, a countdown to close and an Enter button.
- Paused or closed. It says so, and that winners are coming.
- Drawn. The winners, with emails masked.
A draft, archived or unknown giveaway renders nothing, so you can paste the banner before your giveaway goes live.
Build it in your dashboard on the giveaway's page under Add to your site, or from Connect › On your site.
Snippet
<script
src="https://cdn.perkadoo.com/widget.js"
data-widget="giveaway"
data-giveaway="your-giveaway-slug"
defer
></script>Or load widget.js once and place the element where it should render. Use this form for a card, or when the page already runs another Perkadoo widget:
<script src="https://cdn.perkadoo.com/widget.js" data-auto-mount="false" defer></script>
<perkadoo-giveaway data-giveaway="your-giveaway-slug" data-variant="card"></perkadoo-giveaway>Attributes
The element and its script tag read the same attributes.
| Attribute | Type | Default | What it does |
|---|---|---|---|
data-giveaway | slug | required | Your giveaway's slug, the last part of its /g/ link. |
data-variant | bar, card or pill | bar | A bar across the page, a card where you paste it, or a pill in a corner that opens on click. |
data-position | bottom or top for a bar; bottom-right or bottom-left for a pill | bottom (bar), bottom-right (pill) | Where a bar or pill floats. A card has no position. |
data-theme | auto, light or dark | none | Unset uses your brand theme. auto follows the visitor's light or dark setting. |
data-accent | hex color | none | Tints the Enter button. Unset uses your brand theme's button color. |
data-headline | text, up to 60 characters | none | Replaces the prize as the headline. |
data-cta | text, up to 24 characters | none | Replaces Enter while entries are open. |
data-countdown | true or false | true | Shows the opens-in or closes-in countdown. |
data-entries | true or false | true | Shows how many people have entered. |
data-dismissible | true or false | true | Lets visitors close it. It stays closed for that giveaway in their browser. |
data-entry | inline or link | inline | inline enters inside the banner, with your rules and consent. link opens the giveaway page in a new tab. |
data-api-base | URL | none | Only for testing against your own API. |
Entering
With data-entry="inline", visitors enter with their email inside the banner. They must agree to your official rules, which the banner links to, and marketing consent is a separate box they can leave unticked. These are the same fields and checks as your hosted giveaway page.
Once they're in, the banner shows their entry count, their invite link and ways to share. Their entry is remembered in that browser, so they see it again on their next visit.
With data-entry="link", Enter opens your giveaway page in a new tab. The banner passes along a ref from your page's URL, if there is one, so invites still count.
Theming
data-theme matches the banner to your site, and auto follows each visitor's light or dark setting. data-accent recolors the Enter button. Leave both out and the banner uses your workspace's brand theme from Settings. Copy stays short: data-headline replaces the prize line and data-cta replaces Enter.
Privacy
- Entry needs the visitor's agreement to your rules. Marketing consent is optional and never pre-ticked.
- Public winners show masked emails, or only the entry code.
- A closed banner and a saved entry are kept in the visitor's own browser storage, and only for that giveaway.
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 { GiveawayBanner } from "@perkadoo/react";
export function SiteBanner() {
return <GiveawayBanner giveaway="your-giveaway-slug" variant="pill" position="bottom-left" />;
}Every attribute is a prop of the same name in camel case, such as dismissible or apiBase. GiveawayBannerPreview renders a banner from data you pass, without fetching anything, for previews in your own tools.