How do I add branding to my BUI console?
Environment:
Browser User Interface (BUI), Custom Configurations
Issue:
Applying your own branding to the BUI.
Resolution:
There are five areas that can be customized and each of them requires that a custom config be created and populated with a link to a hosted image. Here's how you can do it:
1. Select or create images for the favicon, brand icon, and background image.
- Note that you may need to consider the contrast between the brand logo, background image, and the four-color preferences that users can select in Browser UI.
- It is possible to define a brand logo and background that displays when light preferences (vanilla, light blue) are selected and a different image to display when dark preferences (dark blue, dark grey) are selected.
- We recommend that the favicon and brand logo images have a transparent background for best results in many cases.
- The background image can be semi-transparent or opaque and can fill the entire background area (like the example below) or just part of the background. An opaque background image will nearly entirely override the 4 color preferences that users can select, with the exception of the Quick Search and some of the header icons.
- The dimensions of the background image should be proportionate to a laptop monitor (16:9).
2. Upload each of the images to a hosted location.
- One approach is to upload the image files to the Customer Portal directory under /cp/customer/assets/themes/ (for example) and reference the images from that location. Here's a KB article that explains how to make a WebDav connection to Customer Portal using CyberDuck.
- Caution: do not use the WebDav path; replace dav/cp/customer with euf
3. Create the text-based configuration settings with the exact names (keys) in the description below.
- Note that each configuration setting can be interface-specific or sitewide.
- As an alternative to creating each of these configuration settings manually, you can import one of the attached .zip files using Element Manager. The custom configuration settings will be created with blank values that you can populate with the image URLs.
| Favicon |
CUSTOM_CFG_BUI_FAVICON_URL |
|
Browser Tab Title |
CUSTOM_CFG_BUI_BROWSER_TAB_TEXT |
|
Brand Logo (light preferences) |
CUSTOM_CFG_BUI_LOGO_IMAGE_URL |
|
Brand Logo (dark preferences) |
CUSTOM_CFG_BUI_LOGO_ALT_IMAGE_URL |
|
Brand Logo Label (this is an existing message base) |
SERVICE_CLOUD_LBL |
|
Background (light preferences) |
CUSTOM_CFG_BUI_BACKGROUND_IMAGE_URL |
|
Background (dark preferences) |
CUSTOM_CFG_BUI_BACKGROUND_ALT_IMAGE_URL |
4. Logout and login to Browser UI to see the changes!
Additional notes and considerations:
- Images will be scaled to fit the allotted space.
- URLs that cannot be resolved will display broken image icons.
- Out of the box Oracle branding will be displayed where these configuration settings do not exist or are blank.
- File size of hosted images should be minimized in order to maximize display performance.
