Widget Customization

1 UI Customization
2 Palette
- 2.1 Light
- 2.2 Dark
3 Typography
4 Translations
- 4.1 Translation data structure

UI Customization

The Multibet Widget appearance is fully implemented in MUI, this allows us to implement easy customization using style overrides. Absolutely everything can be customized at the appearance level, for example, font sizes, the color of elements, spacing, and all that is supported by CSS.

Palette

According to MUI, the palette enables you to modify the color of the components to suit your brand. That means you can change each color of the widget to align its appearance with the website where you want to use it.

By default, we have two palettes, dark/light. Below are examples of the default structure for the widget.

Light

{
    "palette": {
        "grey": {
            "500": "#636366",
            "600": "#48484A"
        },
        "primary": {
            "main": "#0000DC",
            "light": "#18C989"
        },
        "background": {
            "paper": "#808080",
            "default": "#FFFFFF",
            "surface1": "#12121208",
            "surface2": "#12121214",
            "surface3": "#12121229",
            "surface4": "#12121252"
        },
        "text":{
          "primary": "#151B34"
        },
        "mode": "light"
    }
}

Dark

{
    "palette": {
        "grey": {
            "500": "#F2F2F5",
            "600": "#48484A"
        },
        "primary": {
            "main": "#E1FF67",
            "light": "#E1FF67"
        },
        "background": {
            "paper": "#404040",
            "default": "#151B34",
            "surface1": "#FFFFFF0A",
            "surface2": "#FFFFFF14",
            "surface3": "#FFFFFF29",
            "surface4": "#FFFFFF52"
        },
        "text":{
           "primary": "#FFFFFF"
        },
        "mode": "dark"
    }
}

Typography

According to MUI, the theme provides a set of type sizes that work well together with the layout grid. For example, the font family can be changed with the theme.typography.fontFamily property with this structure:

"typography": {
  "fontFamily": "Red-hat",
  "variantFontFamily": "KlarheitKurrent"
}

We support all the MUI fonts and also the following:

All-ProSans
Hind
KlarheitKurrent
Lato
RedHat
Roboto

Translations

Multibet product supports all languages that can be presented using UTF-8 encoding standard. The translation system allows you to provide your own custom translations for each required language, including English.
In the table below you can find files you need to translate into the languages you wish to display on your regional websites. Depending on the selected region/language, the user will be greeted with the widget using your provided translations.

Once the translation file has been provided and uploaded to Multibet Translation system, you will be able to load the Multibet widget application with the desired language using a URL parameter culture. https://gsm-widgets-uat.betstream.betgenius.com/multibet?...&culture=en-GB

After betslip creation translations for the created combination will be passed onto your platform via Updategram (TranslationSet object) so that you can display betslip for a punter in a chosen language.

Translation data structure

Do not translate placeholders, such as {Home Team}, {Away Team}, {HANDICAP}

	Translations type	Translation object (JSON)	Alternative Spreadsheet example

Translations type

Translation object (JSON)

Alternative Spreadsheet example

Widget UI configurations

Customisable per culture code, i.e. en-GB, es-ES Shared between different customers.

American Football

Fully customisable per customer level

Football

Fully customisable per customer level

Examples of translatable sections:

Markets categories (tabs)
Market names
User’s “My selection” component title
“Total odds” result disclaimer
Snackbar alerts