Customize branding

Set the branding for your apps.



An app config is a content management tool that provides limited options to help you brand your apps.

1600

Branding tab

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

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

πŸ’‘

Work with your app partner representative for more branding options.



Add a logo

You can brand your apps with a logo.

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.
  4. Click Save.
  5. (Optional) Click Preview. A new browser tab opens displaying an interactive preview of the app.


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 on 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.
  3. (Optional) Click Preview. A new browser tab opens displaying an interactive preview of the app.

πŸ’‘

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.