Branding & Customization

BioT offers a few options to brand the Manufacturer and Organization portals.

Custom Logo

You can supply us a your custom logo. The logo should be in SVG format.
The logo will be embedded in to the different portals and appear in the login screen in the upper left corner:

And after login, in the upper right corner:

📘

Logo Guidelines

The logo should be supplied in SVG format, and have minimal to no margins.

Theme File

The default BioT there file can be downloaded from here:
Default Biot Theme

You may edit this theme file to be later uploaded to your account. The following sections are available for customization:

Theme Colors

BioT allows setting up the portal colors. There are 4 basic color topics:

Palette {  
    primary: ColorShades;  
    secondary: ColorShades;  
    error: ColorShades;  
    grayScale: ColorShades;  
}

For each topic the following colors are available:

ColorShades {  
    darkest: string;  
    darker3: string;  
    darker2: string;  
    darker: string;  
    dark: string;  
    medium: string;  
    light: string;  
    lighter: string;  
    lightest: string;  
}

For alerts the following colors are defined:

alert: {
  critical: string,
  major: string,
  minor: string,
  neutral: string
}

A color is defined by a HEX color code. For example, the string #0A32E6 will produce some blue text.

Fonts

BioT allows to set custom fonts for the following UI elements:

Typography {
    fontFamily: string;
    h1: TypographySettings;
    h2: TypographySettings;
    h3: TypographySettings;
    h4: TypographySettings;
    h5: TypographySettings;
    h6: TypographySettings;
    h7: TypographySettings;
    button: {
        small: TypographySettings;
        regular: TypographySettings;
        big: TypographySettings;
    };
    link: {
        regular: TypographySettings;
    };
    body1: TypographySettings;
    body2: TypographySettings;
}

For each element the following font attributes can be customized:

TypographySettings {
    font-size: string;
    font-weight: string;
    line-height: string;
    letter-spacing: string;
}

Custom Messages

BioT allows to set custom messages in the different portals. For example the welcome message can be customized to welcome the user in to your custom organization portal:

Email Templates

BioT allows you to personalize the templates of emails that are sent from the platform. Discover the available templates here.

Understanding Email Templates

An email template is essentially an HTML file that incorporates placeholders for dynamic strings. These strings are replaced at runtime based on the recipient's locale (language and region).

Dynamic Strings: Placeholders and Locale Files

  • Placeholders: Dynamic strings are enclosed within ${my_dynamic_string}
  • Locale Files: Each locale has a corresponding file under the locale folder. These files should contain all the necessary dynamic strings translated into the specific language.

Password Restrictions

BioT allows for custom password format validation. By default the validation is for a password:

  • Minimum length of 8 characters
  • At least 1 upper case letter
  • At least 1 lower case letter
  • At least 1 digit

You can also set:

  • Number of days that a password will expire
  • Password history reuse check length

Portal Customization

To customize any of these elements please contact us and let us know what elements would you like to customize in your portal. We will update you on how to send us the materials and will apply them for you.