Brand Management in Tools

1. Introduction

The Brand section in AppCMS allows you to manage the visual identity of your platform across various devices and platforms, including web, mobile apps, and OTT. This guide will help you navigate and utilize the different features available in this section.

2. Prerequisites

Before accessing the Brand section, ensure you meet the following requirements:

• Access to the Tools interface.

• Ensure devices/platforms for the client are selected under the Device section.

3. Configuring Platform-Specific Settings

Customize settings for specific platforms or apply default settings across all platforms.

Ensure Device Selection:

• Make sure you have selected the devices/platforms for the client under the Devices section.

  

NOTE:

In the Configuring Platform-Specific Settings section, you’ll find an Auto Refresh toggle. This toggle allows for automatic updates to be displayed across platforms without manual refreshing.

• Turn On the Auto Refresh toggle if you want platform changes to appear instantly for end users as updates are made.

• Turn Off the Auto Refresh toggle if you prefer to review and finalize all changes before, they are visible to users.

4. Accessing the Brand Section

Learn how to log in to the Tools interface and navigate to the Brand section in AppCMS.

Log in to Tools:

1. Open your web browser and navigate to the Tools login page.

2. Enter the desired credentials and log in.

   

Navigate to Tools:

1. From the dashboard, click on the AppCMS option.

2. Select Brand Section: Click on the Brand section in the AppCMS menu.

   

5. Branding Overview

The Brand section in AppCMS consists of three main sub-sections that allow you to manage your platform's visual identity effectively. These sub-sections are:

1. Theme

2. Logos & Icons

3. Version History

1. Theme

The Theme sub-section enables you to customize the overall look and feel of your platform. You can choose from predefined themes or create a Custom Theme that reflects your brand's identity.

• Available Themes:

  • Sky Theme

  • Fire Theme

  • Custom Theme

2. Logos & Icons

The Logos & Icons sub-section provides options to upload and manage various logos and icons used across your platform. This includes logos for desktop and mobile views, favicons, and icons for notifications.

Example:

• Upload Options:

  • Desktop Logo: Upload a high-resolution logo for desktop viewing.

  • Mobile Logo: Ensure your mobile logo is optimized for smaller screens.

  • Favicon: Upload a small icon that appears in browser tabs.

3. Version History

The Version History sub-section allows you to track and manage changes made to your branding settings. You can view previously published versions, making it easy to revert to earlier configurations if needed.

Example:

• Version Details:

  • Published At: 15 Oct 2024

  • Published By: John Dev

  • Action Taken: Updated primary colors for the Call-to-Action buttons.

6. Themes Overview

AppCMS provides three themes:

1. Sky Theme: A fresh blue aesthetic.

2. Fire Theme: A vibrant red and orange palette.

3. Custom Theme (currently in use): Tailored branding as per the platform's needs.

NOTE:

When using the Custom Theme, you can tailor your platform's branding to meet specific needs. This flexibility allows you to customize colors, fonts, and other visual elements to align with your unique brand identity.

Settings for Web, Apps, and OTT

• Use Default Toggle:

  • If this toggle is turned ON, all settings (colors, fonts, etc.) will be identical across web, mobile apps, and OTT platforms.

  • If you wish to customize the settings for mobile apps and OTT separately from the web, turn the Use Default toggle OFF. This will allow you to manually adjust all settings for both Apps and OTT according to your preferences.

7. Meta Data

Meta Data settings control how content details are displayed to users, such as publish dates, authorship, and hover states.

• Display Duration: Toggle to show or hide the duration for which content is displayed.

• Display Publish Date: Toggle to show or hide the date when the content was published.

• Display Author: Toggle to show or hide the author of the content.

• Display Hover State: Toggle to enable or disable hover effects on content elements.

  

8. Player Settings

Player settings customize the appearance of the video player on your platform, including the color and style of the progress bar.

• Progress Bar Background Color: Set the background color of the progress bar (e.g., white).

• Progress Bar Color: Set the color of the progress indicator (e.g., yellow).

  

9. Tray Glow

