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.

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.

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

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

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

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.

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

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

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.

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

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.

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.

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

When toggle is ON

When toggle is OFF

TIP

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

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

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.

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

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.
   

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.

TIP

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

The available subheader sections are:

• App dropdown
• Platform dropdown

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.

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

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.

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.

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.

When toggle is ON

When toggle is OFF

TIP

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

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.
   

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.

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.

TIP

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

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.

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.
   

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.

Then:

• enter free text
  or
• choose a text template

Then:

• enter free text
  or
• choose a text template