ARTICLE FRESHNESS 2022.05.05
AUDIENCE We prepared this material for well qualified Helpshift administrators.
FOUNDATIONAL KNOWLEDGE

 

  • A Help Center is a 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 instanceOR
    • 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 up your Help Center at an app level with logos, colors, fonts, banner images and many more such features.
  • You can customize the look and feel for Help Center at an app level any 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 can configure your Help Center using Branding and Customization tab on dashboard. However to leverage all the important settings, you must have Help Center 2.0 which we 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.

Help Center 2.0 – Getting Started

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

Follow the steps given below to get started:

  1. On the Helpshift toolbar, click Settings.
  2. Then, in the navigation pane, scroll to the SUPPORT SETTINGS area and click Branding and Customizations.

    The Branding and Customization page opens.

  3. On its page banner, the App level Brand tab is selected by default.

    You can select the app from the drop down list for which you would like to make the changes.

Define a visual brand settings

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

Configure brand identity settings for app

TIP

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.

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.

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

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

  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.

  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.

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.

SUBTASK EFFECT HOW YOU DO IT
(Optional) Choose color template for your app

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.

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.

Edit an existing 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.
(Conditional) Set the accent color for your app 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)

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 action color for your app Help Center 2.0 applies your chosen “action color” uniformly to all of the following elements:

  • links
  • buttons
  • highlights
  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.
(Conditional) Set the background color for your app Help Center 2.0 applies your chosen “background color” uniformly to the following elements:

  • page backgrounds
  • chat widget backgrounds

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 app Help Center 2.0 applies your chosen “secondary background color” exclusively to the contact footer background.

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 app 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

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

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.

SUBTASK EFFECT HOW YOU DO IT
(Required) Configure font settings for your app
  • 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.
(Optional) Configure font settings template for your app 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.

Create a new font 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.

Edit an existing font template

  1. Click folder icon next to 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 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.

Help Center 2.0 – Configure app header, web header, and sub header section

Help Center 2.0 – Configure app header section

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

SUBTASK EFFECT HOW YOU DO IT
(Optional) Set a site title for your app header section  

TIP

Your app header section 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 App Header Section heading, in the In App Title text box, do either of the following.

  • Enter text manually.
  • Click Insert Text Template () to begin choosing a text template for use as title text.
(Optional) Reset your app header section title to the Helpshift system default setting Under the App Header Section heading in the options pane, next to the In App Title field label, click Reset to default.

 

Help Center 2.0 – Configure web header section

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

SUBTASK EFFECT HOW YOU DO IT
Toggle for web header section to On or Off. Choose whether you want to add the web header sections in your Help Center.

When toggle is ON

When toggle is OFF

Under the Header heading in the options pane, toggle the web header section On or Off.

TIP

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

(Optional) Choose color template for your web header section Choosing a template overwrites any prior selections that you may have made for these values:

  • Background color
  • Content color

Create a 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.

Edit existing template

  1. Next to the Colors heading in the options pane, click Folder icon to show a template list.
  2. Choose the template from the available list.
  3. Click Edit icon and update preferred changes.
  4. Click Apply.
(Optional) Set a web support title for your web header section TIP

Your web header section 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 Web Header Section heading, in the In App Title text box, do either 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 header section title to the Helpshift system default setting Under the Web Header Section heading in the options pane, next to the Web Support Title field label, click Reset to default.
(Optional) Set the brand home page link for your company, division, or product line
  1. Under the Web Header Section heading in the options pane, find the Brand Home Page Link text box.
  2. 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
  1. Under the Web Header Section 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.
  2. Do both of the following.
  3. In the Enter Label field, enter free text, choose a text template, or do both.
  4. In the Enter URL field, enter the URL that corresponds to the label.

NOTE

You can also select the header link template from the available list or create a new template by clicking + ADD and set as a default template.

Help Center 2.0 – Configure the web subheader section

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

SUBTASK EFFECT HOW YOU DO IT
(Optional) Configure your web sub-headers section

TIP

Language dropdown will not be shown as there is just one language enabled.

Under the Web Subheader Section heading in the options pane, check the checkbox next to the sub-header section label to add the section.

The available subheader sections are:

  • App dropdown
  • Platform dropdown

Help Center 2.0 – Configure the body section

Web View Mobile View

Help Center 2.0 – Configure the banner

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

TIP

We recommend that, each time you change any banner setting 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
Select the banner options from dropdown list
  1. Under the Banner heading in the options pane, select the platform option for banner image from dropdown list.

The available platforms combinations in dropdown list as below:

  • Same banner for desktop and mobile
  • Different banner for desktop and mobile
  • Different banner for desktop, mobile portrait and mobile landscape
(Optional) Set the banner image for Help Center The banner image loads on selected platform in your Help Center.

The available banner image options in dropdown list as below:

  • Large banner
  • Small banner
  • No banner
  1. Under the Banner heading in the options pane, on the Banner Image dropdown.
  2. Select the banner size options from dropdown list.
  3. Click UPLOAD IMAGE for the selected banner options.
  4. Browse to a suitable file.
  5. Click the file to select it. Then, press Enter to begin uploading it.

Repeat the above steps for selecting other banners.

Enter the greeting text for use on one Help Center The greeting text loads on every page in your Help Center.

  1. Under the Banner heading in the options pane, click inside the Greeting Text text area to activate it for editing.
  2. Do either of the following.
  • Enter text manually.
  • Click Insert Text Template () to begin choosing a text template for use as greeting text.

Help Center 2.0 – Configure section image settings for Help Center

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

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.

When toggle is ON

When toggle is OFF

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 unlabelled image upload button ().
  4. Browse to a suitable file.
  5. Click the file to select it. Then, press Enter to begin uploading it.

Help Center 2.0 – Configure the footer

The Footer section is available only in web Help Center.

Help Center 2.0 – Configure colors

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

SUBTASK EFFECT HOW YOU DO IT
 Toggle for footer section to On or Off. Choose whether you want to add the footer sections in your Help Center. Under the Footer 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.

(Optional) Set your web support portal’s page header and page footer to share their background color in common
  1. Under the Footer heading in options pane, in the Colors area, check the checkbox to use one background color and one content color in both the header and the footer.
    Or
  2. Under the Colors heading in the options pane, clear the checkbox.
    And under the Colors heading, click the filled circle next to the label.A color picker opens.
  3. In the color picker, choose your preferred footer background color and footer content color.
  4. Click anywhere outside the color picker to dismiss it.

Help Center 2.0 – Configure footer links and footer social links

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

SUBTASK EFFECT HOW YOU DO IT
(Optional) Configure your web support portal’s page footers to show as many as eight links
  1. Under the Footer 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.
  2. Do both of the following.
  3. In the Enter Label field, enter free text, choose a text template, or do both.
  4. 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
  1. Under the Footer 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.
  2. 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.
  3. Edit the link, so that it points directly to the social media profile that you mean to publicize.
  4. Repeat as needed.

Help Center 2.0 – Configure special footer note and copyright note

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

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

Then:

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

Then:

  • enter free text
    or
  • choose a text template