Widgets are built using a page-based structure. A widget consists of multiple pages with multiple components on each page.

You can manage the layout of the widget under Widget > Customize.

👍

Widget Versions

After you make your changes to the widget, ensure you save your changes. These changes are recorded under Pages > Version Historyand you can revert to any earlier version if required. To view your saved changes in the widget Preview, ensure you click Publish.

Pages

Pages represent every screen within the widget. This includes the home page, the different tabs in your widget, and button destination pages, for example, an information icon which leads to a How it Works page.

Every viewable screen in the widget must be added as a page. The home page of your widget has a home icon next to it.

Each page includes the following properties:

• id: The unique identifier for the page.
• Elements: The number of elements within the page. This number automatically updates as you add components in the page
• path: The URL path used to navigate to the page, for example /homepage or /homepage/achievements.
• Title: The title of the page. For example, if the title is quests, a label is automatically created for the page title quests-page

Components

Components are the building blocks added to pages. To add components to a page, right-click the page and select New Item. The available components are grouped into four categories: Basic Components, Containers, Lists, and Sections.

Basic Components

Basic components include the following:

• Back Button: Allows users to return to a previous screen. You must specify a backpath to define the destination page. For example, a back button on a "How it Works" page would typically have a **backpath **(/homepage) leading to the home page.

• Balance Button: Displays an icon representing the total token balance for a user. The icon used is the one uploaded in the **Media and Assets **tab for tokens. A link must be provided to a destination page, such as a transactions page ( /transactions), where users can view their reward history.

• Help Button: This icon opens a How it Works page. The display text for this button is managed under the How it Works section in the Media and Assets tab.

  You can add more than one Help Button in your widget. The text for these additional pages can be added using Text components.

• Image: Embeds an image using a source URL. You can configure the source, alt text, height, and width in pixels.

• Navigation Tab: This allows you to add specific tab types: bar chart, sports, or account balance. You must provide a link to the destination page for each tab. Navigation tabs must be used within a Navigation Tab container.

• Text: Adds text content. You can set the variant to title, body, footnote, or caption.

Containers

Containers are layout components that group and arrange other elements. Use these to define how your content is structured on each page.

• HStack and VStack: HStack arranges child elements horizontally and VStack arranges them vertically. As you add elements within these containers, the count in the Elements field is updated. You can use the following alignment options to control how elements sit within the stack:
  • Flex-start: Aligns elements to the beginning of the container.
  • Center: Positions elements in the middle of the container.
  • Flex-end: Aligns elements to the end of the container.
  • Stretch: Expands elements to fill the total width or height of the container. You can use the following justify options to manage the spacing along the main axis: flex-start, center, flex-end, space-between, and space-around. You can also specify margins and the height of the container using pixels, percentages, or rem units.
• Page header: This is a container designed specifically for the top section of a page. The container remains pinned to the top of the screen. This ensures the header stays visible even when you scroll through longer pages. It uses the same alignment and justify options as the standard stacks. You can specify gaps to define the spacing in pixels between header elements.
• Navigation Tab: This container holds multiple individual navigation tab components. You must add this container to the page before you can insert any individual navigation tabs. When configuring this container, you must specify a selectedTab to determine which tab is active by default when a user views the page.

Lists and Sections

Lists automatically render items based on the data you configured in the Loyalty Hub. This includes items such as achievements, quests, polls, and redeem options.

Sections are pre-built components that bundle multiple related elements together. These are used for specific functions within the widget, such as displaying game rules or managing feedback.

When you select any List or Section components, a preview is displayed which shows how the component renders.

📘

Reward and Reward Choice options

On any page where you have configured reward rules, quests, achievements etc, this option allows you to show a pop-up where users can claim rewards. These options are typically placed in page footers.