Preselect a category

Open your perks page with one category already selected — Health & Wellness, Food & Drink — so customers land on what you're promoting instead of scanning the full list for it.

A perks page normally opens showing everything, with category tags across the top for customers to narrow things down. Preselecting starts them one step in: the page opens with a tag already active, exactly as if the customer had tapped it themselves. Nothing is hidden — every other tag is still there, and they can clear yours or add to it. You're choosing where customers land, not what they're allowed to see.

Two ways to set it

You can set the category in either of two places, and which one you want depends on whether every visitor should get the same starting category:

What you want	Where the category goes	Set by
The same category for everyone who opens this page	`data-category` on your container `<div>`	You, once, in your embed markup
Different categories for different links into the same page	`?category=` on the page address you send customers to	You, per campaign link

Both are available while you're integrating, and they compose: the container sets the page's standing default, and a ?category= on the address replaces it for that one visit. If you only ever want one preselected category across the board, put it on the <div> and you're done.

How it works

Categories are matched by slug: a short text id like health-wellness that Paylode fixes when the category is created and never changes, even if the category is later renamed. You always target the slug, never the display name. That's deliberate — if "Health & Wellness" is renamed in the app, its slug stays health-wellness and the links you've already sent keep working.

A slug that matches nothing in your collection is ignored and the customer gets the full page, so a stale or mistyped link degrades to the normal experience rather than to an empty one.

Before you begin

The category filter switched on for your perks center. Preselecting has no effect while the filter is off — the page would otherwise open silently narrowed with no visible tags to widen it again. See Customize your perks center.
Your perks page's address — the domain customers visit. You'll find it in the Paylode app alongside your perks center's settings; step 1 needs it even if you're embedding. See Use a hosted perks page.
A perks page you can embed or link to — see Embed a perks page or Use a hosted perks page.

Steps

1. Look up your category slugs

Two endpoints return slugs. Pick whichever suits you — the difference is whether the list is scoped to your collection.

Your collection's categories. Only categories holding at least one active perk of that collection come back, so what you see here is exactly what your page can preselect:

curl "https://perk-collections.paylode.com/perk-collections/example-rewards.perkspulse.com/categories"

The path segment identifies the collection. Here it's your perks page address, the domain customers visit; calling with an API key instead takes your perk collection id in the same position. Both forms, the header each one needs, and the remaining parameters are on getPerkCollectionCategories.

Every available category. The full list Paylode publishes, not scoped to your collection:

curl "https://perk-collections.paylode.com/categories"

See getCategories for its authentication. Bear in mind a category listed here may hold no perks on your page — preselect that one and the customer sees an empty result, so confirm against your collection before you ship a link.

Both return the same shape:

[
  { "id": 1, "name": "Food & Drink", "slug": "food-drink" },
  { "id": 4, "name": "Health & Wellness", "slug": "health-wellness" }
]

The slug is what you'll use. The name is the display label and is localized when you request another language, so it's never a safe key.

2. Same category for everyone: set it on the container

Add data-category to the container <div> you already added when you embedded the page. Every visitor to that page starts in that category:

<div
  id="paylode-iframe-container"
  data-slug="example-rewards"
  data-category="health-wellness"
></div>

On a hosted page there's no container of yours, so put it on the address you publish instead:

https://example-rewards.perkspulse.com/?category=health-wellness

Either way the page opens with that category's tag active and the list already filtered. The rest of your categories are untouched: every tag still renders, and a customer who clears or changes the selection sees the full collection.

3. Different category per link: put it on the address

If one page serves several campaigns, leave the container's data-category off — the page's own default stays the full list — and put the category on each link you send:

https://www.example.com/rewards/                            → all perks
https://www.example.com/rewards/?category=health-wellness  → Health & Wellness
https://www.example.com/rewards/?category=food-drink        → Food & Drink

For an embed, that parameter goes on your page's address — the page your container sits on — not on the Paylode address. The loader reads it from the host page and passes it through.

If a container does carry data-category, a ?category= on the address replaces it for that visit rather than adding to it.

4. (Optional) Preselect more than one

Separate slugs with commas. The page opens showing perks from any of them, the same as if the customer had tapped each tag in turn — not only perks that belong to all of them:

<div
  id="paylode-iframe-container"
  data-slug="example-rewards"
  data-category="health-wellness,food-drink"
></div>

The same works on an address: ?category=health-wellness,food-drink.

Verify

Open the page and confirm the category tag renders as selected, and that the perks listed are only that category's.
Confirm your other category tags are still shown and still work.
Clear the tag and confirm the full list comes back — preselecting is a starting point, not a lock.
Load the same page with ?category= set to a different slug and confirm it wins over any container value.
Load it with a deliberately wrong slug and confirm you get the full page.

Troubleshooting

caution

Use the slug, not the display name. A category shown as "Health & Wellness" has the slug health-wellness. Passing the name matches nothing, and the page opens unfiltered with no error — which looks exactly like the feature not working. Step 1 is the way to confirm.

note

Nothing happens when the category filter is off. Preselecting follows the filter: if the filter isn't part of your perks center, the page opens as normal. Switch the filter on in Customize your perks center first.

note

The category has to have perks in it. A category with no active perk in your collection can't be preselected — it won't appear in your collection's list in step 1. If a campaign link stops filtering, check that the category still holds perks.

Worked example: three campaigns, one page

One general rewards page, embedded once. The container sets no category, so anyone arriving from the member portal sees everything:

<!doctype html>
<html>
  <head>
    <title>Member rewards</title>
    <link rel="stylesheet" href="https://www.paylode.com/paylodePerkIframe.css" />
  </head>
  <body>
    <h1>Your rewards</h1>
    <div
      id="paylode-iframe-container"
      data-slug="example-rewards"
      data-utm_source="member-portal"
    ></div>
    <script src="https://www.paylode.com/paylodePerkIframe.js"></script>
  </body>
</html>

The campaigns then point at that same page and each lands somewhere different:

Where the link lives	Link you send	Customer lands on
Member portal nav	`https://www.example.com/rewards/`	Everything
Spring dining email	`https://www.example.com/rewards/?category=food-drink`	Food & Drink
New-year wellness email	`https://www.example.com/rewards/?category=health-wellness`	Health & Wellness

One page to build, brand, and protect; three arrival experiences — and in all three the customer can still reach every other category from the tags.

Had you instead wanted every visitor to start on Health & Wellness regardless of how they arrived, you'd drop data-category="health-wellness" onto the container and send plain links.

One thing to watch: data-utm_source sits on the container, so all three still report as member-portal traffic. Add ?utm_* to the campaign links themselves to tell them apart — see cmeta for perk pages.

Perk Pages overview — what the product does and how this page fits it.
Embed a perks page — where data-category lives.
Use a hosted perks page — where ?category= lives.
Customize your perks center — turning the category filter on, and the rest of the page's sections.
Localize your perks — the same attribute-or-parameter pattern, for language.

Two ways to set it​

How it works​

Before you begin​

Steps​

1. Look up your category slugs​

2. Same category for everyone: set it on the container​

3. Different category per link: put it on the address​

4. (Optional) Preselect more than one​

Verify​

Troubleshooting​

Worked example: three campaigns, one page​

Related​