ARTICLE FRESHNESS

2021.05.11

AUDIENCE

We prepared this material for well qualified Helpshift administrators.

FOUNDATIONAL KNOWLEDGE

  • A Help Center is an in-app destination for customer service engagements and user support, centered around exactly one product or service.

    • Help Center 1.0 is a legacy product — bound to legacy SDKs — that supports upgrading to Help Center 2.0.

    • Help Center 2.0 is a modern product, available by subscription, which can implement more visually sophisticated outcomes than are supported in Help Center 1.0. Help Center 2.0 is bound to SDK X.

  • A web support portal is either:

    • a public website that consolidates all of the Help Centers that one company or organization supports through one hosted Helpshift instance

      OR

    • a public website that presents the resources from one Help Center, which supports the users of one, specified app on one, specified platform
  • Chat is a Helpshift capability whose look and feel — when you have and use Help Center 2.0, inherits some look-and-feel characteristics from it.

ARTICLE SCOPE

Help Center 2.0 includes many features to personalize the customer support experience for your users and prospects.

  • You can set an overall brand identity with logos, colors, and fonts that apply by default to all of your various Help Centers.

  • You can customize the look and feel for one Help Center at a time, as you see fit.

  • You can set and apply visual treatments for a comprehensive and public web support portal that combines the Help Centers from all of your apps.

BEFORE YOU BEGIN

  • You must log in to your Helpshift instance (“tenant”) as its administrator.

  • You must have Help Center 2.0 (or later), which we first released in May 2021. You have it either because it is the only version that you have ever had or because you upgraded to it from Help Center 1.0.

WHERE YOUR WORK BEGINS

HOW YOU GET THERE

WHAT YOU SEE THERE

Most of your work to customize the look-and-feel of your individual Help Centers and/or the look-and-feel of your centralized web support portal takes place on the Branding and Customizations page.

  • On the Helpshift toolbar, click Settings ().

  • Then, in the navigation pane, scroll to the SUPPORT SETTINGS area and click Branding and Customizations.

The Branding and Customizations page opens. On its page banner, the Brand tab is selected by default.

Define a visual brand

  • Configure brand identity settings
  • Configure brand color settings
  • Configure brand font settings

Configure brand identity settings

TIP

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

SUBTASK

EFFECT

HOW YOU DO IT

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

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

SUPPORT
PORTAL
(web)
SUPPORT
PORTAL
(mobile
web)
WEB
CHAT
iOS
ANDROID

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

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 Web Support Portal is the active tab, 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

After you upload it, your logo image appears before your brand name in the main navigation bar over your knowledge base articles and FAQs.

SUPPORT
PORTAL
(web)
SUPPORT
PORTAL
(mobile
web)
WEB
CHAT
iOS
ANDROID
  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.

(Optional) Set the favicon

The favicon loads on web browser window tabs and bookmarks.

SUPPORT
PORTAL
(web)
SUPPORT
PORTAL
(mobile
web)
WEB
CHAT
iOS
ANDROID
  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.

Configure brand color settings

TIP

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

SUBTASK

EFFECT

HOW YOU DO IT

(Optional) Choose preset colors for your brand

Choosing a preset overwrites any prior selections that you may have made for these values:

  • accent color

  • background color

  • secondary background color

  • foreground color

  • content color

SUPPORT
PORTAL
(web)
SUPPORT
PORTAL
(mobile
web)
WEB
CHAT
iOS
ANDROID

TIP

Table rows after this one describe the specific effects of each color setting.

  1. Next to the Colors heading in the options pane, click Presets to show a contextual menu.

  2. Choose either Light or Dark.

(Conditional) Set the accent color for your brand

Help Center 2.0 applies your chosen “accent color” uniformly to all of the following elements:

  • site banners

  • web links outside site banners

  • button backgrounds

  • highlights

  • chat widget activation button

  • chat widget headers

  • chat message bubbles (user)

SUPPORT
PORTAL
(web)
SUPPORT
PORTAL
(mobile
web)
WEB
CHAT
iOS
ANDROID

NOTE

It is necessary to set an accent color manually only when you have not applied any color presets.

Otherwise, presets populate this color setting automatically.

  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.

(Conditional) Set the background color for your brand

Help Center 2.0 applies your chosen “background color” uniformly to the following elements:

  • page backgrounds

  • chat widget backgrounds

SUPPORT
PORTAL
(web)
SUPPORT
PORTAL
(mobile
web)
WEB
CHAT
iOS
ANDROID

NOTE

It is necessary to set a background color manually only when you have not applied any color presets.

Otherwise, presets populate this color setting automatically.

  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.

(Conditional) Set the secondary background color for your brand

