Page, Offer, and Add-On
This page describes all of the page, offer and add-on methods available within the Limio SDK.
The useCampaign
hook is part of the Limio SDK and is used to retrieve metadata and commerce objects associated with a Page (formerly called a Campaign). Pages in Limio act as containers for Offers and optional Add-Ons, and can store custom attributes that drive content, logic, or display behaviour on pricing, product, or checkout pages.
This hook allows developers to dynamically access:
Page details, such as the name and custom attributes
Offers, which are subscription products associated with the page
Add-ons, such as optional products or upsells tied to an offer
Tags, used for tracking how users enter a page
These capabilities allow developers to build rich, dynamic storefronts that respond to user context and page configuration. This page provides examples of each method available through useCampaign
, along with sample data and common use cases.
useCampaign
- Retrieving details of the current page
useCampaign
- Retrieving details of the current pageYou may store details about your page (previously called campaign) in custom attributes or if you just want to retrieve the name of the page, the const campaign
returns all of these to be used for any case you need.
import { useCampaign } from "@limio/sdk"
const Component = () => {
const { campaign } = useCampaign()
return (
<section>
<h1>{campaign.name}</h1>
// This can be one you configure
<p>{campaign.attributes.custom_attribute}</p>
</section>
)
}
Example page:
{
"name": "Dummy Page",
"path": "/offers/Dummy Page",
"attributes": { // All configured page/campaign attributes will be returned here
"meta_title__limio": "Dummy Shop",
"push_to_checkout__limio": true
}
}
useCampaign
- Retrieving offers of the current page
useCampaign
- Retrieving offers of the current pageThe offers
return an array of all offers stored under the current page. These are the items that should be used when adding items to the basket with the addToBasket
method.
import React from "react"
import { useCampaign } from "@limio/sdk"
const Offers = () => {
const { offers } = useCampaign()
return (
<section>
{offers.map(offer => (
<div>
<h1>{offer.name}</h1>
<button onClick={() => {
// Actually adding items to the basket will be covered later on.
console.log("Adding to basket")
}}>
Add to basket
</button>
</div>
))}
</section>
)
}
Example offer:
[
{
"id": "d5b8eca9273dba0b971c33d56c3f81c65b6aaa87.97d170e1550eee4afc0af065b78cda302a97674c",
"name": "Dummy Offer",
"path": "/offers/Dummy Page/Dummy Offer",
"parent_path": "/offers/Dummy Page",
"type": "item",
"data": {
"name": "Dummy Offer",
"tags": ["/tags/dummytag"],
"segments": [],
"attributes": {
// All configured offer attributes will be returned
"price__limio": [
{
"delay_interval_type": "months",
"subscription_start_day": "",
"name": "charge_1",
"repeat_interval": 1,
"attributes": [],
"label": "Charge 1",
"trigger": "order_date",
"repeat_interval_type": "months",
"repeat_count": 1,
"type": "recurring",
"value": "10.00",
"currencyCode": "GBP"
}
],
"display_description__limio": "Dummy offer description",
"display_price__limio": "£10 a month forever",
"detailed_display_price__limio": "Pay £10 upfront for your first month, then £10.00 a month thereafter.",
"offer_features__limio": "<h3>Dummy offer subscription benefits:</h3><ul><li>Unlimited web access</li><li>Smartphone and tablet apps</li><li>Save articles and share them with friends and family</li><li>Comment on articles and join conversations with our journalists</li><li>Newsletters exclusively for subscribers</li><li>Video exclusives</li></ul>",
"cta_text__limio": "Subscribe Now",
"payment_types__limio": ["zuora_card"],
"display_name__limio": "Dummy Offer",
"group__limio": "Dummy Group",
"checkout__limio": {
"checkout_type": "standard"
},
"autoRenew__limio": true
},
"attachments": [
{
"path": "/assets/Images/Devices",
"name": "Devices",
"type": "image/png",
"url": "/public/f60388d3-28ca-4a5c-ba38-51cf04eb93bd/responsive.png"
}
],
"products": [
{
"name": "Dummy Product",
"path": "/products/Dummy Product",
"attributes": {
"product_code__limio": "SKU-00000001"
},
"type": "item"
}
],
"type": "item",
"familyName": "offers"
}
}
]
useCampaign
- Retrieving add-ons of the current page
useCampaign
- Retrieving add-ons of the current pageIf you need to get the add-ons attached to a page, the const addOns
returns an array with the add-ons objects:
import React from "react"
import { useCampaign } from "@limio/sdk"
const Component = () => {
const { addOns } = useCampaign()
return (
<section>
{addOns.map(addOn => (
<div>
<h1>{addOn.name}</h1>
<button onClick={() => {
// Actually adding items to the basket will be covered later on.
console.log("Adding add-on to basket")
}}>
Add to basket
</button>
</div>
))}
</section>
)
}
Example of an add-on:
[
{
"path": "/add_ons/demo-add-on",
"name": "Dummy Add On",
"type": "item",
"data": {
"name": "Dummy Add On",
"record_type": "add_on",
"baseTemplate": "/config/templates/add_ons/default",
"attributes": {
"label__limio": [
"discount"
],
"display_name__limio": "demo",
"price__limio": [
{
"name": "charge_1",
"label": "Charge 1",
"value": "10.00",
"currencyCode": "GBP",
"type": "recurring",
"trigger": "subscription_start",
"repeat_interval": 1,
"repeat_interval_type": "month",
"repeat_count": 2,
"delay_interval": null,
"attributes": [],
"term_setting": "termed",
"delay_interval_type": "month"
}
]
},
"team": "users",
"user": "[email protected]",
"path": "/add_ons/demo-add-on",
"created": "2024-08-13T15:46:23+00:00",
"modified": "2024-08-13T15:46:23+00:00"
},
"id": "b83ed9f688d6abc0e460d161428a0e208079e7ea",
"version": "9cd75000a73f0011b62fe323ed083e7bc37cd907"
}
]
useCampaign
- Retrieving the tag the user entered the page with
useCampaign
- Retrieving the tag the user entered the page withIf you need to get the tag that a user entered the page with (useful for tracking), the const tag
returns that as a string:
import React from "react"
import { useCampaign } from "@limio/sdk"
const Component = () => {
const { tag } = useCampaign()
console.log(tag)
// expected output: /tags/dummytag
return <p>{tag}</p>
}
useCampaign
- Retrieving group values of the current offers on the page
useCampaign
- Retrieving group values of the current offers on the pageGroup values are configured at the offer level. For example, you might want to group offers by values such as monthly, yearly, or a custom value that you configure.

