All Collections
User Guides
Application Branding: How to customize your Ubidots user interface
Application Branding: How to customize your Ubidots user interface

Learn how to customize your IoT application's logo, colors, login portal, and other visual components.

S
Written by Sergio M
Updated over a week ago

Ubidots not only provides a robust ingestion back end, easy-to-use monitoring tools, and thorough user-management capabilities, but also the ability to brand the end-user Application with your company’s look and feel, hence, completing the cycle of Ubidots as an IoT enablement platform.

An Ubidots-powered application login screen and App can look like this:

Requirements

1. White and Gray Label Branding

Ubidots powered applications come in 2 flavors: White label and gray label. While the first option allows complete branding, that is, look and feel customization, proprietary domain and email sender address, the second allows only for look and feel changes, and it preserves Ubidots subdomain with the structure {APP_NAME}.iot.ubidots.com as well as the default email sender notifications@ubidots.com.

All Ubidots licenses include 1 application with full white-label capabilities included. Also, users can create additional applications (for more information about additional apps and when you might need one, see section 5 of this article) and choose whether or not they’re white or gray-labeled. The price for additional apps is as follows:

  • Additional white-labeled app: $149/mo

  • Additional gray-labeled app: $49/mo

2. Brand the End-user Application

To access the branding section of each of your Ubidots applications, go to the Apps section, located at the the main navigation bar.

Once in the Apps’ module, follow the steps below:

Step 1: Click the pencil button, located at the right side of the container of the app you want to modify.

Step 2: Go to the “Branding” subsection, located in the left panel.

NOTE: The branding section includes previews, placed at the bottom, that will change as new elements are customized.

Step 3: Update the branding elements based on your company’s look and feel, and then save the changes.

  • Loader logo: Accepted formats are GIF and SVG.

  • Favicon: Recommended resolution is 48x48 or proportion 1:1. Accepted formats are JPEG or PNG.

  • Header logo: Recommended resolution is 630x132 or proportion 1:6. Accepted formats are JPEG or PNG.

  • Login screen logo: Recommended resolution is 630x126 or proportion 1:6. Accepted formats are JPEG or PNG. Additionally, this logo will be used in the invitation emails sent to your users.

  • Background image: Recommended resolution is 1920x1080 or proportion 16:9.

Step 4: Update the color palette to customize the application colors and then save the changes.

3. Access Branded Application

There are 2 options to access your Ubidots’ powered application in order to check how it actually looks beyond the Previews at the bottom.

  • From the Apps section: Click the “Go to App” button. It will redirect your app's dashboard page.

  • From the Users section: Click the “login as user” button. It will automatically sign in to this user’s account in the App.

Did this answer your question?