User Portal Customization: Published Ordered Knowledge Base: : General | Helprace Support Published Ordered Knowledge Base: User Portal Customization Helprace RSS https://support.helprace.com/s1-general/knowledgebase/default/c25-user-portal-customization?format=rss Adding live chat to your user portal This article explains how you can add a button from your live chat tool to your Helprace portal. This works for virtually any live chat provider out there.

Basically you just need to copy the code generated by your live chat tool and paste it in the right place in Helprace. Check your provider's instructions on how to add a chat tab to your website.

These instructions usually tell you to paste code to a specific part of your website source code.

"between the <head> and </head> tags"

Open your Helprace admin panel and go to Settings > Customization.

Paste[_cuted_]

]]> Fri, 09 Feb 2018 11:32:36 +0000 https://support.helprace.com/i640-adding-live-chat-to-your-user-portal https://support.helprace.com/i640-adding-live-chat-to-your-user-portal Edward Edward This article explains how you can add a button from your live chat tool to your Helprace portal. This works for virtually any live chat provider out there.

Basically you just need to copy the code generated by your live chat tool and paste it in the right place in Helprace. Check your provider's instructions on how to add a chat tab to your website.

These instructions usually tell you to paste code to a specific part of your website source code.

"between the <head> and </head> tags"

Open your Helprace admin panel and go to Settings > Customization.

Paste the code to the "HTML Code for <head>" section and click Save.

"before the closing </body> tag"

Open your Helprace admin panel and go to Settings > Customization.

Paste the code to the "Footer" section and click Save.

"after the <body> tag"

Open your Helprace admin panel and go to Settings > Customization.

Paste the code to the "Header" section and click Save.

]]> User portal customization (CSS, Header & Footer) There are a number of customization features that allow you to change the look and feel of your user portal and feedback widget.

Change the style of the user interface; add a footer and header to match your website; adjust size and position of various UI elements; add links to your social media pages / resources and much more. This can be done by adding code for:

  • CSS stylesheets
  • Custom header
  • Custom footer
  • HTML in <head>

Customizing your Helprace user portal

The following applies to all pages in your user portal.

Start by going to the   Settings > Customization page and add the appropriate code.

CSS[_cuted_]

]]> Fri, 31 May 2019 11:01:16 +0000 https://support.helprace.com/i331-user-portal-customization-css-header-footer https://support.helprace.com/i331-user-portal-customization-css-header-footer Edward Edward There are a number of customization features that allow you to change the look and feel of your user portal and feedback widget.

Change the style of the user interface; add a footer and header to match your website; adjust size and position of various UI elements; add links to your social media pages / resources and much more. This can be done by adding code for:

  • CSS stylesheets
  • Custom header
  • Custom footer
  • HTML in <head>

Customizing your Helprace user portal

The following applies to all pages in your user portal.

Start by going to the   Settings > Customization page and add the appropriate code.

CSS stylesheets can be added in three ways:

  • By referencing an external .css file via URL. Helprace will retrieve the file remotely from your website/cloud, so any changes to the file will be reflected immediately.
  • By uploading your .css file to the Helprace cloud.
  • By typing or pasting your stylesheets in the text area.

You can use a combination of the above methods to set styles. However, styles will be applied in the same order as they appear on the page. This means the subsequent property will override the previous property applied to the same item.

Specifying HTML for the Header and Footer will have your portal closely resemble your website.  

You don't need CSS to show or hide the questions, ideas, problems, praise tabs or certain components of your home page. You can also set default sorting settings for community discussions.

Custom CSS stylesheets and code for <head> also apply to the feedback widget. Custom header and footer are not used in the feedback widget.

Try Stylus plugin for Chrome or Firefox to draft your custom CSS before publishing them.

Applying certain styles solely to the feedback widget

You can apply custom styles to the feedback widget only, without affecting the user portal.

To do this simply add ".main-wrapper_widget" class to your CSS rules. For example, if you would like to hide icons on the tabs ("Search", "Ask a Question", etc) in your feedback widget you'd need to use this style:

.main-wrapper_widget nav.tabbar .btn__icon {
   display: none;
}

To apply this change to the widget and user area pages, remove the widget class selector:

nav.tabbar .btn__icon {
   display: none;
}

User portal customization is available in Helpdesk, Self-Service and Complete plans.

]]>