More flexible knowledge base design and layout, including custom HTML/CSS

Snaedis
HubSpot Product Team

There have been a number of different posts in the Community which are about the same core need (customizing the styling of the knowledge base), but many have been marked as "solved" or "delivered" because of options that get you part-way there. I'm consolidating those into this post so we can more easily track this need. This post should not be marked as solved or delivered until a knowledge base can be fully customized in layout and styling.

 

I've spoken with many customers who still want more flexibility in knowledge base styling, including: 

  • Custom layouts for index pages and articles
  • More fonts and styling options to better align KB with the rest of a business's website

For those of us who are working to improve the HubSpot product, it's incredibly helpful to have example use cases from our customers, and the posts here on the Community play an important role in our prioritization process. 

 

Giving you more flexibility in KB styling is something we'd like to do, and when we have the bandwidth to dig into this project we'll look to you all for guidance on how to best support your needs. So if customization is important to you, please add your voice to this thread!

 

For reference, I'm listing here the other posts which are related to this topic: 

Snaedis Valsdottir
Associate Product Manager, CMS Publishing
21 Replies 21
rrumpf19
Participant

Our team would appreciate some functionality, at the very least, to allow our help center logo link to open in a new tab.

brianserocke
Participant | Gold Partner

Thanks for your attention to this issue, @Snaedis. You mentioned we should add our voice to this thread if KB customization is important to us, so I'm doing just that. We're hoping to customize fonts (with the ability to use a Google Font being the main request) and adjust the layout on the KB index page. It would be really excellent if we could edit the KB index page to add our own modules to the page alongside the existing grid layout currently used for KB article categories. 

 

I'd be happy to show examples or use cases when the product team is ready to move this into planning and production.

stevemoss
Member

Thanks for bringing all these suggestions together in one place Snaedis. It's good to see a summary of some issues currently under discussion.

I'm currently trying to work out how to set up a knowledgebase in Hubspot that is currently set up in Madcap Flare. There appear to be several key limitations in Hubspot that makes this tricky, but I would be interested to hear from others how they would deal with these challenges, as I'm new to Hubspot.

 

We are keen to move our knowledgebase into Hubspot because of the integration features it provides, but working around these issues is making it a bigger job than we had hoped.

 

1. Drop-down accordions not available. This is a key feature of Flare and allows embedded paragraphs, tables and images to be hidden under a heading, but displayed by clicking on that heading. It's a great way of layering information in one article so that the user can see what's there and read selected information without having to jump to new articles. The nearest I can get to reproducing this behavior is to set up a mini-TOC at the start of a long article and link each heading in the TOC to an anchor further down the article. But more on anchors later...

 

2. Single categorization of articles. As far as I can see, any article can appear once only in the overall architecture of the knowledgebase. This is a problem for me as the current Flare knowledgebase has two or more entry points in the TOC for many articles. For example, Jobs>Job settings>Job templates, Templates>Job templates, Settings>Job settings>Job templates. So it looks like I have to decide which is the most useful access path for the article on Job templates and categorize it accordingly.

 

3. Two levels: Category and sub-category. Flare allows as many levels as required to be defined in the overall table of contents for the knowledgebase. This is a powerful feature as it allows individual articles to be located in the most suitable place in the overall information architecture, regardless of how many levels are required. Continuing with the previous example, there is currently an article called "Creating a job template". This article appears at the end of the path: Jobs>Job settings>Job templates>Creating a job template, at level 4 in the hierarchy. Because I can only store articles down to three levels, this means that all the articles about working with Job templates (creating, editing, deleting, copying etc.) need to be stored in a single article in Hubspot. This is OK, but I need to make use of my mini-TOC to allow users to jump straight to the relevant section. In some ways it's probably better to limit the number of levels in the hierarchy, but it's going to require some rethinking about how the articles are organized and linked to get it to work in Hubspot.

 