Help Center 2.0 applies your chosen “secondary background color” exclusively to the contact footer background.

SUPPORT
PORTAL
(web)
SUPPORT
PORTAL
(mobile
web)
WEB
CHAT
iOS
ANDROID

NOTE

It is necessary to set a secondary background color manually only when you have not applied any color presets.

Otherwise, presets populate this color setting automatically.

  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.

(Conditional) Set the foreground color for your brand

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

SUPPORT
PORTAL
(web)
SUPPORT
PORTAL
(mobile
web)
WEB
CHAT
iOS
ANDROID

NOTE

It is necessary to set a foreground color manually only when you have not applied any color presets.

Otherwise, presets populate this color setting automatically.

  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.

(Conditional) Set the content color for your brand

Help Center 2.0 applies your chosen “content color” uniformly to all of the following elements:

  • body text

  • icons

  • chat message bubble text (agent)

SUPPORT
PORTAL
(web)
SUPPORT
PORTAL
(mobile
web)
WEB
CHAT
iOS
ANDROID

NOTE

It is necessary to set a content color manually only when you have not applied any color presets.

Otherwise, presets populate this color setting automatically.

  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.

Configure brand font settings

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.

SUBTASK

EFFECT

HOW YOU DO IT

(Required) Configure font settings for your brand

  • Choosing system-default fonts causes the appearance of a Help Center to be consistent with each end-user’s personal preferences.

  • 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.

  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.

Customize a Help Center

  • Configure banner settings for one Help Center
  • Configure section image settings for one Help Center
  • Configure color settings for one Help Center
  • Configure font settings for one Help Center

Configure banner settings for one Help Center

On the Branding and Customizations page banner, click the App tab.

In the options pane, click the topmost selector and choose a Help Center to customize.

TIP

We recommend that, each time you change any banner setting or value for a Help Center, you click SAVE DRAFT on the page banner. Otherwise, you might have to repeat your work.

SUBTASK

EFFECT

HOW YOU DO IT

(Optional) Set the banner image for one Help Center

The banner image loads on every page in your Help Center.
  1. Under the Banner heading in the options pane, on the Banner Image form, click UPLOAD IMAGE.

  2. Browse to a suitable file.

  3. Click the file to select it. Then, press Enter to begin uploading it.

Enter the banner text for use on one Help Center

The banner text loads on every page in your Help Center.
  1. Under the Banner heading in the options pane, click inside the Banner Text text area to activate it for editing.

  2. Do either — or both — of the following.

  • Enter text manually.

  • Click Insert Text Template () to begin choosing a text template for use as banner text.

Configure section image settings for one Help Center

On the Branding and Customizations page banner, click the App tab.

In the options pane, click the topmost selector and choose a Help Center to customize.

TIP

We recommend that, each time you change any section images setting or value for a Help Center, you click SAVE DRAFT on the page banner. Otherwise, you might have to repeat your work.

SUBTASK

EFFECT

HOW YOU DO IT

Toggle section images On or Off for one Help Center

Choose whether the sections in your Help Center — being the organizational structure for your knowledge base articles, FAQs, and any other support resources — show section-defining images.

Under the Section Images heading in the options pane, toggle the use of section images On or Off.

TIP

The toggle is colored green while the feature is turned On and colored gray while the feature is turned Off.

Use emoji characters as section images on one Help Center

When no uploadable files are available for use as section images, you can choose to use emojis, instead.

  1. Under the Section Images heading in the options pane, click the preview tile for any named section of your Help Center.

    A tabbed widget opens. The tab labels are Image and Emoji.

  2. Click Emoji.

  3. Browse or search for the emoji that you would use with the specified section, and then click it to choose and apply it.

Use previously uploaded pictures as section images on one Help Center

When you have already uploaded image files to your Helpshift instance, for use as Help Center section images, you can choose among them and assign them to sections.

  1. Under the Section Images heading in the options pane, click the preview tile for any named section of your Help Center.

    A tabbed widget opens. The tab labels are Image and Emoji.

  2. Click Image.

  3. Scroll through the library of previously uploaded images, and then click an image to choose and apply it.

Upload a picture for use as a section image on one Help Center.

TIP

The supported file types and filename extensions are PNG, JPG, JPEG, and SVG. Of these, SVG files render in high definition at any scale and are uniquely well suited to responsive design.

We recommend image dimensions of 120 x 120px for any non-SVG section image file that you use this form to upload.

  1. Under the Section Images heading in the options pane, click the preview tile for any named section of your Help Center.

    A tabbed widget opens. The tab labels are Image and Emoji.

  2. Click Image.

    The Upload Images form is directly under the library of previously uploaded images.

  3. Click the unlabeled image upload button ().

  4. Browse to a suitable file.

  5. Click the file to select it. Then, press Enter to begin uploading it.

