Flying Widget

Scrimmage Rewards Program Integration for Website using script

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.

AttributeDescriptionRequirementPossible VariantsDefault Value
data-user-tokenUser-specific token for authentication.Required--
data-partner-idIdentifier for the partner integration.Required--
data-widget-localeLocalization setting for the widget.Optionales, en, uken
data-fab-titleTitle of the Flying Button.Optional--
data-fab-placementPlacement of the button on the screen.Optionalbottom-right, bottom-left, top-right, top-leftbottom-right
data-fab-icon-urlURL of the icon to be used in the Fab.Optional-trophy icon
data-allow-analyticsToggle to allow analytics tracking.Optionaltrue, falsetrue
data-on-widget-eventCustom widget event handlerOptional--

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 */
}