4. Links to anchors only within the same article. I can't find any way to set up a link from one article to another that goes to an anchor in the target article, rather than the article itself. This means that if I want to set up a link from one article to (say) the  "Deleting a job template" section of the Job templates article, I can't do that. The nearest I can get is to jump to the article itself and then rely on the user spotting the "deleting" option in the mini-TOC. This problem could be resolved if it was possible to edit the HTML directly (as mentioned in the main post) and add a suitable anchor reference manually to the link.

 

Perhaps you can give me some idea if any of these issues are likely to be addressed in the near future? All of them apart from the last one have some sort of workaround, but that could be addressed if HTML editing is provided.

 

 

GBrown4
Participant

I would like to be able to change the background color, style and images (not just the header). For example, we have a custom background that I would like to be able to upload, so it isn't so white and bare.

AWinger
Participant

Thanks for mentioning this! We're just switching over from Zoho and doing an update for our whole KB to partially for internal reasons, partially to align the differences in formatting options between Zoho and Hubspot. I was happy to see you mention the ability to insert an image into a numbered list since we have many "how-to" articles which require images for multiple steps.

 

I am currently  becoming quite frustrated with how the bullet point/ number point system works. Is there a tutorial or something I can use to figure out how to create a smaller set of bullet points? E.g. if I have steps 1,2,3 but step two has 3 parts to it.

I appreciate any advice! Thanks!

louischausse
Key Advisor | Platinum Partner
What is the last update on this? @Snaedis?

Louis Chaussé

CEO

Auxilio

lchausse@auxilio.io
auxilio.io
Schedule a call
ANichols0
Participant

Our team would appreciate being able to display all of the articles in a subcategory instead of the just the first 4 and "see more" link. 

ANichols0_0-1610337813132.png

 

Andy_Mantle
Participant

This functionality would potentially be the difference for staying with Hubspot or not. The KB is a key component of our support model moving forward and being able to customise it is crucial. 

ANichols0
Participant

I agree with @Andy_Mantle, and would even take this idea one step further to adding a cascading menu in left panel for the user to easily navigate between Categories, Sub-categories and Articles. This is basic KB functionality. 

Ashleymccu
Participant

I agree with you both. I find it difficult to use anchors and link articles to each other (not really possible). 

0 Upvotes
dorecchio
Contributor | Gold Partner

Hi Snaedis,

 

I just got a request from a client (full growth stack Sales, Service, Marketing, CMS) and they believe their knowledge base appearance reflects badly on their company and therefore their customers. I am not sure I agree with them but they have this opinion. 

 

Here are some suggestions:

  • At a minimum, enable the ability to set the website header and footer as the header and footer of the knowledge base. This should be straightforward. 
  • Secondly, provide more control formatting the header where the search box is. 

Below these two things, then formatting of the body of the knoledge base is upside, but at least the KB looks like it fits into the rest of the website. 

 

I have many other points of feedback abd would be happy to speak with you about the solution but wanted to remain focused with this reply. Feel free to reach out if you would like to speak about these suggestions and other related ideas.

 

- Dave Orecchio, Bristol Strategy, Inc. - Hubspot Partner. 

 

baard
Participant

Hi Snaedis

 

Ref. Custom layouts for index pages and articles, just the ability to choose home page (level 1) styling also on the sub category pages (level 2), would be very helpful. We have Tiles on the home page, and would like to have Content Rich

or Minimal on the sub category pages (level 2).

I can see https://help.hubspot.com/ have version of this idea, but a custom solution.

MZahn
Participant

It would be very helpful and important to us if we can fully customize the KB in layout and styling.

0 Upvotes
HelpfulHero
Participant

Hey Snaedis!

 

I just wanted to chime in here regarding the Knowledge Base feature which I just signed up for (Service Hub Pro).  While I love a majority of the experience and basic templates included in the KB feature, I'm SHOCKED there isn't even a tad more developer control.  If not only to be able to add in CSS or scripts to the <head>.

 

