Flying Widget

Introduction

This guide offers detailed instructions for integrating the Scrimmage Rewards program into your website through a simple script tag. It covers everything from the initial setup and configuration of customizable attributes to a practical example of the widget's implementation, ensuring a smooth and efficient integration process.

TL:DR

Quickly integrate the Scrimmage Rewards program into your website with this simple script tag. Insert your specific user token and partner's ID where indicated.
<script
   src="https://cdn.scrimmage.co/fab-integration/stable/integration.bundle.js"
   data-user-token="<insert user's token>"
   data-partner-id="<insert partner's id>"
   defer
></script>

Configurable Attributes

Below are the attributes you can configure for the widget. Some attributes have default values and can be omitted if the default behavior is desired.

Attribute	Description	Requirement	Possible Variants	Default Value
`data-user-token`	User-specific token for authentication.	Required	-	-
`data-partner-id`	Identifier for the partner integration.	Required	-	-
`data-widget-locale`	Localization setting for the widget.	Optional	`es`, `en`, `uk`, `pt`, `ar`	`en`
`data-fab-title`	Title of the Flying Button.	Optional	-	-
`data-fab-placement`	Placement of the button on the screen.	Optional	`bottom-right`, `bottom-left`, `top-right`, `top-left`	`bottom-right`
`data-fab-icon-url`	URL of the icon to be used in the Fab.	Optional	-	trophy icon
`data-allow-analytics`	Toggle to allow analytics tracking.	Optional	`true`, `false`	`true`
`data-on-widget-event`	Custom widget event handler	Optional	-	-
`data-initial-path`	Set widget initial screen	Optional	URL with route and params like 'components/quests?amount=10'	(empty string)
`data-color-mode`	Set widget theme	Optional	`auto`, `light`, `dark`	`auto`
`data-layout`	Set how tabs in widget are arranged	Optional	`level`, `quests`, `redeem` or separated by comma	`level,quests,redeem`

Event handling

To handle custom events, utilize the data-on-widget-event attribute in the <script> tag. This attribute allows you to specify JavaScript code that will execute in response to an event. Access the data object within this code to get event-specific information.

Example usage:

data-on-widget-event="console.log('Received event data:', data)"

For a detailed structure of the data object, please refer to Widget Events Documentation.

Custom Styles

Customize the appearance of the elements within the scrimmage-integration div to align with your website's design. Use the provided CSS selectors for specific elements. Remember, these are based on their IDs, so you need to target them correctly.

/* Selector for the main container */
#scrimmage-integration {
    /* Add custom styles for the main container here */
}

/* Selector for the iframe within the widget */
#scrimmage-integration #scrimmage-widget-iframe iframe {
    /* Add custom styles for the iframe here */
}

/* Selector for the floating action button (Fab) */
#scrimmage-integration #scrimmage-fab {
    /* Add custom styles for the Fab button here */
}