import React from "react"
import { useCampaign } from "@limio/sdk"
const Component = () => {
const { groupValues } = useCampaign()
console.log(groupValues.map(groupValue => {groupValue.lable})
// expected output: ["Monthly", "Yearly"]
return groupValues
}
Example of group values:
[
{
"label": "Monthly",
"id": "monthly"
},
{
"label": "Yearly",
"id": "yearly"
}
]
groupOffers
– Grouping offers by label
groupOffers
– Grouping offers by labelThe groupOffers
function is used to organise a list of offers into groups based on their group__limio
attribute. This function is particularly useful when you need to display offers categorised by their group in a component, such as a Switch component.
Function Signature
function groupOffers(offers: Array<LimioObject<Offer>> = [], groupLabels: Group[] = []): Array<GroupInfo>
Parameters
offers
(optional): An array ofLimioObject<Offer>
objects to be grouped.Type:
Array<LimioObject<Offer>>
Default:
[]
groupLabels
(optional): An array ofGroup
objects that define the possible groups and their labels.Type:
Array<{ id: string, label: string, thumbnail?: string }>
Default:
[]
LimioObject Structure
The LimioObject<Offer>
type represents an offer in the Limio system. It has the following structure:
type LimioObject<Offer> = {
data: {
attributes: {
group__limio?: string;
display_name__limio?: string;
// ... other attributes specific to offers
};
// ... other data properties
};
// ... other top-level properties
};
Key points about LimioObject<Offer>
:
The
group__limio
attribute is used for grouping offers.The
display_name__limio
attribute typically contains the display name of the offer.There may be other attributes and properties specific to offers that are not used by the
groupOffers
function.
Return Value
The function returns an array of GroupInfo
objects, where each object contains:
groupId
: The identifier of the group (string)id
: The same asgroupId
(string)label
: The display label for the group (string)offers
: An array ofLimioObject<Offer>
objects belonging to that groupthumbnail
: The thumbnail URL for the group (string, optional)
Usage Example
import { groupOffers, useCampaign } from '@limio/sdk';
// Define your group labels
const groupLabels = [
{ id: 'monthly', label: 'Monthly Subscriptions', thumbnail: 'monthly.png' },
{ id: 'yearly', label: 'Annual Subscriptions', thumbnail: 'yearly.png' }
];
const { offers } = useCampaign()
// Group the offers
const groupedOffers = groupOffers(offers, groupLabels);
console.log(groupedOffers);
// Output:
// [
// {
// groupId: 'monthly',
// id: 'monthly',
// label: 'Monthly Subscriptions',
// offers: [
// // offer data simplified for this example
// { data: { attributes: { group__limio: 'monthly', display_name__limio: 'Basic Monthly' } } },
// { data: { attributes: { group__limio: 'monthly', display_name__limio: 'Pro Monthly' } } }
// ],
// thumbnail: 'monthly.png'
// },
// {
// groupId: 'yearly',
// id: 'yearly',
// label: 'Annual Subscriptions',
// offers: [
// // offer data simplified for this example
// { data: { attributes: { group__limio: 'yearly', display_name__limio: 'Premium Annual' } } }
// ],
// thumbnail: 'yearly.png'
// },
// {
// groupId: 'weekly',
// id: 'weekly',
// label: 'Other',
// offers: [
// // offer data simplified for this example
// { data: { attributes: { group__limio: 'weekly', display_name__limio: 'Weekly Special' } } }
// ],
// thumbnail: ''
// },
// {
// groupId: 'other',
// id: 'other',
// label: 'Other',
// offers: [
// // offer data simplified for this example
// { data: { attributes: { display_name__limio: 'Special Offer' } } }
// ],
// thumbnail: ''
// }
// ]
Behaviour Notes
Offers are grouped based on their
group__limio
attribute.If an offer doesn't have a
group__limio
attribute, it's grouped under "other".For each unique group (including "other"), a
GroupInfo
object is created.If a matching
groupLabel
is found:The
label
is set to the matching group's label.The
thumbnail
is set to the matching group's thumbnail (or an empty string if not provided).
If no matching
groupLabel
is found:The
label
is set to "Other".The
thumbnail
is set to an empty string.
The
groupId
andid
are always set to the original group value from the offer.If the
offers
array is empty, an empty array is returned.If the
groupLabels
array is empty, all groups will have the label "Other" and an empty thumbnail.
Last updated
Was this helpful?