Help Center 2.0 - Define a visual brand settings — Helpshift Technical Support Help Center

Under visual brand settings, you can:

Configure brand identity settings for app
Configure brand color settings for app
Configure brand font settings for app

Configure brand identity settings for app

We recommend that each time you change any app-level brand identity setting, you click SAVE DRAFT on the page banner. Otherwise, you might have to repeat your work.

(Required) Set the brand name for your company, division, or product line.

HOW YOU DO IT
Under the Brand Identity heading in the options pane, enter your public brand in the Brand Name field.

EFFECT
After you enter it, your brand name appears before the word “Support” in the main navigation bar over your knowledge base articles and FAQs.

TIP: If you do not want the word “Support” to appear in the main navigation bar over your knowledge base articles and FAQs, there is an easy way to stop it from appearing automatically.
On the Branding and Customization page, when the Header tab is active, you may observe that the Web Support Portal Title field is populated by the sys.hc.title text template.
(Optional) Upload the logo for your company, division, or product line

HOW YOU DO IT
1. Under the Brand Identity heading in the options pane, on the Logo form, click UPLOAD IMAGE.
2. Browse to a suitable file.
3. Click the file to select it. Then, press Enter to begin uploading it.
  
  EFFECT
  After you upload it, your logo image appears before your brand name in the main navigation bar over your knowledge base articles and FAQs.
(Optional) Set the favicon

HOW YOU DO IT
1. Under the Brand Identity heading in the options pane, on the Favicon form, click UPLOAD IMAGE.
2. Browse to a suitable file.
3. Click the file to select it. Then, press Enter to begin uploading it.

EFFECT
The favicon loads on web browser window tabs and bookmarks.

Help Center 2.0 - Configure color settings for app

TIP: We recommend that, each time you change any app level brand color setting or value, you click SAVE DRAFT on the page banner. Otherwise, you might have to repeat your work.

(Optional) Choose color template for your app

HOW YOU DO IT
There are two ways to choose a color template
1. Create a new color template
  1. Under the Colors heading in the options pane, click the filled circle next to any Color label.A color picker opens.
  2. In the color picker, choose your preferred action color.
  3. Click anywhere outside the color picker to dismiss it.
  4. Click on Add template icon.
  5. Enter the template name in text box.
  6. Under the different colors labels in the options pane, click the filled circle next to the label.A color picker opens.
  7. In the color picker, choose your preferred color.
  8. Click anywhere outside the color picker to dismiss it.
  9. Repeat above steps to select color for different labels.
  10. Select the check box if you want this template as default.
  11. Click Save.
2. Edit a new color template
  1. Next to the Colors heading in the options pane, click Folder icon to show a template list.
  2. Click on Edit icon to create a new color template.
  3. Enter the template name in text box.
  4. Under the different colors labels in the options pane, click the filled circle next to the label.A color picker opens.
  5. In the color picker, choose your preferred color.
  6. Click anywhere outside the color picker to dismiss it.
  7. Repeat above steps to select color for different labels.
  8. Select the check box if you want this template as default.
  9. Click Save.
    
    EFFECT
    Choosing a template overwrites any prior selections that you may have made for these values:
    - Accent color
    - Action color
    - Background color
    - Secondary background color
    - Foreground color
    - Content color
      
      TIP: Table rows after this one describe the specific effects of each color setting.
(Conditional) Set the accent color for your app

HOW YOU DO IT
1. Under the Colors heading in the options pane, click the filled circle next to the Accent Color label.A color picker opens.
2. In the color picker, choose your preferred accent color.
3. Click anywhere outside the color picker to dismiss it.
  
  EFFECT
  Help Center 2.0 applies your chosen “accent color” uniformly to all of the following elements:
  - site banners
  - help center announcements banner
  - chat launcher
  - chat widget headers
  - chat message bubbles (user)
(Conditional) Set the action color for your app

HOW YOU DO IT
1. Under the Colors heading in the options pane, click the filled circle next to the Action Color label.A color picker opens.
2. In the color picker, choose your preferred action color.
3. Click anywhere outside the color picker to dismiss it.
  
  EFFECT
  Help Center 2.0 applies your chosen “action color” uniformly to all of the following elements:
  - links
  - buttons
  - highlights
(Conditional) Set the background color for your app

