GithubNPMOfficial Website
Integration Steps
API Reference

Frontend Integration

Suggest Edits

Scrimmage Rewards can be integrated into your web application in two primary ways:

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) - default
  • es (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 about 1 month ago