Service Provider Branding Guide - Webex Calling Help · CAP SP BRANDING GUIDE V2.0 BROADSOFT, INC....

Calling Admin Portal

Service Provider Branding Guide

Document Version: 2.1

CAP SP BRANDING GUIDE V2.0

BROADSOFT, INC. PAGE 1

Cisco ® Guide

Notification

The BroadSoft BroadCloud has been renamed to Cisco BroadCloud. Beginning in September 2018, you will begin to see the Cisco name and company logo, along with the new product name on the software, documentation, and packaging. During this transition process, you may see both BroadSoft and Cisco brands and former product names. These products meet the same high standards and quality that both BroadSoft and Cisco are known for in the industry.

Copyright Notice

Copyright© 2019 Cisco Systems, Inc. All rights reserved.

Trademarks

Any product names mentioned in this document may be trademarks or registered trademarks of Cisco Systems, Inc. or their respective companies and are hereby acknowledged.

This document is printed in the United States of America.



Document Revision History

Example

Release Version Reason for Change Date Author

draft Created document. October 11, 2016 Jay Cleveland

1.0 Initial document for launch December 1, 2016 Jay Cleveland

1.1 Updates:

• Section 1 – Corrected incomplete sentence.

• Section 5.1 – added logo sizing information and updated table

January 31, 2017 Jay Cleveland

1.2 Updated Sections 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8, 5.9, 5.10, 5.13 & 5.14

February 7, 2017 Jay Cleveland

1.3 Moved Dashboard Hover items from Section 5.5 to 5.10

February 11, 2017 Jay Cleveland

R22 2.0 Updated to add Section 5 CAP Only branding changes

October 2, 2017 Jay Cleveland

R22.3 2.1 Updated Section 5 to include REP 2.0 branding elements

July 23, 2018 Jay Cleveland



Table of Contents

1 Feature Prerequisites/Restrictions .............................................................................................4

2 Log into the Service Provider Portal ..........................................................................................4

3 Go to the Profile Tab .....................................................................................................................4

4 Branding Elements ........................................................................................................................4

4.1 Branding Element List .................................................................................................................. 5

4.1 Logo for CAP ................................................................................................................................ 5

4.2 Header background color ............................................................................................................. 6

4.3 Header Font Color ........................................................................................................................ 6

4.4 d) Background color used behind the tabs ................................................................................. 6

4.5 f) Active tab text color ................................................................................................................... 7

4.6 Active tab background color ......................................................................................................... 7

4.7 g) Inactive tab background color .................................................................................................. 8

4.8 h) Inactive tab text color ............................................................................................................ 10

4.9 i) Color used for special text ...................................................................................................... 12

4.10 Color used for hover links.......................................................................................................... 12

4.11 Color used for regular text ......................................................................................................... 12

4.12 Color used for frame borders .................................................................................................... 14

4.13 Default Button Color .................................................................................................................. 14

4.14 Agent Required Button Text Color ............................................................................................ 14

5 CAP Only Branding Elements .................................................................................................. 15

5.1 Assignments Button Color ........................................................................................................ 15

5.2 Radio buttons/Check boxes ...................................................................................................... 16

5.3 Hover background ..................................................................................................................... 17

5.4 Note/Error Background ............................................................................................................. 17

5.5 Dashboard Minutes and Analytics Current Period Graph Lines ............................................. 17

5.6 Dashboard Calls Graph Line .................................................................................................... 18

5.7 Dashboard Inventory Section ................................................................................................... 18

6 REP 2.0 Branding Elements ..................................................................................................... 18



Overview

The Calling Admin Portal utilizes the same branding elements are accessed via the Service Provider Portal. These branding elements are mapped to specific items in the Calling Admin Portal which are described below.

1 Feature Prerequisites/Restrictions

• The Service Provider Account has been established in Rialto

• Hex color codes are known for the elements to be branded.

2 Log into the Service Provider Portal

After entering the Service Provider URL in a browser, the Login window appears.

Figure 1 – SP Portal Sign In Screen

Enter the User name and Password. These credentials are sent via email when the Service Provider Administrators are set up through the order process or in the Portal.

3 Go to the Profile Tab

• Under the My Account section of the left hand menus click on “Profile”

• In the Edit Personal Information Section, click the Set up Branding Content button

4 Branding Elements

These following elements are available in the SP Portal Branding page for CAP (formerly known as My Account). Here is a quick overview of the elements that apply to the Calling



Admin Portal. Below that is a list of applicable elements and details showing where they apply in CAP.

4.1 Branding Element List

My Account Branding Element Applicable to CAP?

a) Logo for CAP Yes

b) Image for the application name No

c) Header background color Yes

Header Font Color Yes

d) Background color used behind the tabs Yes

e) Header background image (optional) No

f) Active tab text color Yes

Active tab background color Yes

g) Inactive tab background color Yes

h) Inactive tab text color Yes

i) Color used for special text Yes

Color used for unvisited links No

Color used for visited links No

Color used for hover links Yes

Color used for regular text Yes

j) Color used for frame borders Yes

Color used for the fonts in frames No

Default Button Color Yes

Agent Required Button Background Color No

