Branding & Customization

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

👍

Example Pack

You can download a branding example pack from here. This will show you how to format your branding pack for a quick response from us.

Custom Domain Name

BioT allows your environment to have its own domain name.
Simply provide us with the full URLs for the three portals:

• Console
• Manufacturer Portal
• Organization Portal

BioT will then provide you with precise instructions on how to configure your DNS servers to point to the correct locations.

Custom Logo

You can supply us a your custom logo.
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 in a file named logo.svg

Favicon

You can set a custom icon that will appear in the Browser tabs, Bookmarks bar and Search results.

Favicon Guidelines

The Favicon should be supplied in 2 files:

• 32 x 32 px PNG format image named favicon-32.png.
• 256 x 256 px PNG format image named favicon-256.png.

For best results use transparency for image background.

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":{
        "darkest":"#color",
        "dark":"#color",
        "medium":"#color",
        "light":"#color",
        "lighter":"#color",
        "lightest":"#color"
     },
     "secondary":{
        "darkest":"#color",
        "dark":"#color",
        "medium":"#color",
        "light":"#color",
        "lightest":"#color"
     },
     "error":{
        "darkest":"#color",
        "dark":"#color",
        "medium":"#color",
        "light":"#color",
        "lighter":"#color",
        "lightest":"#color"
     },
     "grayScale":{
        "darkest":"#color",
        "darker3":"#color",
        "darker2":"#color",
        "darker":"#color",
        "dark":"#color",
        "medium":"#color",
        "light":"#color",
        "lighter":"#color",
        "lightest":"#color"
     },
     "alert":{
        "critical":"#color",
        "major":"#color",
        "minor":"#color",
        "neutral":"#color"
     }
  }
}

Each color code is optional and specifying it will override the system default

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

Fonts

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

{
  "typography": {
      "fontFamily": string,     // Use web safe fonts
      "h1": TypographySettings, // Placeholder for 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.