Customizing the white-labeled site interface

Who can do it: Service provider

Where: Wialon Platform Studio

You can customize the look of your white-labeled site using the Options sidebar on the Sites page. The Preview pane in the center allows you to see what the selected colors will look like in the interface.

To define the color palette used in your site interface:

1. Navigate to the Colors tab.
2. Toggle the switch Site theme to on.
3. Use the Light mode or Dark mode toggle to switch the preview and configure colors for specific viewing environments.
4. In the Primary color section, define your main brand color. You can select a different shade for Light mode (for example, dark blue) versus Dark mode (for example, light purple) to ensure visibility.
5. In the Secondary color section, set your accent color, which also allows you to choose separate light and dark mode configurations.
6. In the Preview pane, select the Components tab to see the interface elements with the selected colors.

Select the Login tab to brand the initial access point for your users and fill in the fields in the Login page section.

1. In the Site icon field, insert the link to the file intended for use as the site favicon or app icon.
2. In the Site logo field, insert the link to your main logo. This will replace the default logo shown in the preview center.
3. In the Site Background Image field, insert the link to a custom image to serve as the backdrop for the login screen.
4. In the Site Form Position field, use the dropdown menu to adjust the alignment of the login box to ensure it doesn’t obscure parts of your background image.

The Preview area displays a mock-up of the Login page and Components, allowing you to verify that your logo, colors, and layout work well together.