Configure color settings for one Help Center

On the Branding and Customizations page banner, click the App tab.

In the options pane, click the topmost selector and choose a Help Center to customize.

TIP

We recommend that, each time you change any color setting or value for a Help Center, you click SAVE DRAFT on the page banner. Otherwise, you might have to repeat your work.

SUBTASK

EFFECT

HOW YOU DO IT

(Optional) Use brand colors on one Help Center

You can choose whether your Help Center inherits its color scheme from your brand. When it does not, you must choose or define a different color scheme.

  1. Under the Colors heading in the options pane, check the Use brand colors checkbox.

  2. (Optional) On the page banner, click Save Draft.

(Optional) Use preset colors on one Help Center.

When you choose a preset — light or dark — it overwrites all prior selections for these values:

  • accent color

  • background color

  • secondary background color

  • foreground color

  • content color

  1. Under the Colors heading in the options pane, clear the Use brand colors checkbox.

  2. Next to the Colors heading, click Presets to show a contextual menu.

  3. Choose either Light or Dark.

(Conditional) Set the accent color for one Help Center

  1. Under the Colors heading in the options pane, clear the Use brand colors checkbox.

  2. Also under the Colors heading, click the filled circle next to the Accent Color label.

    A color picker opens.

  3. In the color picker, choose your preferred accent color.

  4. Click anywhere outside the color picker to dismiss it.

(Conditional) Set the background color for one Help Center

  1. Under the Colors heading in the options pane, clear the Use brand colors checkbox.

  2. Also under the Colors heading, click the filled circle next to the Background Color label.

    A color picker opens.

  3. In the color picker, choose your preferred background color.

  4. (Optional) Click anywhere outside the color picker to dismiss it.

(Conditional) Set the secondary background color for one Help Center

  1. Under the Colors heading in the options pane, clear the Use brand colors checkbox.

  2. Also under the Colors heading, click the filled circle next to the Secondary Background Color label.

    A color picker opens.

  3. In the color picker, choose your preferred secondary background color.

  4. Click anywhere outside the color picker to dismiss it.

(Conditional) Set the foreground color for one Help Center

  1. Under the Colors heading in the options pane, clear the Use brand colors checkbox.

  2. Also under the Colors heading, click the filled circle next to the Foreground Color label.

    A color picker opens.

  3. In the color picker, choose your preferred foreground color.

  4. Click anywhere outside the color picker to dismiss it.

(Conditional) Set the content color for one Help Center

  1. Under the Colors heading in the options pane, clear the Use brand colors checkbox.

  2. Also under the Colors heading, click the filled circle next to the Content Color label.

    A color picker opens.

  3. In the color picker, choose your preferred content color.

  4. Click anywhere outside the color picker to dismiss it.

Configure font settings for one Help Center

On the Branding and Customizations page banner, click the App tab.

In the options pane, click the topmost selector and choose a Help Center to customize.

TIP

We recommend that, each time you change any color setting or value for a Help Center, you click SAVE DRAFT on the page banner. Otherwise, you might have to repeat your work.

SUBTASK

CONTEXT

HOW YOU DO IT

(Optional) Use brand font settings on one Help Center

Under the Font heading in the options pane, check the Use brand colors checkbox.

(Conditional) Set the fonts for one Help Center

  • Choosing system-default fonts causes the appearance of a Help Center to be consistent with each end-user’s personal preferences.
  • 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.
  1. Under the Font heading in the options pane, clear the Use brand colors checkbox.

  2. Also under the Font heading, click either System-default Fonts or Custom Fonts, according to your preference.

    These options are mutually exclusive.

  1. (Conditional) When you click Custom Fonts, four small forms become visible, and you must use all of of them to upload your custom font files — one apiece for regular, italic, bold, and bold italic.

  2. In the first font upload form, 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. Complete the same uploading steps for each of the remaining font files.

Customize a web support portal

  • Configure page header and page footer colors for your web support portal
  • Set the title for your web support portal
  • Configure a standard set of recurring links for use on your web support portal
  • Configure special page footer text blocks for your web support portal

Configure page header and page footer colors for your web support portal

 

On the Branding and Customizations page banner, click the Web Support Portal tab.

TIP

We recommend that, each time you change any page header or page footer color setting or value for your web support portal, you click SAVE DRAFT on the page banner. Otherwise, you might have to repeat your work.

 

SUBTASK

EFFECT

HOW YOU DO IT

