Branding
You can customize the Unblu on-premises product UI to fit your company’s corporate design by adding your own logos instead of the default Unblu logos. In the configuration property com.unblu.ui.branding.externalBrandResourcesUrl, add a URL that points to an unencrypted ZIP file containing the following files in the root of the archive:
-
favicon.ico
-
logo.png
-
logo_icon.png
-
logo_inverse.png
-
logo_pwa_192.png
-
logo_pwa_512.png
-
logo_pwa_vector.svg
-
product_logo_icon.png
-
call-dial-in-avatar.png
-
call-video-background-replacement.png
If one of the files is missing, the Unblu defaults are used.
To reference a local file, use the file://
prefix. You can add authentication credentials like so: https://username:password@your.domain/path/to/zip/brand.zip
Make sure the temporary directory configured in your servlet container points to a folder that’s accessible by the application since the unzipped files are stored there. The relevant Java environment variable is java.io.tmpdir
.
Check the server startup log if one of the files doesn’t behave as expected.
-
Favicon
This file is used as the favicon in the browser. It’s typically displayed on the page’s tab and in the bookmarks.
-
File name:
favicon
-
File extension:
.ico
-
Max size: 100 KB
-
Default:
-
-
Logo
The logo image is displayed on the login, the loading, and the error page.
-
File name:
logo
-
File extension:
.png
-
Max size: 500 KB
-
Min width: 50 px
-
Max width: 300 px
-
Min height: 50 px
-
Max height: 144 px
-
Default:
-
-
Logo icon
The logo icon is displayed on the right side of the agent tab bar (top bar in the Agent Desk). The logo icon is also used for web notifications (notifications displayed by the browser).
-
File name:
logo_icon
-
File extension:
.png
-
Max size: 100 KB
-
Min width: 46 px
-
Max width: 96 px
-
Min height: 46 px
-
Max height: 46 px
-
Default:
-
-
Inverse logo
The inverse logo is displayed at the top of the navigation menu and any other location where the logo appears on a dark background (usually the brand background color).
-
File name:
logo_inverse
-
File extension:
.png
-
Max size: 500 KB
-
Min width: 50 px
-
Max width: 300 px
-
Min height: 50 px
-
Max height: 144 px
-
Default:
-
-
Progressive web app logos
The progressive web app logos are used if you install the Agent Desk as a progressive web app (PWA).
-
Progressive web app logo, 192x192 px
-
File name:
logo_pwa_192
-
File extension:
.png
-
Max size: N/A
-
Min width: 192 px
-
Max width: 192 px
-
Min height: 192 px
-
Max height: 192 px
-
Default:
-
-
Progressive web app logo 512x512 px
-
File name:
logo_pwa_512
-
File extension:
.png
-
Max size: N/A
-
Min width: 512 px
-
Max width: 512 px
-
Min height: 512 px
-
Max height: 512 px
-
-
Progressive web app logo (SVG format)
-
File name:
logo_pwa_vector
-
File extension:
.svg
-
Max size: 500 KB
-
Min width: N/A
-
Max width: N/A
-
Min height: N/A
-
Max height: N/A
-
-
-
Product logo icon
The product logo icon is used for web notifications and other places where you need the Unblu logo as an icon.
-
File name:
product_logo_icon
-
File extension:
.png
-
Max size: 100 KB
-
Min width: 46 px
-
Max width: 96 px
-
Min height: 46 px
-
Max height: 46 px
-
Default:
-
-
Call dial-in avatar
The call dial-in avatar is used for participants who have dialed in to a call with a normal phone.
-
File name:
call-dial-in-avatar
-
File extension:
.png
-
Max size: 500 KB
-
Min width: 48 px
-
Max width: 500 px
-
Min height: 48 px
-
Max height: 500 px
-
Default:
-
-
Video call background replacement
The video call background replacement image serves as the background replacement in video calls if the com.unblu.conversation.call.background.replacementImageSource is set to
BRANDING_RESOURCES
.-
File name:
call-video-background-replacement
-
File extension:
.png
-
Max size: 1000 KB
-
Min width: 400 px
-
Max width: 1920 px
-
Min height: 600 px
-
Max height: 1200 px
-