Creating Reward List widgets

The reward list widget shows a configured list of rewards available in the program.

Note: Rewards are only selectable on Control Center if they are enabled. Rewards are only visible to members if they are enabled and it is within the start and end date for the designated reward.

To create a Reward List widget:

  1. In Control Center, navigate to Program > Widgets.
  2. Click Add Widget and select Reward List.
  3. Configure the details for your widget:
    • Basic Information
      • Version: Specify the version for this widget. We recommend using the latest version, which is the default.
      • Name: Specify a name for this widget.
    • Logged In Configuration
      • Reward: Select the reward that you would like to display in the reward list widget. Click Add Reward to add additional rewards.
      • Header Text (Optional): This text is displayed to the user in the header at the top of the widget.
      • Custom CSS URL (Optional): Add a link to your own hosted CSS file to style this widget as you see fit.
      • Max Height (Optional): Set a maximum height after which the content of the widget will scroll.
    • Logged Out Configuration
      • When a user is logged out, this widget:
        • Is not displayed: The widget is not displayed if the user is not logged into the rewards program.
        • Displays a sign up / log in Call to Action:
          • Headline Text: Specify the headline text to display in the Sign Up window.
          • Sub-headline Text: Specify the sub-headline text to display in the Sign Up window.
          • Background Image: Click Select Image to display an image in the background of the Sign Up window.
          • Custom CSS URL (Optional): Specify the url to your custom CSS if you want to style the Sign Up window with your custom stylesheet.
  4. Click Submit.

After creating a widget in Control Center, you can add your widget to a webpage.

Reward List (Redeeming)

Redeeming a reward is done using a modal, which can be customized using a separate CSS file.

Reward List (Filter)

The reward list widget has a hidden toggle that allows members to switch between displaying all rewards and only the rewards that they can redeem. Use the following attribute in your custom CSS to turn on the reward filter:

#reward-list #redeemFilter {
display: block;
}

Learn more

Creating widgets

Adding widgets to webpages