(Optional) Set your web support portal’s page headers and page footers to share their background color in common

  1. Under the Colors heading in the options pane, check the Use one… checkbox and click the filled circle next to the Background Color label.

    A color picker opens. 

  1. In the color picker, choose your preferred background color.

  2. Click anywhere outside the color picker to dismiss it.

(Optional) Set your web support portal’s page headers and page footers to share their content color in common

  1. Under the Colors heading in the options pane, check the Use one… checkbox and 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.

(Conditional) Set your web support portal’s page headers to use their own background color, separate from the background color in page footers

  1. Under the Colors heading in the options pane, clear the Use one… checkbox and click the filled circle next to the Header Background Color label.

    A color picker opens. 

  1. In the color picker, choose your preferred page header background color.

  2. Click anywhere outside the color picker to dismiss it.

(Conditional) Set your web support portal’s page headers to use their own  content color, separate from the content color in page footers

  1. Under the Colors heading in the options pane, clear the Use one… checkbox and click the filled circle next to the Header Content Color label.

    A color picker opens.

  2. In the color picker, choose your preferred page header content color.

  3. Click anywhere outside the color picker to dismiss it.

(Conditional) Set your web support portal’s page footers to use their own background color

  1. Under the Colors heading in the options pane, clear the Use one… checkbox and click the filled circle next to the Footer Background Color label.

    A color picker opens.

  2. In the color picker, choose your preferred page footer background color.

  3. Click anywhere outside the color picker to dismiss it.

(Conditional) Set your web support portal’s page footers to use their own content color

  1. Under the Colors heading in the options pane, clear the Use one… checkbox and click the filled circle next to the Footer Content Color label.

    A color picker opens.

  2. In the color picker, choose your preferred page footer content color.

  3. Click anywhere outside the color picker to dismiss it.

 

Set the title for your web support portal

 

On the Branding and Customizations page banner, click the Web Support Portal tab.

SUBTASK EFFECT HOW YOU DO IT
(Optional) Set a site title for your web support portal  

TIP

Your web support portal title can be multilingual, in whole or in part, representing itself to your users in a language that they already know.

To achieve this effect, use text templates for which you have entered and saved the correct translations.

To choose a text template after clicking Insert Text Template (),  you must know and enter its name.

Under the Title heading in the options pane, in the Web Support Portal Title text box, do either — or both — of the following.

  • Enter text manually. 
  • Click Insert Text Template () to begin choosing a text template for use as title text.
(Optional) Reset your web support portal’s site title to the Helpshift system default setting Under the Title heading in the options pane, next to the Web Support Portal Title field label, click Reset to default.

 

Configure a standard set of recurring links for use on your web support portal

 

On the Branding and Customizations page banner, click the Web Support Portal tab.

 

SUBTASK EFFECT HOW YOU DO IT
(Optional) Set the brand home page link for your company, division, or product line
  • Under the Links heading in the options pane, find the Brand Home Page Link text box.
  • In the text box, enter the primary URL where people can learn about your company, your division, or your product line.
(Optional) Configure your web support portal’s page headers to show as many as four links 
  • Under the Links heading in the options pane, in the Header Links area, click + ADD.

    A form opens, prompting you to supply both a label and a URL.
  • Do both of the following.
  • In the Enter Label field, enter free text, choose a text template, or do both.
  • In the Enter URL field, enter the URL that corresponds to the label.
(Optional) Configure your web support portal’s page footers to show as many as eight links
  • Under the Links heading in the options pane, in the Footer Links area, click + ADD.

    A form opens, prompting you to supply both a label and a URL.
  • Do both of the following.
  • In the Enter Label field, enter free text, choose a text template, or do both.
  • In the Enter URL field, enter the URL that corresponds to the label.
(Optional) Configure your web support portal’s page footers to show any number of social links
  • Under the Links heading in the options pane, in the Footer Social Links area, click + ADD.

    A contextual menu opens, from which you can choose any listed social network.
  • Choose a social network where your company, division, or product line maintains a social presence.

    For example, you might choose Facebook.

    A tile loads under the Footer Social Links label, which identifies the social network that you chose and also shows an editable link.
  • Edit the link, so that it points directly to the social media profile that you mean to publicize.
  • Repeat as needed.

 

Configure special page footer text blocks for your web support portal

 

On the Branding and Customizations page banner, click the Web Support Portal tab.

SUBTASK EFFECT HOW YOU DO IT
(Optional) Enter a slogan, motto, or other text that should appear in all page footers Under the Links heading in the options pane, locate the text-entry form in the Notes area. Then:

  • enter free text
  • choose a text template
  • or do both
(Optional) Enter a copyright statement for your web support portal to render in all page footers Under the Links heading in the options pane, locate the Copyright Note field in the Notes area. Then:

  • enter free text
  • choose a text template
  • or do both