@livelike/embet v1.0.0
embet sdk
Usage
The emBET SDK can be installed with npm or Yarn.
npm install @livelike/embet
Initialize the SDK with the embet.init function. An application Client ID is required to be passed as the clientId property of the function's object argument.
import embet from "@livelike/embet";
import { clientId } from './your-config'
embet.init({ clientId }).then(profile => {
// This will generate a new profile
console.log("Initialized")
});UMD Builds
You can also use the UMD build if you would like to use the emBET SDK in the browser without a module context:
<html>
<body>
<script src="https://unpkg.com/@livelike/embet/embet.umd.js"></script>
<embet-widgets programid="<Program Id>"></embet-widgets>
<script>
embet.init({ clientId: "<Client Id>" })
.then(profile => {
console.log('Profile: ', profile)
})
</script>
</body>
</html>Profiles
Profiles are used to collect widget interactions, rewards, points, and other features inside a single identity. Profiles can be provisioned arbitrarily and can be used to extend your existing user account records. These profiles can either be local, allowing you to create anonymous experiences, or persisted in your user databases, allowing you to create profiles that persist across a user's devices.
When a profile is first created it is given a unique ID and a credential called an Access Token. It is also automatically given a nickname if one is not provided. Profiles will persist for as long as its credentials are stored and passed back to the SDKs & APIs.
The user profile can get fetched and updated at any time.
Profile initialization
When a user loads the application for the first time, a profile will be generated and returned in the init method. You can use this to save the access_token property to your existing user's profile. Loading this profile will allow you to pass the access_token property to the init function, which will initialize the application with that user profile, allowing for persistent profiles across devices.
fetchSavedUserProfile()
.then(savedUserProfile => {
const savedAccessToken = savedUserProfile.access_token;
embet.init({
clientId: '<Client Id>',
accessToken: savedAccessToken
})
})Fetching Profile
The profile can be fetched and updated at any time with the getUserProfile method. This method is passed an accessToken and returns the profile object.
embet.getUserProfile({accessToken: "<Access token>"}).then(profile => console.log(profile))Updating Profile
The profile's nickname or custom data can be updated with the updateUserProfile method. This method is passed the profile's accessToken, and optionally an options object containing either a nickname property, a custom_data property, or both. This method returns the updated profile object.
embet.updateUserProfile({
accessToken: "<Access token>",
options: {
nickname: "<New Nickname>",
custom_data: JSON.stringify({ custom: 'data' })
}
})
.then(profile => console.log(profile))Widget setup
To add widgets to the page, the embet-widgets element can be used.
The embet-widgets element has optional programid and customid attributes.
<embet-widgets programid="<Program Id>"></embet-widgets><embet-widgets customid="my-custom-id"></embet-widgets>Widgets
The various interactive elements that are delivered to audiences to engage with are called widgets. Widgets can be created and published manually by producers using the Producer Suite, and can also be automated through the REST API.
Every widget is created as part of a Program. A program associates a sequence of widgets with some content. Every program has a Program ID that uniquely identifies the program.
To add widgets to the page, first the embet-widgets element can be used.
The embet-widgets element must have either a programid or customid attribute.
<embet-widgets programid="<Program Id>"></embet-widgets><embet-widgets customid="my-custom-id"></embet-widgets>View more details about displaying widgets,
Widget UI
The three widget types are the live-moneyline, live-spread, and live-total widgets. These are signified by the widget payload's custom_data type property type: 'LIVE SPREAD' | 'LIVE MONEYLINE' | 'LIVE TOTAL'.
View all of the widget properties.
Widget Properties Type Definition
program_id: string;
question: string;
options: Array<{
image_url: string;
description: string;
}>;
custom_data: {
placeBetUrl: string;
type: 'LIVE SPREAD' | 'LIVE MONEYLINE' | 'LIVE TOTAL';
widgetVariation: 'bar' | 'square' | 'inline';
sponsors: [{ logo_url: string; name: string }];
betDetails: [{ bet: string; description: string }];
customCss: string;
customStyles: string;
widgetHeight: string | number;
widgetWidthPercentage: string | number;
parentContainer: string;
disableResizing: boolean;
theme: {
widgets: {
prediction: { };
};
};
};Widget Properties
Creating or displaying a widget requires two properties, options and question, and accepts a third, optional property customData.
options
The options property is an array of objects containing the properties image_url and description.
question
The question property is a string that is a question, or the main header of the widget.
customData
Widgets also accept an optional customData property. This customData object contains properties that are used to customize the widget.
type
Required Defines the type of widget. Can be LIVE SPREAD, LIVE MONEYLINE, or LIVE TOTAL
customCss
Allows the addition of arbitrary CSS to the widgets.
The customCss is a string that is a url or src to a CSS file. It is the href attribute in a .
customStyles
Allows the addition of arbitrary CSS to the widgets.
The customStyles property is a string of CSS. For example
customStyles = `
.bet-button {
background: purple;
}
.embet-widget livelike-title {
color: orange;
}
`widgetHeight
This property allows setting the overall widget height.
widgetHeight = '400px'widgetHeight = '50%'widgetVariation
The widgetVariation property can be used control the layout of the widgets. The three options are bar, square, and inline.
parentContainer
The parentContainer optional property is the selector of an element that is a parent of a widget. It is used to calculate styles for resizing. If parentContainer is not provided, document.body will be used instead.
parentContainer: "#parent-container-id"
parentContainer: ".parent-container-class"
parentFullscreenWidth
The `parentFullscreenWidth optional property is the string or number that signifies that width value in pixels of the widget's parent container when at its full width.
parentFullscreenWidth: "1200"
widgetWidthPercentage
The widgetWidthPercentage is the optional property that is a percentage decimal that works with theparentContainer` property.
For example
widgetWidthPercentage: "0.5"
will set the widget's width at 50% of the parent container.
If not provided, the default value is 0.3.
disableResizing
Set disableResizing optional property to true to prevent the widget from resizing. Default is false.
betDetails
An array of objects with the properties bet and description.
The description properties must match with your options array description properties.
For example, if your options and betDetails properties are
options: [
{
description: "Astros",
image_url: "https://example.com/img.png",
},
{
image_url: "https://example.com/img.png",
description: "Dodgers",
},
]
betDetails: [
{ bet: "+120", description: "Astros" },
{ bet: "-140", description: "Dodgers" },
]The bet: +120 will match the options object with description: Astros
sponsors
An array of objects with the properties logo_url and name. The logo_url is a url or src string of an image to display as a sponsor.
placeBetUrl
A url or src string that will be the href property of the place bet button's link.
Displaying Widgets
Published Widgets
Widgets that have previously been published can be displayed at any time using the displayPublishedWidget method that is a property on the embet-widgets element. It accepts an object argument with the property id, which is the id of the widget.
This method fetches the published widget's data and appends the widget element to the embet-widgets element.
const embetWidgets = document.querySelector("embet-widgets");
embetWidgets.displayPublishedWidget({id: "<Widget Id>"})The widget must be published to use displayPublishedWidgets. The widget id can be found in the published widget's payload.
Preview Widgets
Widgets previews can be displayed using the displayPreviewWidget method. It takes an object argument with two properties.
The first property is widgetPayload, which is an object containing the same properties outlined in Widget Properties.
The second property is target, which is an HTMLElement that the preview widget will be appended to. This can be any HTMLElement.
Preview widgets are not widgets that have not been published.
<embet-widgets programid="<Program Id"></embet-widgets>
<script>
const widgetPayload = {
question: "Will LA win by 3 or more runs?",
options: [
{
description: "Astros",
image_url: "https://example.com/astros.png"
},
{
description: "Dodgers",
image_url: "https://example.com/dodgers.png"
},
],
customData: {
place_bet_url: "#",
type: "LIVE SPREAD",
widgetVariation: "inline",
theme: { },
sponsors: [
{
logo_url: "https://example.com/logo.png",
name: "Logo Name",
},
],
betDetails: [
{ bet: "+120", description: "Astros" },
{ bet: "-140", description: "Dodgers" },
]
}
}
const target = document.querySelector("embet-widgets");
embet.displayPreviewWidget({widgetPayload, target})
</script>Example widget payloads
Green Theme Moneyline
{
options: [
{
description: "Astros",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/65c28c9a-e1fe-437c-add2-3d48be4a56e2.png",
},
{
description: "Dodgers",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/85632f6e-55c7-4704-b5b8-59da18bc3c57.png",
},
],
question: "Who wins tonight?",
program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
custom_data: JSON.stringify({
placeBetUrl: "#",
type: "LIVE MONEYLINE",
widgetVariation: "bar",
parentContainer: ".parent-container-class",
widgetWidthPercentage: "0.5",
sponsors: [
{
logo_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/0464f0fd-3745-4b17-936c-1e26765652c9.png",
name: "LL logo",
},
],
theme: {
widgets: {
prediction: {
header: {
background: { format: "fill", color: "#027658bf" },
},
body: {
background: { format: "fill", color: "#027658bf" },
},
footer: {
background: { format: "fill", color: "#027658bf" },
},
timer: {
background: { format: "fill", color: "#fbd703" },
},
unselectedOption: {
borderColor: "#fbd703",
},
betButton: {
background: { format: "fill", color: "#fbd703" },
borderColor: "#fbd703",
fontColor: "#000000",
},
},
},
},
betDetails: [
{ bet: "+120", description: "Astros" },
{ bet: "-140", description: "Dodgers" },
],
}),
}Blue Theme Moneyline
{
options: [
{
description: "Astros",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/65c28c9a-e1fe-437c-add2-3d48be4a56e2.png",
},
{
description: "Dodgers",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/85632f6e-55c7-4704-b5b8-59da18bc3c57.png",
},
],
question: "Who wins tonight?",
program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
custom_data: JSON.stringify({
placeBetUrl: "#",
type: "LIVE MONEYLINE",
widgetVariation: "square",
sponsors: [
{
logo_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/0464f0fd-3745-4b17-936c-1e26765652c9.png",
name: "LL logo",
},
],
theme: {
widgets: {
prediction: {
header: {
background: { format: "fill", color: "#2b4364bf" },
},
body: {
background: { format: "fill", color: "#2b4364bf" },
},
footer: {
background: { format: "fill", color: "#2b4364bf" },
},
timer: {
background: { format: "fill", color: "#1493ff" },
},
unselectedOption: {
borderColor: "#1493ff",
},
betButton: {
background: { format: "fill", color: "#1493ff" },
borderColor: "#1493ff",
fontColor: "#ffffff",
},
},
},
},
betDetails: [
{ bet: "+120", description: "Astros" },
{ bet: "-140", description: "Dodgers" },
],
}),
}Green Theme Spread
options: [
{
description: "Astros",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/65c28c9a-e1fe-437c-add2-3d48be4a56e2.png",
},
{
description: "Dodgers",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/85632f6e-55c7-4704-b5b8-59da18bc3c57.png",
},
],
question: "Will LA win by 3 or more runs?",
program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
custom_data: JSON.stringify({
placeBetUrl: "#",
type: "LIVE SPREAD",
sponsors: [
{
logo_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/0464f0fd-3745-4b17-936c-1e26765652c9.png",
name: "LL logo",
},
],
theme: {
widgets: {
prediction: {
header: {
background: { format: "fill", color: "#027658bf" },
},
body: {
background: { format: "fill", color: "#027658bf" },
},
footer: {
background: { format: "fill", color: "#027658bf" },
},
timer: {
background: { format: "fill", color: "#fbd703" },
},
unselectedOption: {
borderColor: "#fbd703",
},
betButton: {
background: { format: "fill", color: "#fbd703" },
borderColor: "#fbd703",
fontColor: "#000000",
},
},
},
},
betDetails: [
{ bet: "+2.5(-110)", description: "Astros" },
{ bet: "-2.5(-110)", description: "Dodgers" },
],
}),
}Blue Theme Spread
{
options: [
{
description: "Astros",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/65c28c9a-e1fe-437c-add2-3d48be4a56e2.png",
},
{
description: "Dodgers",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/85632f6e-55c7-4704-b5b8-59da18bc3c57.png",
},
],
question: "Will LA win by 3 or more runs?",
program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
custom_data: JSON.stringify({
placeBetUrl: "#",
type: "LIVE SPREAD",
sponsors: [
{
logo_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/0464f0fd-3745-4b17-936c-1e26765652c9.png",
name: "LL logo",
},
],
theme: {
widgets: {
prediction: {
header: {
background: { format: "fill", color: "#2b4364bf" },
},
body: {
background: { format: "fill", color: "#2b4364bf" },
},
footer: {
background: { format: "fill", color: "#2b4364bf" },
},
timer: {
background: { format: "fill", color: "#1493ff" },
},
unselectedOption: {
borderColor: "#1493ff",
},
betButton: {
background: { format: "fill", color: "#1493ff" },
borderColor: "#1493ff",
fontColor: "#ffffff",
},
},
},
},
betDetails: [
{ bet: "+2.5(-110)", description: "Astros" },
{ bet: "-2.5(-110)", description: "Dodgers" },
],
}),
}Green Theme Total
{
options: [
{
description: "Astros",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/65c28c9a-e1fe-437c-add2-3d48be4a56e2.png",
},
{
description: "Dodgers",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/85632f6e-55c7-4704-b5b8-59da18bc3c57.png",
},
],
question: "Will the total score be o/u 5.5?",
program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
custom_data: JSON.stringify({
placeBetUrl: "#",
type: "LIVE TOTAL",
sponsors: [
{
logo_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/0464f0fd-3745-4b17-936c-1e26765652c9.png",
name: "LL logo",
},
],
theme: {
widgets: {
prediction: {
header: {
background: { format: "fill", color: "#027658bf" },
},
body: {
background: { format: "fill", color: "#027658bf" },
},
footer: {
background: { format: "fill", color: "#027658bf" },
},
timer: {
background: { format: "fill", color: "#fbd703" },
},
unselectedOption: {
borderColor: "#fbd703",
},
betButton: {
background: { format: "fill", color: "#fbd703" },
borderColor: "#fbd703",
fontColor: "#000000",
},
},
},
},
betDetails: [
{ bet: "o5.5(-110)", description: "Astros" },
{ bet: "u5.5(-110)", description: "Dodgers" },
],
}),
}Blue Theme Total
{
options: [
{
description: "Astros",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/65c28c9a-e1fe-437c-add2-3d48be4a56e2.png",
},
{
description: "Dodgers",
image_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/85632f6e-55c7-4704-b5b8-59da18bc3c57.png",
},
],
question: "Will the total score be o/u 5.5?",
program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
custom_data: JSON.stringify({
placeBetUrl: "#",
type: "LIVE TOTAL",
sponsors: [
{
logo_url:
"https://cf-blast-storage-qa.livelikecdn.com/assets/0464f0fd-3745-4b17-936c-1e26765652c9.png",
name: "LL logo",
},
],
theme: {
widgets: {
prediction: {
header: {
background: { format: "fill", color: "#2b4364bf" },
},
body: {
background: { format: "fill", color: "#2b4364bf" },
},
footer: {
background: { format: "fill", color: "#2b4364bf" },
},
timer: {
background: { format: "fill", color: "#1493ff" },
},
unselectedOption: {
borderColor: "#1493ff",
},
betButton: {
background: { format: "fill", color: "#1493ff" },
borderColor: "#1493ff",
fontColor: "#ffffff",
},
},
},
},
betDetails: [
{ bet: "o5.5(-110)", description: "Astros" },
{ bet: "u5.5(-110)", description: "Dodgers" },
],
}),
}Theming
Usage
The Theme system allows you to customize the widget UI. This includes common UI properties such as background colors and border colors, corner radii, and text size and fonts.
Usage
The widget's theme can be updated by calling the 'embet.applyThememethod at any time. This method takes an object as an argument, with the requiredwidgets` object as a property.
All widgets extend the Prediction widget kind as a base, so the widget's object property is required to contain thepredictions` object.
The example below shows what is required. Any properties added within the prediction object are optional.
embet.applyTheme({
widgets: {
prediction: {
}
}
})Example showing a change to the header's padding and background color, and the footer's background color.
embet.applyTheme({
widgets: {
prediction: {
header: {
padding: '18px',
background: '#ffffff'
}
footer: {
background: "#000000"
}
}
}
})Theme Reference
Below is an example of all of the theme properties available, with example values. Each property inside of the prediction object matches a different part of the widget. For example, the header property effects the widget's header, and the selectedOption matches the widget's options that are selected.
{
"prediction": {
"root": {
"borderColor": "287757",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"colors": ["F8EDC0", "1D43A7"],
"direction": 0,
"format": "uniformGradient"
},
"fontColor": "00CCFA",
"margin": [0, 0, 0, 0]
},
"body": {
"borderColor": "1CA407",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "1632AA",
"format": "fill"
},
"fontColor": "9A696F",
"margin": [0, 0, 0, 0]
},
"correctOption": {
"borderColor": "BDE882",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "BC21ED",
"format": "fill"
},
"fontColor": "829942",
"margin": [0, 0, 0, 0]
},
"correctOptionBar": {
"borderColor": "69297E",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "62AA35",
"format": "fill"
},
"fontColor": "20A23C",
"margin": [0, 0, 0, 0]
},
"correctOptionDescription": {
"borderColor": "DFA7B1",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "73F934",
"format": "fill"
},
"fontColor": "7FC95E",
"margin": [0, 0, 0, 0]
},
"correctOptionImage": {
"borderColor": "584AA3",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "C30EC4",
"format": "fill"
},
"fontColor": "8C4D7E",
"margin": [0, 0, 0, 0]
},
"correctOptionPercentage": {
"borderColor": "04AF64",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "5C82B6",
"format": "fill"
},
"fontColor": "B00B0C",
"margin": [0, 0, 0, 0]
},
"header": {
"borderColor": "7BE99E",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 2,
"background": {
"colors": ["C020BF", "2BA732"],
"direction": 0,
"format": "uniformGradient"
},
"fontColor": "D6410D",
"margin": [0, 0, 0, 0]
},
"incorrectOption": {
"borderColor": "D64AA4",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "79BE9F",
"format": "fill"
},
"fontColor": "8AC931",
"margin": [0, 0, 0, 0]
},
"incorrectOptionBar": {
"borderColor": "D93E34",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "6F48A7",
"format": "fill"
},
"fontColor": "6A5D08",
"margin": [0, 0, 0, 0]
},
"incorrectOptionDescription": {
"borderColor": "414286",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "5AE9FB",
"format": "fill"
},
"fontColor": "74F9FE",
"margin": [0, 0, 0, 0]
},
"incorrectOptionImage": {
"borderColor": "DB8A86",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "A1E6BC",
"format": "fill"
},
"fontColor": "39E808",
"margin": [0, 0, 0, 0]
},
"incorrectOptionPercentage": {
"borderColor": "86298F",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "BAE8B2",
"format": "fill"
},
"fontColor": "CB25B2",
"margin": [0, 0, 0, 0]
},
"selectedOption": {
"borderColor": "968D93",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "8074D9",
"format": "fill"
},
"fontColor": "93CA94",
"margin": [0, 0, 0, 0]
},
"selectedOptionBar": {
"borderColor": "013CBF",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"colors": ["3123ae", "c86dd7"],
"direction": 0,
"format": "uniformGradient",
"color": "CAEF83"
},
"fontColor": "5E1395",
"margin": [0, 0, 0, 0]
},
"selectedOptionDescription": {
"borderColor": "B56329",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "76AACE",
"format": "fill"
},
"fontColor": "CE0D1F",
"margin": [0, 0, 0, 0]
},
"selectedOptionImage": {
"borderColor": "58617B",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "FD6AFD",
"format": "fill"
},
"fontColor": "94C516",
"margin": [0, 0, 0, 0]
},
"selectedOptionPercentage": {
"borderColor": "58E9B1",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "C6918F",
"format": "fill"
},
"fontColor": "FB36E5",
"margin": [0, 0, 0, 0]
},
"timer": {
"borderColor": "E329EC",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "CA39E4",
"format": "fill"
},
"fontColor": "DBFDCE",
"margin": [0, 0, 0, 0]
},
"title": {
"borderColor": "32235C",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "459C6F",
"format": "fill"
},
"fontColor": "22CD04",
"margin": [0, 0, 0, 0]
},
"unselectedOption": {
"borderColor": "C8C7CF",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "BEF961",
"format": "fill"
},
"fontColor": "89F8D5",
"margin": [0, 0, 0, 0]
},
"unselectedOptionBar": {
"borderColor": "C77264",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "BE6D4B",
"format": "fill"
},
"fontColor": "495988",
"margin": [0, 0, 0, 0]
},
"unselectedOptionDescription": {
"borderColor": "CA8C64",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "BE367D",
"format": "fill"
},
"fontColor": "056338",
"margin": [0, 0, 0, 0]
},
"unselectedOptionImage": {
"borderColor": "02CA6F",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "42B9A9",
"format": "fill"
},
"fontColor": "5C6643",
"margin": [0, 0, 0, 0]
},
"unselectedOptionPercentage": {
"borderColor": "DA7C75",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "5F7344",
"format": "fill"
},
"fontColor": "40B38D",
"margin": [0, 0, 0, 0]
},
"footer": {
"borderColor": "B89423",
"fontWeight": "normal",
"borderRadius": [0, 0, 0, 0],
"padding": [0, 0, 0, 0],
"fontFamily": ["sans-serif"],
"fontSize": 12,
"borderWidth": 0,
"background": {
"color": "EABAC2",
"format": "fill"
},
"fontColor": "AEE8F8",
"margin": [0, 0, 0, 0]
}
}
}1 year ago
1 year ago
8 months ago
1 year ago
10 months ago
9 months ago
8 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago