@livelike/embet NPM

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

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]
    }
  }
}

@everything-registry/sub-chunk-553

18 days ago

2 months ago

2 months ago

2 months ago

2 months ago