Customize the glow effect on trays to enhance visual appeal.

• Tray Glow Toggle: Enable or disable the glow effect on trays.

• Tray Glow Color: Choose the color for the glow effect (e.g., yellow).

  

10. Font Family

Choose the typography for your platform’s text to maintain brand consistency and readability.

• Font Family Options: Select the font family for text elements, such as Cabin or Titillium Web.

  

11. General Settings

Customize the overall appearance of your platform by setting default colors for various elements like backgrounds, text, links, and shadows.

• Background: Set the main background color (e.g., black).

• Text: Choose the default text color (e.g., white).

• Link: Set the color for hyperlinks (e.g., yellow).

• Link Hover: Choose the hover color for links (e.g., red).

• Page Title: Set the color for the main page title (e.g., white).

• Block Title: Set the color for block titles (e.g., white).

• Box Shadow: Choose the color for box shadows (e.g., grey).

• Page Skeleton Color: Set the background color for page skeletons (e.g., grey).

• Banner Background Color: Set the background color for banners (e.g., white).

  

12. Call-to-Action (CTA) Settings

Define the appearance of primary and secondary CTA buttons on your platform to guide users towards important actions.

• Primary CTA: Customize the main action button with colors (e.g., yellow background, black text).

• Primary Hover: Set hover styles for the primary CTA (e.g., yellow background, white text).

• Secondary CTA: Customize the secondary action button (e.g., black background, yellow text).

• Secondary Hover: Define hover styles for the secondary CTA (e.g., grey background, white text).

  

13. Navigation

Personalize the colors for your navigation bar, including background, links, and hover styles, to enhance user experience and consistency.

• Background: Set the background color for the navigation bar (e.g., black).

• Link: Customize link colors (e.g., yellow background, yellow text).

• Link Hover: Set hover styles for navigation links (e.g., red background, white text).

• Link Active: Define styles for active links (e.g., yellow background, yellow text).

• Dropdown Link: Set the background and text colors for dropdown links (e.g., black background, white text).

• Dropdown Link Hover: Define hover styles for dropdown links (e.g., white background).

• Dropdown Link Active: Set styles for active dropdown links (e.g., black background, maroon text).

  

14. Footer

Customize the footer area of your platform to match the overall branding and provide a consistent user experience.

• Background Color: Set the footer background color (e.g., black).

• Text Color: Choose the text color for footer elements (e.g., white).

• Text Links: Set the color for links in the footer (e.g., grey).

• Link Hover: Define hover color for footer links (e.g., white).

• Link Active: Set the color for active footer links (e.g., yellow).

  

15. Text Box

Text boxes are customizable fields where users can input data. You can adjust their appearance for regular use, hover states, and error conditions.

• Default Text: Set the background color for default text boxes (e.g., white).

• Text Box Hover: Define the hover state for text boxes (e.g., white).

• Text Box Error: Set the background color for error states in text boxes (e.g., yellow).

  

16. Event States

Customize the color coding for live, upcoming, default, and past events to make it easy for users to identify the event status.

• Live: Set the color for live events (e.g., blue).

• Pre: Define the color for upcoming events (e.g., yellow).

• Default: Set the default color for events (e.g., black).

• Post: Define the color for past events (e.g., black).

• Live Text Color: Set the text color for live events (e.g., black).

• Pre Text Color: Define text color for pre-events (e.g., black).

• Default Text Color: Set the default text color (e.g., grey).

• Post Text Color: Define text color for post-events (e.g., grey).

• Losing Team Color: Set the color for losing team indicators (e.g., grey).

  

17. Error Page

Customize the background and gradient colors for error pages to provide a visually distinct experience when users encounter issues.

• Background Color: Set the background color for error pages (e.g., black).

• Gradient Color: Choose a gradient color for error backgrounds (e.g., grey).

  

18. Monetization CTA

Monetization CTA settings allow you to define the look of call-to-action buttons related to subscription or payment options.

• Primary CTA: Set styles for the primary monetization call-to-action (e.g., yellow background, black text).