Frankly, I'm not trying to do anything super tricky.  I simply want to be able to increase the font sizes in the sidebar, article, etc.  

 

What was the UX rationale in not allowing that user input where the fonts in the KB are currently editable?

 

At the end of the day, all I really would need is the ability to add in my own CSS to the head for these minor cosmetic changes.

JoeMayall
HubSpot Product Team

Hi folks!

I saw some chatter on this thread so I wanted to hop in. I've been in contact with our Product teams, and at this time we have nothing new to report. Our Product team is well aware of these requests and is balancing them with existing priorities and feature developments. We'll keep monitoring this thread for feedback and additional input, so please continue to leave us your feedback. It greatly helps us deliver the features you want to be built.

 

Thank you,

Joe

ANichols0
Participant

Thank you for the update Joe. I can report that our clients are missing the "see more" link and missing out on articles because of the cumbersome navigation. It's a massive effort to write all this content only to have it passed over. I know this is a big problem for others as well. It's not a workable KB without the ease of use of a navigation tree menu... we don't want our customers to have to find the needle in the haystack... should be quickly and easily accessible. Please escalate! 

0 Upvotes
FParkinson
Participant

We would like to have the ability to add internal 'tags' or fields to KB articles so that we can then label and search for related articles for updating purposes. E.g. to be able to tag all articles that contain hyperlinks that are used in our code, or all articles that have images of page x of our product so we can easily find them and replace screenshots if that page is updated with new features. At the moment we have to manually search the body of text to find this sort of information which is hugely time consuming.

Ashleymccu
Participant

 I would like to see 'last updated on Month, Day, Year,' displayed on the articles themselves. This informaiton is only available on the articles dashboard and doesn't allow readers to know how up to date KB articles are on a given topic. 

AstridvanDam
Participant

It would be of great value if we could add more styling to our KB articles. For example, add a cell colour in a table, adjust the table border to make them think, adjust text colour, etc.

FatiiUnrein
Participant | Diamond Partner

This is important! 

duncanparsons
Participant

Thank you so much for this post!

 

Coming to HS from a WordPress site where we had all our support pages as part of our main sales site, those pages remained as part of the sales site in the transfer. Which has been fine for the last 18months, but we're now looking att he additional user self-service options available via widgets and the additional reporting available using the KnowledgeBase functionality.

 

It is going to require a major rework of many of our pages as we make extensive use of accordia [ 😉 ] and additional CSS for highlighting certain terms outside of just Bold/Italic/etc. From my history as a programmer, when updating pages I almost exclusively use the HTML editor to get the items rendering as wanted (table layouts, CSS classes for keyword/feature rendering and bullet points, etc). I'm also a little disappointed that the anchor insertion dialog doesn't allow for the rel="help" attribute to help crawlers understand the purpose of a link in a body of text - one would have thought that a KnowledgeBase would have this implemented! I use it frequently for links to glossaries, etc.

The following paragraph has been highlighted as a practical, simple outline of how a requested feature could be implemented (should a dev manager wish to give it the once over..!)

Being able to use local CSS classes would be fantastic. It could be implemented fairly simply (I'm not advocating "It's just a button, isn't it.." - I'm a dev, I understand the work involved..). A table where a company can specify as class name and the associated text can be implemtned in the KB settings, and parsed so that only correct CSS can be used. The locally defined classes can then be made available in a dropdown box similar to the Hx/Paragraph/Blockquote/etc one, and selected text would be enclosed with a <span class="xyz"></span> on render. Extending the RTF editor wouldn't be too much of an issue - it's already been solved in the main site editing facilities.

This thread is a very positive move - thank you for creating it, Snaedis! I hope it has already generated items on the devs schedule of works. I look forward to seeing this stuff implemented, especially the accordion functionality and better control over the rendering, whether by direct HTML editing or via a more flexible tagging dropdown.

0 Upvotes