Customize branding

Set the branding for your OTT Apps.


👍

This is a beta offering. You can request access to this beta feature through your JWP Account Manager.

By using this documentation, you are agreeing to abide by the terms of the JWP Beta Program Agreement.


On an Branding tab of an app config, you can adjust the appearance of the app including the logo, display name, and accent colors.

22622262

Branding tab

The following sections explain how to customize these aspects of an app's appearance.



Add a logo

You can brand your OTT Apps with a logo. The logo renders in the following locations for the following platforms:

  • Desktop & TV: Top left
  • Mobile: Center

Use the following steps to add a logo and display name to your apps:

  1. From the Apps page, click the name of the app config. The settings for the app config appear.
  2. On the Branding tab in the Logo URL field, enter the URL for the logo.
  3. Under App Display Name, enter the title of the website. The JW OTT webapp will update the <title> tag with this value when the site loads. If not value is entered, My OTT Application will be used as the title.
  4. Click Save.


Set brand colors


Use the following steps to customize the colors of the app:

  1. From the Apps page, click the name of the app config. The settings for the app config appear.
  2. On the Branding tab under Accent Colors, click in the textbox for a location. Each location is explained in the table below.
Accent Color LocationDescription
BackgroundUsed for the app background

Dark, muted colors work best to make the images and text stand out. The color must be defined with a hex value.

Default: solid black (#000000)
HighlightSeparates the navigation from the rest of the screen

The color must be defined with a hex value. Omitting this color makes the menu transparent.
Header BackgroundUsed for buttons, user focus, progress bars, and other call out items

This is typically a bright color reflected in your brand. The color must be defined with a hex value.

  1. Enter the HEX color code. The color swatch changes to the HEX color.
  2. Click Save.


💡

If you do not know the HEX code for a color, you can use the color picker to select a color.

  1. Click the color swatch. The color picker appears.
  2. Move the square slider to change the main color.
  3. Move the circle to adjust the shade of the color.
  4. Click Select.