• Primary Hover: Define hover styles for the primary monetization CTA (e.g., yellow background, white text).

• Secondary CTA: Customize the secondary monetization CTA (e.g., grey background, grey text).

• Secondary Hover: Set hover styles for secondary CTAs (e.g., grey background, white text).

• More Options CTA: Define styles for additional options CTA (e.g., black background, white text).

• More Options Hover: Set hover styles for more options (e.g., grey background, white text).

  

• Banner Colors

  The Banner Color section allows you to define the appearance of various banners that are displayed on your web, app, or OTT platforms.

  • Error Color: Used for banners that indicate an error or issue (e.g., failed actions, invalid inputs, or technical problems) (e.g., White).

  • Success Color: Used for banners that confirm successful actions (e.g., successful form submissions or saved settings) (e.g., White).

  

19. Logos & Icons

Control the appearance of banners used to communicate important messages, such as errors or successes, across your platform.

Procedure:

• Click +SELECT AND UPLOAD to upload relevant media for each platform

  

• Desktop Logo: Upload logo for desktop view.

• Mobile Logo: Upload logo for mobile view.

• Desktop Loader: Set a loading graphic for desktop.

• Mobile Loader: Set a loading graphic for mobile.

• Placeholder Poster: Upload a placeholder poster with a specific background color.

• Placeholder Cover: Upload a cover image with a specific background color.

• Placeholder 1X1: Upload a 1x1 aspect ratio placeholder with a specific background color.

• Favicon: Upload the small icon displayed in browser tabs.

  

• Mobile App Icon: Set the app icon for mobile applications.

• Notification Icon: Upload the icon used in push notifications.

• OTT App Icon: Define the icon for Over-the-Top (OTT) platforms.

• Mobile Splash Screen: Upload the splash screen for mobile applications.

• Mobile Splash Screen Video: Upload a video for the mobile splash screen.

• OTT Splash Screen Video: Upload a video for the OTT splash screen.

  

• AppleTV Top Shelf: Upload images for AppleTV's top shelf display.

• No Internet Connection Graphic: Design an image for no internet connection scenarios.

• Monetization Badge: Visual indicator that highlights premium content options on your platform.

• Transparent Loader: Upload a transparent loader graphic for ongoing processes.

  

20. Version History

Access and review the history of published versions in the Brand section.

1. Click on the Version History Section:

   • Under the Brand section, select the Version History tab.

2. View History Details:

   • You can see a list of published versions with details such as:

     • Published At: Date and time of publication.

     • Published By: User who published the version.

     • Action: Actions taken during publication.

     

21. Saving Your Work

Finalizing Your Changes

1. Click Save: After making changes in any section, always remember to click the Save button.

2. Confirmation: A confirmation message will appear indicating that your changes have been saved successfully.

Tips and Best Practices

• Consistency: Ensure that your branding elements are consistent across all platforms to maintain a unified brand identity.

• High-Quality Assets: Use high-resolution images and logos to ensure clarity and professionalism.

• Preview Changes: Always preview your changes before finalizing to ensure that they appear as expected.

• Regular Updates: Keep your branding elements up to date to reflect any changes in your brand’s identity.

Troubleshooting Common Issues

🔰 Issue: Changes Not Saving: Ensure you have a stable internet connection and try refreshing the page.

🔰 Issue: Incorrect Display of Logos: Check the file format and resolution of uploaded logos.

🔰 Issue: Color Changes Not Appearing: Clear your browser cache or refresh the page to see updated styles.

User Roles and Permissions

• Admin Roles: Administrators have full access to all branding features and settings.

• Editor Roles: Editors can make changes but may have limited access to sensitive settings.

• Viewer Roles: Viewers can only see branding configurations without the ability to make changes.

22. Glossary Table

23. Contact Support

If you encounter any challenges or have questions:

• Email: techsupport@viewlift.com

• Phone (US): +1-800-859-0420

• Phone (UK): +44-203-014-8921

• Support Hours:

  • B2C: Monday to Friday

  • B2B: 24/7