Agent Required Button Text Color Yes

4.1 Logo for CAP

Used for the logo in the upper left corner of the page in the persistent top banner. The logo image should have an aspect ratio of 4:1. The recommended size of this image is 200px wide by 50px high, images of this size will not be scaled. Scaling larger or smaller images to fit can cause them to distort and appear unsightly.



4.2 Header background color

The color used for the background of the persistent top banner bar.

4.3 Header Font Color

The color of the text and symbol labels including the breadcrumb trail in the persistent top banner bar.

4.4 d) Background color used behind the tabs

• Selected tab in Assignments>List by User>Edit

• Menu hover color in Assignments>List by User>Edit



4.5 f) Active tab text color

• Color of the icon and text of the selected tab in the main left hand navigation

• Color of the icon and text of the selected tab in the left hand menu in the Assignments>List by User>Edit screen

4.6 Active tab background color

• In Orders, the color of the “View Order” link

• In Assignments>List by User>Edit the active item in the menu



4.7 g) Inactive tab background color

• Base background color for left side navigation bar

• Services default Icon and name color

• Services On/Off button color

• Text color in the Services configuration screens of the More Options links

• In Assignments>List by User>Edit, the default background color of the left hand menu

• In Assignments> List by Number>Edit or Assignment, the color of the selected Menu item and the text color of the unselected menu items in the pop-up



• In the Dashboard tab, the border color of the Analytics and inventory sections

• In Reports, the color of the border of the reports criteria selection

• In Reports, the hover color of the items in the criteria drop down lists

• In Notes, the color of the border outline of the notes section

• In Site Profile, the color of the border outline



• Assignments>List by User>Edit active menu item

• Assignments>List by Number “Assign” button dropdown

4.8 h) Inactive tab text color

• In the Left Hand Navigation, the color of the unselected Text and Icons



• Left Hand Navigation Hover item text and Icon color

• Text/Number/Icon color of the Dashboard Analytics section

• Text/Number/Icon color of the Dashboard Inventory section



4.9 i) Color used for special text

• In the Assignments tab, the color of the heading text for the unselected tabs

• Color of the items in the lists which can be edited within the list. In addition to the color, these editable items are shown with a dashed line underneath

• In the Profile tab, the color of the heading text for the unselected tabs

4.10 Color used for hover links

• In the Analytics tab, when hovering over an unselected report type, this is the text/icon color

• Dashboard Banner selected item background color and hover text color for list item

4.11 Color used for regular text

This setting provides the text color for items in the Settings, Analytics and Notes and Profile tabs





4.12 Color used for frame borders

• In Assignments, the frame outline color of the selected tab

• In Profile, the frame outline color of the selected tab

4.13 Default Button Color

These items use the Default Button Color

• The color of the background for the Sign In button

• The color of the border around the Services icons

4.14 Agent Required Button Text Color

• The color of the “Accept T&Cs”



link in the Orders list

5 CAP Only Branding Elements

These items are used only for the Calling Admin Portal.

5.1 Assignments Button Color

The default color is mapped from

This color is used for these elements in the Assignments tab.

• Add

• Add Device

• Apply

• Assign

• Calls

• Cancel

• Configure

• Create Admin

• Delete

• Discard

• Edit

• Export

• Finish button background

• Grid/List button

Selected background

Unselected icon and outline



• Import

• Line States

• List/Type/Top 10 selection

Selected background

Unselected icon and outline

• Manage bulk Changes

• Minutes

• Next buttons background

• Options

• Pagination

• Save button background

• Station Inventory

• Search button background

• Search – add criteria

• Unassign

• Upload

5.2 Radio buttons/Check boxes

• Radio Buttons

• Check boxes



5.3 Hover background

• Hover background of left hand navigations bar

5.4 Note/Error Background

• Background color of the Service Assurance message and Emergency location message

5.5 Dashboard Minutes and Analytics Current Period Graph Lines

• Dashboard Minutes graph line color

• Analytics Current Period Graph Line color



5.6 Dashboard Calls Graph Line

• Dashboard Calls graph line color

5.7 Dashboard Inventory Section

• Dashboard Inventory Background color

6 REP 2.0 Branding Elements

These elements override the branding colors used the elements below for the legacy My Account/My Site and legacy REP portals.

Name

Primary Background Color



Navigation Menu Background Color

Sets the background color of the navigation menu.



Navigation Menu Selection Color

Sets the color that shows at 70 percent opacity, when a user selects an item on Navigation menu and hovers over an item in Enterprise Portal.



Header Background Color

Sets the foreground color of Header in CAP.



Header Foreground Color

Sets the color to button background, tile headers and outlines, stepper ovals, checkboxes, text links, input field labels and lines (in focus) in Enterprise Portal.

Primary Button Background Color

Sets the color to text or icon appearing on primary button, tile headers, stepper ovals in the Quick Start and Orders and Inventory of the Dashboard tab.

Date post:	24-Jun-2020
Category:	Documents
Upload:	others
View:	3 times
Download:	0 times

Service Provider Branding Guide - Webex Calling Help · CAP SP BRANDING GUIDE V2.0 BROADSOFT, INC....

Documents