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.
Updated 28 days ago