Mount

First thing you need to do is mounting the widgets base structure. Be aware that you need to obtain a CLIENT_ID from our support team to be able to mount. Mounting will look like as follows…

SDW.mount({ clientId: "YOUR_CLIENT_ID", theme: { ...yourTheme }, locale: 'de' });

interface MountSettings {
    theme?: Theme;
    locale?: string;
    clientId: string;
}

interface Theme {
    primary: string;
    secondary: string;
    'background-dark': string;
    'background-lighter': string;
    'background-light': string;
    'background-content': string;
    'text-dark': string;
    text: string;
    red: string;
    blue: string;
    ct: string;
    t: string;
    dire: string;
    radiant: string;
}

Mount options

During mounting you can define the widgets basic settings.

clientId

You can obtain your client id from our support team.

theme

By default, we are delivering widgets to your page with our default theme. If you need to make widgets fit your pages theme, you can tweak colors. The following options are available and all of them are optional, meaning that you can only tweak the primary color for example. Please use our Demo page to test out your theme. All provided colors need to be hex values.

Default theme settings…

theme: {
    'primary': '#19B387',
    'secondary': '#E03030',
    'background-dark': '#14181F',
    'background-lighter': '#394560',
    'background-light': '#242C3D',
    'background-content': '#1E232E',
    'text-dark': '#99A5C2',
    'text': '#FFFFFF',
    'red': '#E03030',
    'blue': '#1580B6',
    'ct': '#5788A8',
    't': '#C19511',
    'dire': '#E03030',
    'radiant': '#82FF36',
}

locale

All widgets are fully localizeable. The default language of all widgets is English. We also provide German, Korean and Russian locallization out of the box. For more languagues, please get in touch with our support.

After mounting the widget framework you can actually start adding widgets to your page.