7081
Customize the way your Support Center home page content is organized using the simple layout builder in HappyFox help desk. You can add custom widgets, show/hide default widgets and customize their appearance to keep your customers engaged with rich, helpful content.
Nicely designed and the well-branded home page is what makes your support center stand out from the rest ✨.
Applicable Plans: ✔️ Mighty ✔️ Fantastic ✔️ Enterprise ✔️ Enterprise Plus
A quick guide to customize your Home Page:
- Log in to your HappyFox agent panel.
- Navigate to Support Center >> Look and Feel from the module switcher.
- Click "Home" from the list of pages available for customization.
- Customize the various "Layout options" on the right sidebar with relevant configurations.
- Use the "toggle" inside layout options to show/hide the widget.
- Click "Add" to add custom layout options components to your home page. Click "Reorder" to reorder the positions of various layout options components.
- Click "Save" to save the current configuration as a draft. The changes saved will now reflect on the inbuilt site preview.
- Click "Publish" to confirm your changes made to your actual support center Home page.
Layout options components explained:
Click "Customize" to edit individual layout options for your support center home page.
Announcement:
- This dismissable component lets you highlight key announcements in your support center.
- If enabled, the announcement bar is visible across all pages of your support center.
- You can specify the colors and text for announcement section inside the layout options.
Header:
- This component lets you customize the header of your support center.
- Changes made to the header will reflect correspondingly in all pages in your support center.
- Colors: Lets you specify the background and text color for your support center header.
- Logo: Lets you upload a logo for your support center header in PNG/JPG/BMP format. Logos with dimensions larger than 210*38 will be shrunk to fit.
- You can also make the Support Center logo clickable by adding a URL inside "Logo links to" field.
- Mobile Logo: Lets you upload a mobile logo for your support center header in PNG/JPG/BMP format. Logos with dimensions larger than 38*38 will be shrunk to fit.
- Specify a name for your support center in the "Support Center Name" field. This name would appear adjacent to the logo inside the header. Popular examples are "Help Center" and "Support Portal".
- You can add a maximum of 6 links in your header. The texts and URL for each of these links can be configured.
- You can also choose to make the header sticky as you scroll down the support center pages.
Banner:
- This component lets you customize the colors, images, and texts of your home page banner.
- You could add a lively banner image to your home page with the built-in image uploader.
- The height of the home page banner is 420 pixels. Please upload a PNG/JPG/BMP image with resolution greater than 1280*420 and use the built-in re-sizer to fit.
- Use the "Overlay Opacity" to add a layer of transparency to your banner image.
- Also, you could specify a background color to your banner that matches your brand colors.
- Specify the heading text and its color. The heading text is present prominently in the center of your banner.
- Additionally, choose to enable search bar to your home page banner. The search bar lets you quickly search for articles and forum posts.
Custom Text Area:
- Custom text areas can be used to add texts and images specific to the support center home page.
- Use the built-in rich text editor to customize the content present inside the custom text area.
- Visibility of custom text areas can be configured depending on the login state of the end-user.
Top Articles:
- Top Articles lists the most viewed articles in your knowledge base.
- You can choose to list a maximum of 15 articles in this section, sorted by most viewed to least.
Top Sections:
- Top Sections lists all the top-level sections in your knowledge base.
- Choose the format of how you would like to display the Top Sections on the support center home page using the drop-down Section template:
- Description
- Articles.
- Subsections.
Footer:
- This component lets you customize the footer band of your support center.
- Note: Changes made to the footer will reflect correspondingly in all pages in your support center.
- You can choose to add Footer Text and toggle its visibility.
- You can add a maximum of 5 links in your footer. The texts and URL for each of these links can be configured.
Adding a custom layout component:
Click "Add" adjacent to Layout options and choose a custom component to add to your Support Center Home page.
Here are the different types of components you could add to your home page:
Featured Articles:
- Featured articles component is used to feature specific external knowledge base articles on your support center home page.
- You can specify the background color and title text for this component.
- Note: a maximum of 12 external articles can be featured at a time. If you would like to showcase more articles, it is recommended to create another featured articles component.
Featured Sections:
- Featured section component is used to selectively feature specific knowledge base sections on your support center home page.
- You can specify the background color, text colors, button color and title text for this component.
- Choose the format of how you would like to display the Featured Sections on the support center home page using the drop-down Section template:
- Description
- Image and description.
- Articles.
- Image and articles.
- Subsections.
- Image and subsections.
- Note: a maximum of 12 sections can be featured at a time. If you would like to showcase more sections, it is recommended to create another featured sections component.
- You could also toggle ON/OFF the visibility of a button "Browse all sections". Clicking this button would redirect you to the "All Sections" page.
Custom Text Areas:
You can add "Multiple" custom text areas to your support center. Each custom text area component is numbered with #1, #2 for reference.
Reordering layout options components:
Click "Reorder" adjacent to Layout options and specify the display order for your support center home page components:
- The announcement, header, banner, and footer cannot be re-ordered and they always take their respective positions.
- Other default components like top sections along with custom components (If enabled) can be re-ordered. Click and drag the component above or below another component for re-ordering. Changes made to the order are saved to draft in real-time.
- Home page display order:
- Announcement. (If enabled)
- Header.
- Banner. (If enabled)
- {{Reorderable components}}
- Footer.
Frequently Asked Questions
1) How do I customize other home page related pages like All Sections password, request new account pages, etc.?
A: At the moment it is not possible to customize other home page related pages. The colors and styles specified in the home page will be applied correspondingly in all home page related pages. For example, the title highlight inside the section details page will have the same background color as the home page banner.
2) Can I restore home page draft to the last published version?
A: Yes. Look out for "Restore" link towards the bottom of the layout options sidebar. Click "Reset" to undo all the draft changes made after last publish activity on the home page.
3) I always get redirected to the Login page when I visit the home page. Why?
A: This scenario could be possible due to multiple reasons:
- There are no external articles present in your knowledge base.
- The Support Center visibility preference "Allow contacts to view KB without logging in" is set to true.
A: Lookout for brand switcher dropdown on the top right of "Look and feel" page. Choose the appropriate brand to configure its related support center pages.