HOW YOU DO IT
1. Under the Colors heading in the options pane, click the filled circle next to the Background Color label.A color picker opens.
2. In the color picker, choose your preferred background color.
3. Click anywhere outside the color picker to dismiss it.
  
  EFFECT
  Help Center 2.0 applies your chosen “background color” uniformly to the following elements:
  - page backgrounds
  - chat widget backgrounds
(Conditional) Set the secondary background color for your app

HOW YOU DO IT
1. Under the Colors heading in the options pane, click the filled circle next to the Secondary Background Color label.A color picker opens.
2. In the color picker, choose your preferred secondary background color.
3. Click anywhere outside the color picker to dismiss it.
  
  EFFECT
  Help Center 2.0 applies your chosen “secondary background color” exclusively to the contact footer background.
(Conditional) Set the foreground color for your app

HOW YOU DO IT
1. Under the Colors heading in the options pane, click the filled circle next to the Foreground Color label.A color picker opens.
2. In the color picker, choose your preferred foreground color.
3. Click anywhere outside the color picker to dismiss it.
  
  EFFECT
  Help Center 2.0 applies your chosen “foreground color” uniformly to all of the following elements:
  - cards
  - popup messages
  - modal dialogs
  - chat widget reply footer
  - option pills
  - list pickers
  - intent pickers
(Conditional) Set the content color for your app

HOW YOU DO IT
1. Under the Colors heading in the options pane, click the filled circle next to the Content Color label.A color picker opens.
2. In the color picker, choose your preferred content color.
3. Click anywhere outside the color picker to dismiss it.
  
  EFFECT
  Help Center 2.0 applies your chosen “content color” uniformly to all of the following elements:
  - body text
  - icons
  - lines
  - chat message bubble text (agent)

Note: It is necessary to set above all colors manually only when you have not applied any color presets. Otherwise, presets populate this color setting automatically.

Help Center 2.0 - Configure font settings for app

TIP: We recommend that, each time you change any brand font setting or value, you click SAVE DRAFT on the page banner. Otherwise, you might have to repeat your work.

(Required) Configure font settings for your app

HOW YOU DO IT
1. Under the Font heading in the options pane, click either System-default Fonts or Custom Fonts, according to your preference. These options are mutually exclusive.
2. (Conditional) When you click Custom Fonts, four small forms become visible, and you must use all of them to upload your custom font files — one apiece for regular, italic, bold, and bold italic.
3. In the first font upload form, click UPLOAD FONT.
4. Browse to a suitable WOFF or WOFF2 font file.
5. Click the font file to select it. Then, press Enter to begin uploading it.
6. Complete the same uploading steps for each of the remaining WOFF or WOFF2 font files.
  
  EFFECT
  1. Choosing system-default fonts causes the appearance of a Help Center to be consistent with each end-user’s personal preferences.
  2. Choosing custom fonts causes the appearance of a Help Center to be at least somewhat consistent regardless of the platform, device, software, or user. Your Helpshift instance (“tenant”) hosts these fonts for rendering in every supported user case.
(Optional) Configure font settings template for your app

HOW YOU DO IT
There are two ways to choose a font setting template
1. Create a new foont template
  1. Under the Font heading in the options pane, click either Custom Fonts.
  2. In any one of the font style, click UPLOAD FONT.
  3. Browse to a suitable WOFF or WOFF2 font file.
  4. Click the font file to select it. Then, press Enter to begin uploading it.
  5. Click on Add icon to create a font template.
  6. Enter the template name in the text box.
  7. Complete uploading other font WOFF or WOFF2 font files using the above steps.
  8. Select the check box if you want this template as default.
  9. Click Save.
2. Edit an existing font template
  1. Click folder icon next to the fonts heading to open template list.
  2. Font template list appears. Click Edit icon to create a new font template.
  3. Edit/Enter the template name in the text box.
  4. In any one of the font style, click UPLOAD FONT.
  5. Browse to a suitable WOFF or WOFF2 font file.
  6. Click the font file to select it. Then, press Enter to begin uploading it.
  7. Complete the same uploading steps for each of the remaining WOFF or WOFF2 font files.
  8. Click Save.
    
    EFFECT
    Choosing custom fonts causes the appearance of a Help Center to be at least somewhat consistent regardless of the platform, device, software, or user. Your Helpshift instance (“tenant”) hosts these fonts for rendering in every supported user case.

Help Center 2.0 - Define a visual brand settings

Configure brand identity settings for app

Help Center 2.0 - Configure color settings for app

Help Center 2.0 - Configure font settings for app

Related articles