Frontend Integration
Scrimmage Rewards can be integrated into your web application in two primary ways:
- Using the Scrimmage Rewards Widget
- Using the Scrimmage Rewards API
Scrimmage Rewards Widget
The Scrimmage Rewards Widget is an HTML single-page application that can be embedded into your application. Scrimmage handles the hosting, certificates, and security for the widget. You can customize the widget to align with your application's aesthetics.
For detailed information on configuring the widget via query parameters, refer to the Widget Customization section.
Integration through the widget is the simplest way to start using Scrimmage Rewards.
For detailed integration instructions based on your platform, refer to the following links:
If your platform is not listed, please visit Other Integrations for guidance on how to incorporate Scrimmage Rewards into your application.
Scrimmage Rewards API
The Scrimmage Rewards API is a RESTful API that offers a flexible approach for integrating Scrimmage Rewards into your application, compared to the widget. This method requires more effort to set up and maintain. You will need to update the API client whenever new versions are released. However, it provides greater control over the integration and allows for extensive customization to meet your specific needs.
API Endpoints
For detailed information on the available endpoints, refer to the Player API section of the API Reference.
Commonly used endpoints include:
- Player Info - Retrieves player's information, including balance, level, properties, and more.
- Player Quests - Retrieves a list of quests available to the player.
- Levels - Retrieves a list of levels in the loyalty program.
Real-Time Updates
For real-time updates on player status, you can use a WebSocket connection. We implement this using the socket.io library.
Here is the WebSocket URL:
wss://<your-api-url>.apps.scrimmage.co/nbc/events/socket.io
To authenticate the WebSocket connection, send the field bearer
with the value the user access token in the auth option.
UI Toolkit
For seamless integration and a consistent look and feel, we recommend using the @scrimmage/ui-toolkit. The UI Toolkit provides a set of functions to help you integrate the Scrimmage Rewards widget or API into your application.
Widget Customization
Customize your widget by configuring global settings and personalizing the widget's views through query parameters.
Global Configurations
Token
Parameter name - token
The token is essential for the widget's functionality, as it is used to authenticate the user. It must be included in the URL for the widget to operate properly.
Language
Parameter name - lang
The lang parameter allows you to select the language for the widget's display. All available language options are:
en
(English) - defaultes
(Spanish)pt
(Portuguese)ar
(Arabic)uk
(Ukrainian)
Color mode
Parameter name - color-mode
The color mode for the widget. If no mode is specified, the widget will first apply a theme that is available. If multiple themes are available, the mode will be chosen based on the user’s device preferences.
Options:
light
dark
auto
- follow the user’s device preferences (default)
Full Loyalty Program
Layout
Parameter name - layout
The layout parameter lets you customize the tabs displayed within the widget. The widget comes with three default tabs: Level, Quests, and Redeem. By default, these tabs appear in the order of level
, quests
, and redeem
.
You can choose to display only certain tabs or rearrange their order by modifying the layout parameter in the URL. For example, to display only the Redeem and Quests tabs in that order, use the following URL:
https://<org-id>.apps.scrimmage.co?token=<your-token>&lang=es&layout=redeem,quests
Quests
Parameter name - maxQuestsToShow
You can limit the number of quests displayed in the Quests tab using maxQuestsToShow
param.
Achievements
No specific configuration is required.
Updated 18 days ago