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:DRQuickly 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 | 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 | - | - |
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 */
}
Updated 5 months ago