Components Overview
The Loyalty Tiles SDK provides a set of flexible components for building dynamic loyalty program interfaces. These components are organized in a hierarchical structure for maximum flexibility and reusability.
Component Architecture
Container Components
<WllSdkProvider>- Root provider component that manages SDK configuration and state<Group>- Container for organizing multiple sections<Section>- Container for organizing related tiles and banners
Display Components
Tiles
Tiles are the building blocks of your loyalty interface. Each tile type serves a specific purpose and can be configured to match your needs.
<BadgeTile>- Display user achievements and badges<PointsTile>- Show point balances and point-related information<TierTile>- Present tier status and progression<RewardTile>- Showcase individual rewards<RewardCategoryTile>- Display reward categories<ContentTile>- Present custom content<BannerTile>- Feature promotional content or announcements
Basic Example
jsx
import { WllSdkProvider, Group, Section, PointsTile } from '@wlloyalty/wll-react-sdk'
function App() {
return (
<WllSdkProvider config={sdkConfig}>
<Group id="32697712-8dc0-4717-9775-e1f3502acc48">
<Section>
<PointsTile />
</Section>
</Group>
</WllSdkProvider>
)
}