Homepage look and feel

Homepage Overview

Your knowledge base's homepage is the initial landing page that readers will see if they go to your default link. Usually, the homepage includes things like customer support contact information, announcements, or a description of what the knowledge base contains. You can also show a list of newest and most popular articles!

There are two places you can edit your homepage:

  1. The homepage editor (Knowledge Base > Home Page), which provides a WYSIWYG editor experience (used most often in older knowledge bases):
    Sample homepage template
  2. The Custom HTML for the home page (Settings > Style, Custom HTML > Home Page), which accepts raw HTML and is used more often in newer knowledge bases. The text entered in the editor of Knowledge Base > Home Page gets inserted where the homepage("body") template is here:
    Sample homepage Custom HTML

Knowledge bases created on or after October 2022 use the Settings > Style > Custom HTML > Home Page for most styling. Knowledge bases created prior to October 2022, or created from copies of knowledge bases created before then, may use Knowledge Base > Home Page or a combination of the two.

If you are editing Settings > Style > Custom HTML > Home Page, the homepage("body") template mergecode must appear in the Custom HTML for the Home Page, even if Knowledge Base > Home Page is empty.

In Knowledge Base > Home Page, why does my home page look different in the editor than it does live?

The WYSIWYG editor will not necessarily pull in all of your Custom CSS or any code-based formats that run in your live knowledge base. We recommend using the Preview button and/or saving and reloading the homepage to make sure things are looking as they should be.

Can I style my home page separately from everything else?

Yes you can. For Custom CSS rules, prepend your rules with the homepage class to ensure they only apply on the homepage: .hg-home-page

Change the welcome text on my home page

By default, your new knowledge base will display a title at the top saying "Welcome to...." with the knowledge base name after it. We populate this text based on the name you initially picked out for your knowledge base.

If you want to change that text, there are a couple different ways to do it.

If you just want to update the portion that comes after "Welcome to...": that text is based on the name of your knowledge base as it's defined in Settings > Basic. If you want to rename your knowledge base completely (which will also update that welcome text):

  1. Go to Settings > Basic.
  2. Update the Knowledge base name.
  3. Be sure to Save your changes.

If you want to update the "Welcome to..." text in any other way:

  1. Go to Knowledge Base > Home Page.
  2. Edit the Home Page Title text.
  3. You can Preview your changes to be sure you like them.
  4. Then Save once you're done.

(You can also Remove the homepage welcome text completely if you so choose!)

That didn't work...

If editing the Home Page Title in Knowledge Base> Home Page doesn't make any changes in your knowledge base, that generally means someone's already customized your home page a bit.

In this case:

  1. Go to Settings > Style.
  2. Below the preview pane, be sure Custom HTML is selected.
  3. In the Custom HTML dropdown, select Home Page.
  4. Our default layout includes the title in an h1 with class="hg-article-title xcolor", and someone may have edited the text there. You can update the title to one of your choice here, too!
    Sample edited title in the default html
  5. You can Preview Changes to be sure you edited the right thing.
  6. Be sure to Save once you like the changes you've made.

Add a background image to my homepage

All new knowledge bases are created with no banner image on the homepage. If you'd like to add one, you can choose to replace it with:

  • A solid color
  • A color gradient
  • An image of your choice

Steps for each are outlined below.

Before you begin

These instructions assume you do not already have a banner image set up on your homepage. If you DO already have some type of banner image or colored section on your homepage, check out Change the background image on my homepage!

Before you begin, you'll need to know two things:

  • The color(s) you'd like to use for a solid color or color gradient background (hexes, RGB, or browser default names are fine) OR the image you'd like to use
  • Whether you're using our out-of-the-box Support Theme or a customized theme (read on in this section for more details)

To figure out if you're using our out-of-the-box Support Theme, first, be sure your knowledge base currently doesn't display a banner image of any kind on the homepage. If it does, head over to Change the background image on my homepage instead.

Then:

  1. Check if your Custom CSS begins with this section:
  2. If it does, you're probably using our Support Theme. You can follow any of the instructions below without making any adjustments.
  3. If it doesn't begin with that section, your knowledge base has a customized theme. You'll need to see if there's any CSS that includes .ko-homepage-top and adjust that CSS. You can use the instructions below as a guide, but you may need to make additional tweaks.

Replace with a solid color

You can add a solid color to your home page banner area:

  1. Go to Settings > Style.
  2. Below the preview pane, be sure Custom CSS is selected.
  3. Find the Home Page Top and General section of your Custom CSS, which is not quite halfway down:
  4. The changes we're making should all be within the .hg-minimalist-theme .ko-homepage-top section.
  5. Remove background: none;
  6. Copy the code below and paste it in where the background: none; was:
        background-color: #8bc34a; /* set background color for homepage banner */
        background-image: none; /* ensure no background image displays */
  7. Adjust the background-color value to be the hex or rgb value of your choice.
  8. Your final CSS should look like this:
  9. Optional: if you'd like the banner to extend slightly below the search box on the homepage, remove the padding-bottom line from that Custom CSS.
  10. Be sure to Save your changes.

Replace with a color gradient

What if you'd rather use a color gradient, instead of a solid color, for your banner area?

Don't worry, you don't have to know anything about image editing tools and don't have to generate it yourself. There's a built-in CSS function that can do color gradients for you--you just need to know which colors you want to feed in! You'll need at least two colors to pass in to the function; you can used browser default named colors (like red, yellow, blue) or hexes or rgb values for specific brand colors.

In our example below, we use browser default named colors.

To add a color gradient area to the top of your homepage:

  1. Go to Settings > Style.
  2. Below the preview pane, be sure Custom CSS is selected.
  3. Find the Home Page Top and General section of your Custom CSS, which is not quite halfway down:
  4. The changes we're making should all be within the .hg-minimalist-theme .ko-homepage-top section.
  5. Remove background: none;
  6. Copy the code below and paste it in where the background: none; was:
        background-image: linear-gradient(red, yellow); /* set background color gradient */
    
  7. Replace the linear-gradient values with your choice. You must have at least two colors but can have more, and you can also specify direction and/or degree. See the W3School's entry for linear-gradient function for more details.
  8. Your final CSS should look like this:
  9. Optional: if you'd like the banner to extend slightly below the search box on the homepage, remove the padding-bottom line from that Custom CSS.
  10. Be sure to Save your changes.

Replace with your own image

First, you'll need to find an image you'd like to use. This can involve some trial and error. Here are some tips to help you find a good image:

  • Ideally you want an image with a 5:1 aspect ratio, so it's much wider than it is tall.
  • Large overall dimensions tend to work better, around 1500px x 300px is a good place to start, though we have no set requirements.
  • The overall image file size should be relatively small. Ideally the image file size is in kilobytes (KB) not megabytes (MB) as large files will slow down your page load time.
  • If you have the choice between a .jpg and a .png file, choose the .png. PNG files tend to scale better with different screen sizes, whereas .jpg can become a little fuzzy at certain resolutions.
  • You might also choose a smaller image that would look nice as tiles in the background.

Once you have an image that you'd like to work with:

  1. Go to Library > Files and upload it to your File Library.
  2. Once you've uploaded your image file, find the URL. Copy it and paste it into a text editor or somewhere else--we'll need it later!
  3. Go to Settings > Style.
  4. Below the preview pane, be sure Custom CSS is selected.
  5. Find the Home Page Top and General section of your Custom CSS, which is not quite halfway down:
  6. The changes we're making should all be within the .hg-minimalist-theme .ko-homepage-top setting.
  7. Remove background: none;
  8. Copy the code below and paste it where the background: none; was:
        background-image: url("/css/images/tweed.png");
    
  9. Replace /css/images/tweed.png in row 1 with the URL you copied in Step 2 from the File Library. Keep the URL in "quotes". So, for example, here's what it might look like using a URL from our File Library:
  10. Optional: if you'd like the banner to extend slightly below the search box on the homepage, remove the padding-bottom line from that Custom CSS.
  11. Once you're happy with your image changes, be sure to Save your changes.
  12. If you have repeating or other issues, see the steps below to troubleshoot further.

Is your image repeating or stretched weirdly?

If your image is smaller than the space provided it will repeat itself or stretch oddly:

Sample screenshot with a single image repeating multiple times on the home pageSample of a repeating/tiled image

To fix this, you have two options:

  1. Add background-size: cover to your CSS. This will stretch the image to make it fit the overall dimensions. Sometimes this works well, but sometimes it distorts or cuts off parts of the image, so take a good look at the results. Your resulting CSS should look something like this:
    .hg-minimalist-theme .ko-homepage-top {
        background-image: url("https://d383cql5uq169w.cloudfront.net/app/image/pid/5de54a3d6e121c303e3ba653/id/610802bfba092864717b2431/n/sample-banner-image.png");
        background-size: cover;
        padding-top: 2em;
        padding-bottom: 0em;
    }
  2. If you don't like the look of background-size: cover, try adding background-size: 100% 100% to your CSS. This will try to stretch the image proportionately to fit the screen it's displayed on, which can be more elegant for lots of different devices and sometimes bypasses the off-center distortion of background-size: cover. Your resulting CSS should look like something like this, with a different :
    .hg-minimalist-theme .ko-homepage-top {
        background-image: url("https://d383cql5uq169w.cloudfront.net/app/image/pid/5de54a3d6e121c303e3ba653/id/610802bfba092864717b2431/n/sample-banner-image.png");
        background-size: 100% 100%;
        padding-top: 2em;
        padding-bottom: 0em;
    }

Change the background image on my homepage

If your knowledge base homepage already has some kind of banner image or colored background and you'd like to change it, you can change it to:

  • A solid color
  • A color gradient
  • An image

If your knowledge base homepage doesn't have any kind of background color or image, see Add a background image to my homepage.

Before you begin

If your knowledge base already has an image on the home page of some kind:

  1. Go to Settings > Style.
  2. Check your Custom CSS to see if it already has something set for .ko-homepage-top.
  3. If it doesn't, you should be able to follow the instructions below exactly.
  4. If it does, you'll need to adjust the CSS. You can use the instructions below as a guide.

Replace with a solid color

You can add a solid color to your home page banner area:

  1. Go to Settings > Style.
  2. Below the preview pane, be sure Custom CSS is selected.
  3. To add a solid background color, copy the code below and paste it anywhere into the Custom CSS editor:
    .ko-homepage-top {
        background-color: #8bc34a; /* set background color for homepage banner */
        background-image: none; /* ensure no background image displays */
    }
  4. Replace the background-color hex in row 2 with a color of your choice.
  5. You can use Preview Changes to see the difference.
  6. Be sure to Save your changes once you're done.

Replace with a color gradient

To replace the background image with a color gradient:

  1. Go to Settings > Style.
  2. Below the preview pane, be sure Custom CSS is selected.
  3. Copy the code below and paste it anywhere into the Custom CSS editor:
    .ko-homepage-top {
          background-image: linear-gradient(red, yellow); /* set background color gradient */
    }
  4. Replace the linear-gradient values with your choice. You must have at least two colors but can have more, and you can also specify direction and/or degree. See the W3School's entry for linear-gradient function for more details.
  5. You can use Preview Changes to see the difference.
  6. Be sure to Save your changes once you're done.

Replace with your own image

First, you'll need to find an image you'd like to use. This can involve some trial and error. Here are some tips to help you find a good image:

  • Ideally you want an image with a 5:1 aspect ratio, so it's much wider than it is tall.
  • Large overall dimensions tend to work better, around 1500px x 300px is a good place to start, though we have no set requirements here.
  • The overall image file size should be relatively small. Ideally the image file size is in kilobytes (KB) not megabytes (MB) as large files will slow down your home page load time.
  • If you have the choice between a .jpg and a .png file, choose the .png. PNG files tend to scale better with different screen sizes, whereas .jpg can become a little fuzzy at certain resolutions.
  • You might also choose a smaller image that would look nice as tiles in the background.

Once you have an image that you'd like to work with:

  1. Go to Library > Files and upload it to your File Library.
  2. Once you've uploaded your image file, find the URL. Copy it and paste it into a text editor or somewhere else--we'll need it later!
  3. Go to Settings > Style.
  4. Below the preview pane, be sure Custom CSS is selected.
  5. Copy the code below and paste it anywhere into the Custom CSS editor:
    .ko-homepage-top {
        background-image: url("/css/images/tweed.png");
    }
  6. Replace /css/images/tweed.png in row 2 with the URL you copied in Step 2 from the File Library. Keep the URL in "quotes". So, for example, here's what it might look like using a URL from our File Library:
  7. You can Preview Changes to see the difference. If you have repeating or other issues, see the steps below to troubleshoot further.
  8. Once you're happy with your image changes, be sure to Save your changes.

Is your image repeating?

If your image is smaller than the space provided it will repeat itself:

Sample screenshot with a single image repeating multiple times on the home pageSample of a repeating/tiled image

To fix this, you have two options:

  1. Add background-size: cover to your CSS. This will stretch the image to make it fit the overall dimensions. Sometimes this works well, but sometimes it distorts or cuts off parts of the image, so take a good look at the results. Your resulting CSS should look something like this:
    .ko-homepage-top {
        background-image: url(/css/images/tweed.png);
        background-size: cover;
    }
  2. If you don't like the look of background-size: cover, try adding background-size: 100% 100% to your CSS. This will try to stretch the image proportionately to fit the screen it's displayed on, which can be more elegant for lots of different devices and sometimes bypasses the off-center distortion of background-size: cover. Your resulting CSS should look like something like this, with a different :
    .ko-homepage-top {
        background-image: url(/css/images/tweed.png);
        background-size: 100% 100%;
    }

Remove the homepage welcome text

By default, the title of your knowledge base will display above the search bar of your homepage in a "Welcome to...." statement.
Sample homepage welcome text

You can Change the welcome text on my home page, but in some cases you might want to remove it entirely. (For example, if you add a banner image that has your company name/logo in it already!)

To remove that welcome text completely, you'll delete one line of HTML from the Home Page Custom HTML template:

  1. Go to Settings > Style.
  2. Below the preview pane, be sure Custom HTML is selected.
  3. In the Custom HTML dropdown, select Home Page.
  4. Delete the line that says <h1 class="hg-article-title" >[homepage("title")]</h1> (in our default template, it should be the second line of code, but yours may look different):
  5. You can Preview Changes to see the updated look.
  6. Your custom HTML should now look something like this, and your title should be gone:
    Same code example, title removed
  7. Be sure to Save your changes once you're done.

Change the color of the homepage welcome text

By default, the color of the "Welcome to..." statement on the homepage (the homepage title) is set to a dark blue:

To change it to another color:

  1. Go to Settings > Style.
  2. Below the preview pane, be sure Custom CSS is selected.
  3. Take a look at the top of your Custom CSS section. If you see this:
    Jump to the "Update existing CSS" section below. If the Custom CSS section doesn't look like the above, you can likely just proceed with step 4 here. :)
  4. Copy the code below and paste it into your Custom CSS pane:
    .ko-homepage-top .hg-article-title {
        color: #000000; /* Update to use the color of your choice */
    }
  5. Replace the #000000 on the second row with the hex code or rbg value of your choice.
  6. You can Preview Changes to see the difference.
  7. Be sure to Save once you've got it looking the way you'd like.

Update existing CSS

If your Custom CSS included the "General structure" CSS in the screenshot above, you don't need to add any new CSS. You'll just need to update what's there.

  1. In Settings > Style, still in that Custom CSS pane, scroll about halfway down the pane until you find the Home Page Top and General section, which is just above the halfway point:
  2. Look for the third commented section here for "change default color for home page title":
  3. Update the color listed in that section (#1d284f) with the hex code or rgb value of your choice.
  4. Be sure to Save your changes once you're done!

Add category icons to your homepage category panels

By default, all new knowledge bases use category icons on their homepage. If you're using one of our older knowledge base themes, or you are using a knowledge base created from a copy of an older knowledge base, you may need to manually update your knowledge base to use category icons on the homepage.

There are two ways to use category icons in your homepage category panels:

  1. Use our pre-built merge code to do the work for you: This requires less work and technical knowledge, but it will change the HTML structure of your homepage, which may mean you'll need to update Custom CSS to style the panels the same way.
    We recommend starting with this approach, since it uses built-in functionality.
  2. Keep your existing styles and use a script (and some additional Custom CSS) to style your icons: This is a bit trickier but means you won't have to touch your current styles much.

We'll walk through each option in more detail below.

Use the merge code

To use the merge code, you'll need to update your homepage so that it's no longer using the [template("base-cats")] template.

If your knowledge base is actively being used, contact us to request a sandbox copy of your knowledge base to test this template in, since it will change the styles a bit!

To generate the automatic panels for your current homepage, a template for base-cats is used. This template is usually added in one of two places:

  • Knowledge Base > Home Page
  • Settings > Style, Custom HTML > Home Page
  1. Check each of these pages to see where [template("base-cats")] is referenced; you'll want to make the edits in the same place.
  2. Once you've found where the template is added, replace "base-cats" with "icon-cats". So your merge code should now look like:
    [template("icon-cats")]
  3. By default, the icon-cats template will:
    • Display all of your categories
    • Display 4 categories per row
    • Won't display the category description
  4. If you're happy with that, you can Save now. Otherwise, you can adjust the merge code to change this behavior.
  5. To limit the number of categories it shows, set a max value by adding a comma after icon-cats and adding max=# (no spaces!). For example, this merge code will limit the number of categories displayed to 8:
    [template("icon-cats,max=8")]
  6.  To adjust the number of categories displayed per row, set a col value by adding a comma after icon-cats and adding col=# (no spaces!). For example, this merge code will display 3 categories per row instead of the default 4:
    [template("icon-cats,col=3")]
  7. To show the category description below the category's icon and title, add a comma after icon-cats and add desc=1 (to show descriptions):
    [template("icon-cats,desc=1")]
  8. You can use any combination of these settings together, too. This merge code will display a total of 9 categories even if there are more, and will display them in rows of 3 with the category descriptions shown:
    [template("icon-cats,max=9,col=3,desc=1")]
  9. You can use the Preview option to get a sneak peek of how that will look.
  10. Once you've finished making changes, be sure to Save them.

If you're using the default styles on the home page, that will shift the home page from having 3 categories per row with this styling:

To having 4 categories per row with this styling:

Styling the panels

If you have Custom CSS already applied to your homepage category tiles, that CSS won't generally work on the icon-cats template, since it constructs the HTML and CSS classes differently.

In the base-cats format, the row of category tiles is put within a div class="category-list" with divs for faq-cat-panel-container and faq-cat-panel, something like this:

Most of the Custom CSS to style these is applied to the "faq-cat-panel" div, which handles background, border, text alignment, and more.

Once you switch to icon-cats, the format changes significantly:

  • The category-list div picks up two extra classes (panels and colx, where x is replaced with the number of columns specified in the merge code)
  • We get rid of the extra faq-cat-panel-container entirely 
  • The panel faq-cat-panel class changes to cat-icon-panel
  • The div also includes a div for category-icon
  • The cat-icon-panel gets a title set, which helps with accessibility

The default styles we use for the icon-cats classes are:

.cat-icon-panel {
    border: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: none;
    padding: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: all .2s ease-in-out;
    backface-visibility: hidden;
}

.category-icon {
    height: 100px;
    transition: all .2s ease-in-out;
}

.hg-minimalist-theme .cat-icon-panel .category-header, 
.cat-icon-panel .category-header {
    font-size: 18px;
    color: #1d284f;
}

.cat-icon-panel .category-header {
    text-align: center;
}

.cat-icon-panel:hover {
    transform: scale(1.01) translateZ(0);
    box-shadow: 2px 4px 4px #aeaeae;
}

.cat-icon-panel:hover .category-icon {
    transform: scale(1.10);
}

You can copy these and paste them into your Custom CSS and start tweaking them to do your styles.

Updating your existing CSS

Alternatively, you can try to update your existing CSS in-place. This will take some trial and error, but here are some tips:

  • If you have any CSS that is setting the .faq-cat-panel-container width, you should be able to remove this completely. We no longer wrap the panels in a container to handle width; the icon-cats col= variable lets you set this width directly in the merge code. Be sure that your merge code contains the appropriate col= setting to mimic this width CSS.
  • If you have any existing CSS specifying that .faq-cat-panel-container or .faq-cat-panel use flex (or any of the flex attributes), you should be able to remove that entirely. The icon-cats structure uses flex automatically.
  • If you have existing .faq-cat-panel styles, try copying that CSS and adding it to the .cat-icon-panel class.
    • For example, if I have this CSS in my existing knowledge base:
    • I can add a comma and add the same selectors but replace .faq-cat-panel with .cat-icon-panel:
    • Changes to the base styles for the .cat-icon-panel as well as the h3 within them should be fairly easy to update using this method.
  • You may need to add new :hover styles for .cat-icon-panel:hover and .cat-icon-panel:hover .category-icon rather than updating existing styles for .faq-cat-panel:hover, depending on how the existing CSS was formatted. You can use the default CSS in the previous section as a base and compare that with your current CSS for hover effects to try to find the right combination.
  • Preview is your friend when testing these CSS changes, or ask our team for a sandbox copy of your current knowledge base to test in!

Use a script

If you don't want to use the merge code, you can use the base-cats template combined with a script to extract the icons. This is a little clunkier but does work.

We strongly encourage you to try the merge code approach though, as it is slightly more accessible for screen readers and much easier to work with for future styling needs.

You can add to your knowledge base's Custom HTML and Custom CSS to extract the category icons and display them!

Before you follow these steps, it's a great idea to have at least one category icon added to a category, so you can confirm the script is working and figure out what style tweaks might be necessary.

To get the category icons displaying on your home page:

  1. Go to Settings > Style.
  2. Below the preview pane, select Custom HTML.
  3. In the dropdown, select Home Page.
  4. Copy the script below and paste it into the bottom of the Custom HTML editing pane:
    <script>
    //This script runs on the home page and looks for category icons added to the category, extracts and displays them.
      $(function() { 
        $.each($(".faq-cat-panel-container"), function() { 
          var imageURL = $(this).find("input.category-icon-url").val();
          $(this).find(".faq-cat-panel").prepend("<div><img class='category-icon' src='"+imageURL+"' alt=''></div>");
        }); 
        $('.faq-cat-panel-container').show();
      }); 
    </script>
  5. Now select Custom CSS.
  6. Copy the CSS below and paste it into your CSS. The .category-icon class can be used to style your icons as you'd like--the style here is just an example. You can play with this more or talk to our support team for additional help getting the icons to appears as you'd like!
    /* Hide the home page category containers at first, so that the category icon script will display them once they run
    This prevents a blip where the panels show briefly without the icon */
    .hg-home-page .faq-cat-panel-container {
      display: none;
    }
    /* Style the category icon; you can use any variety of CSS here */
    .category-icon {
      max-width: 3em;
      padding-bottom: 0.5em;
    }
  7. You can preview your changes; just be sure you Save them once you're done.

Variations

If you'd like the alt text of the image to be populated by the category title, you can use this script instead:

<script> 
    //This script runs on the home page and looks for category icons added to the category, extracts and displays them.
  $(function() { 
    $.each($(".faq-cat-panel-container"), function() { 
      var imageURL = $(this).find("input.category-icon-url").val();
      var catTitle = $(this).find(".category-header a").text();
      $(this).find(".faq-cat-panel").prepend("<div><img class='category-icon' src='"+imageURL+"' alt='"+catTitle+"'></div>");
    }); 
    $('.faq-cat-panel-container').show();
  }); 
</script>

Article Lists

KnowledgeOwl offers six article lists that you can use in your knowledge base to help readers find new, updated, popular, recently viewed, required, and relevant content. These lists are automatically generated. Four are added to your homepage or articles by default; the other three are optional lists you can choose to add!

To change the number of articles displayed in each list, see Article List Settings.

Pre-added lists

Popular Articles List

Our Popular Articles List displays articles with the most traffic. This will increase your readers' engagement and your ability to get them the most common answers they might need. Your home page is an excellent place to add this list.

New Articles List

Our New Articles List displays articles that have been recently created or published. Your home page is a great spot to place this list to help supply readers with the most up to date information!

Updated Articles List

Our Updated Articles List displays articles that have recently updated content. This will increase your readers' engagement and your ability to get them the most up-to-date answers they need. Your home page is an excellent place to add this list. Check out our documentation on the Updated Articles List to learn more. 

Related Articles List

Our Related Articles List is used in articles to display articles that have content related to the current article the reader is reading. This will increase your readers' engagement and the your ability to get them the answers they need.

Optional/Feature-specific lists

Favorite Articles List

For knowledge bases that use reader logins and have Article Favorites enabled, the Favorite Articles List will display the articles a reader has chosen to favorite.

Recent Articles List

For knowledge bases that use reader logins, the Recently Viewed Articles List displays the current reader's most recently viewed articles. This will help readers return to articles or categories they have recently viewed. Your home page or righthand column is an excellent place to add this list.

Required Articles List

For knowledge bases that use reader logins and have Required Reading enabled, the Required Articles List will display all articles marked as required. Readers can click to open articles to acknowledge them, or click the See more... link to navigate to the Required Reading page to view the complete list and see which articles they need to acknowledge.




New Articles List

Our New Articles List allows you to display articles that have been created or published most recently. This list is included by default on the homepage of all new knowledge bases.

How does it work?

KnowledgeOwl will search behind the scenes for the newest articles and display them within the list, with newest displayed at the top. Articles which have the New callout added to them will display before articles which do not have that callout.

A "See more..." link at the bottom of the list will take you to a full page of all New articles, located at /help/new-articles (or /home/new-articles or /docs/new-articles depending on which root path you've chosen). You can see ours here: https://support.knowledgeowl.com/help/new-articles 

Out of the box, this list will display 5 articles. If no articles are available, it will display the text "None". If more than 5 are available, it will include a "See more..." link.

You can choose to display up to 10 articles and can change the article list heading, the New Articles page heading, "None", and "See more..." text. To update any of the text, use the options in Tools > Customize Text in the Article Lists Knowledge Base Section. See Customize Text: Article Lists for more information.

Change number of articles in the list

By default, the 5 most recent articles will be displayed. You can change this to display between 1-10:

  1. Go to Settings > Basic.
  2. Scroll to the Article List Settings section.
  3. Click on the dropdown next to New Articles and select the number of articles you'd like the list to display (1-10).
  4. Be sure to Save your changes.

In our default themes, the New Articles List is already added to:

  • Your knowledge base home page
  • Your 404 error page
  • Your default right column HTML

If you'd like to add it somewhere else, or if you've customized the HTML and no longer see the list on the pages listed above, review the directions below to add it! You'll need this merge code: [template("new-articles")]

Add the New Articles List to all articles

You can place the new articles merge code in the HTML of all articles. Go to Settings > Style > Custom HTML and select Article. You can place the merge code after the article body merge code or in the hg-article-footer div.

Either of these locations will display at the bottom of each article.

You'll probably also want to add a header to display above the new article links as well and perhaps a div with a class so that you can style the list.

Something like the following should do:

<div class="new-articles">
 <h3>[translation("article-lists:new-articles")]</h3>
 [template("new-articles")]
 </div>

Add the New Articles List to individual articles

If you only want to display the New Articles List in certain articles you can place the new article merge code at the bottom of individual articles. To do so, edit the article and click the Code view in the upper left of the editor toolbar.

Scroll to the bottom of the article and paste the merge code.

You'll probably also want to add a header to display above the new article links as well and perhaps a div with a class so that you can style the list.

Something like the following should do:

<div class="new-articles">
 <h3>[translation("article-lists:new-articles")]</h3>
 [template("new-articles")]
 </div>
Pro-tip: If you do this often, you can create a snippet that holds the above HTML and insert the snippet into your article, instead!

Re-add the New Articles List to the right column of your Knowledge Base

If you've removed the New Articles List from the right column of your knowledge base, you can re-add it by copying the relevant HTML from Default Right Column HTML and pasting it into Settings > Style > Custom HTML > Right Column.

Re-add the New Articles List to your home page

If you've removed the New Articles List from your home page, you can re-add it to by copying and pasting the relevant HTML from Default Home Page Article HTML into either the code view of Knowledge Base > Home Page or into Settings > Style > Custom HTML > Home Page.

Updated Articles List

Our Recently Updated Articles List allows you to display articles that have recently updated content. This will increase your readers' engagement and your ability to get them the most updated answers they need. By default, we add this list to your home page but you can use it almost anywhere.

How does it work?

Wherever the updated articles merge code is used, KnowledgeOwl will search behind the scenes to pull a list of the articles with last modified dates, with the most recently updated at the top. Articles which have the Updated callout added to them will display before articles which do not have that callout.

A "See more..." link at the bottom of the list will take you to a full page of all Updated articles, located at /help/updated-articles (or /home/updated-articles or /docs/updated-articles depending on which root path you've chosen). You can see ours here: https://support.knowledgeowl.com/help/updated-articles 

Out of the box, this list will display 5 articles. If no articles are available, it will display the text "None". If more than 5 are available, it will include a "See more..." link.

You can choose to display up to 10 articles and can change the article list heading, the New Articles page heading, "None", and "See more..." text. To update any of the text, use the options in Tools > Customize Text in the Article Lists Knowledge Base Section. See Customize Text: Article Lists for more information.

Change number of articles in the list

By default, the 5 most recent articles will be displayed. You can change this to display between 1-10:

  1. Go to Settings > Basic.
  2. Scroll to the Article List Settings section.
  3. Click on the dropdown next to Updated Articles and select the number of articles you'd like the list to display (1-10).
  4. Be sure to Save your changes.

In our default themes, the Updated Articles List is already added to:

  • Your knowledge base home page
  • Your 404 error page
  • Your default right column HTML

If you'd like to add it somewhere else, or if you've customized the HTML and no longer see the list on the pages listed above, review the directions below to add it! You'll need this merge code:[template("up-articles")]

Add the Recently Updated Articles List to all articles

You can place the updated articles merge code in the HTML of all articles. Go to Settings > Style > Custom HTML and select Article. You can place the merge code after the article body merge code or in the hg-article-footer div.

Either of these locations will display at the bottom of each article.

You'll probably also want to add a header to display above the updated article links as well and perhaps a div with a class so that you can style the updated articles list.

Something like the following should do:

<div class="updated-articles">
 <h3>[translation("article-lists:updated-articles")]</h3>
 [template("up-articles")]
 </div>

Add the Recently Updated Articles List to individual articles

If you only want to display the updated articles list in certain articles you can place the updated article merge code at the bottom of individual articles. To do so, edit the article and click Code button in the upper left of the editor toolbar.


Scroll to the bottom of the article and paste the merge code.

You'll probably also want to add a header to display above the updated article links as well and perhaps a div with a class so that you can style the updated articles list.

Something like the following should do:

<div class="up-articles">
 <h3>[translation("article-lists:updated-articles")]</h3>
 [template("up-articles")]
 </div>
Pro-tip: If you do this often, you can create a snippet that holds the above HTML and insert the snippet into your article, instead!

Re-add the Updated Articles List to the right column of your Knowledge Base

If you've removed the Updated Articles List from the right column of your knowledge base, you can re-add it by copying the relevant HTML from Default Right Column HTML and pasting it into Settings > Style > Custom HTML > Right Column.

Re-add the Updated Articles List to your home page

If you've removed the Updated Articles List from your home page, you can re-add it to by copying and pasting the relevant HTML from Default Home Page Article HTML into either the code view of Knowledge Base > Home Page or into Settings > Style > Custom HTML > Home Page.

Popular Articles List

Our Popular Articles List displays articles with the most views. This will increase your readers' engagement and your ability to get them the most common answers they might need. By default, we display this on your home page.

How does it work?

Wherever the popular articles merge code is used, KnowledgeOwl will search behind the scenes to pull a list of the articles with the highest number of views (as displayed in the Popular Articles Report in Reporting > Dashboard), sorted with the most views at the top. You can also Reset article views in the Popular Articles report.

A "See more..." link at the bottom of the list will take you to a full page of all Popular articles, located at /help/popular-articles (or /home/popular-articles or /docs/popular-articles depending on which root path you've chosen). You can see ours here: https://support.knowledgeowl.com/help/popular-articles 

Out of the box, this list will display 5 articles. If no articles are available, it will display the text "None". If more than 5 are available, it will include a "See more..." link.

You can choose to display up to 10 articles and can change the article list heading, the New Articles page heading, "None", and "See more..." text. To update any of the text, use the options in Tools > Customize Text in the Article Lists Knowledge Base Section. See Customize Text: Article Lists for more information.

Change number of articles in the list

By default, the 5 most popular articles (those with the most views) will be displayed. You can change this to display between 1-10:

  1. Go to Settings > Basic.
  2. Scroll to the Article List Settings section.
  3. Click on the dropdown next to Popular Articles and select the number of articles you'd like the widget to display (1-10).
  4. Be sure to Save your changes.

In our default themes, the Popular Articles List is already added to:

  • Your knowledge base home page
  • Your 404 error page
  • Your default right column HTML

If you'd like to add it somewhere else, or if you've customized the HTML and no longer see the list on the pages listed above, review the directions below to add it! You'll need this merge code:[template("pop-articles")]

Add the Popular Articles List to all articles

You can place the popular articles merge code in the HTML of all articles. Go to Settings > Style > Custom HTML and select Article. You can place the merge code after the article body merge code or in the hg-article-footer div.

Either of these locations will display at the bottom of each article.

You'll probably also want to add a header to display above the popular article links as well and perhaps a div with a class so that you can style the list.

Something like the following should do:

<div class="pop-articles">
 <h3>[translation("article-lists:popular-articles")]</h3>
 [template("pop-articles")]
 </div>

Add the Popular Articles List to individual articles

If you only want to display the Popular Articles List in certain articles you can place the popular article merge code at the bottom of individual articles. To do so, edit the article and click the Code button in the upper left of the editor toolbar.


Scroll to the bottom of the article and paste the merge code.

You'll probably also want to add a header to display above the popular article links as well and perhaps a div with a class so that you can style the list

Something like the following should do:

<div class="pop-articles">
 <h3>[translation("article-lists:popular-articles")]</h3>
 [template("pop-articles")]
 </div>
Pro-tip: If you do this often, you can create a snippet that holds the above HTML and insert the snippet into your article, instead!

Re-add the Popular Articles List to the right column of your Knowledge Base

If you've removed the Popular Articles List from the right column of your knowledge base, you can re-add it by copying the relevant HTML from Default Right Column HTML and pasting it into Settings > Style > Custom HTML > Right Column.

Re-add the Popular Articles List to your home page

If you've removed the Popular Articles List from your home page, you can re-add it to by copying and pasting the relevant HTML from Default Home Page Article HTML into either the code view of Knowledge Base > Home Page or into Settings > Style > Custom HTML > Home Page.

Recent Articles List

For knowledge bases using individual reader accounts, our Recent Articles List displays a reader's most-recently-viewed articles, topic display categories, and custom content categories. These links can help readers return to content where they left off, or content they frequently reference. Your home page is an excellent place to add this article list, though you can also add it to the right column of your layout, if you're using the right column.

This list only works with individual reader accounts. Knowledge bases with default access set to public, shared passwords, or shared IP addresses will not properly populate this list.

How does it work?

To set up, you'll add the merge code for the list where you'd like the information to be displayed. Behind the scenes, KnowledgeOwl will track up to ten of the most recently viewed articles, topic display categories, and custom content categories for each reader, and display those back to the reader in the article list.

Sample Recent Articles widget

Articles are displayed with a document icon; topic display and custom content categories are displayed with a folder.

The Recent Articles list will not show:

  • Default categories
  • Blog style categories
  • URL redirect categories
  • Articles set with URL redirects 

With topic display categories, if you have the option set to Override Article Links (so that opening an article always opens it within the topic display category), when a reader views an article in the category, both the topic display category and the article will appear in their recent articles list.

Setup

By default, the reader's 5 most recently viewed articles will be displayed. You can change this to display between 1-10:

  1. Go to Settings > Basic.
  2. Scroll to the Article List Settings section.
  3. Click on the dropdown next to Recent Articles and select the number of articles you'd like the list to display (1-10).
  4. Be sure to Save your changes.

We do not add this list to any section of your knowledge base by default.

If you'd like to add it, you'll add two merge codes into either Knowledge Base > Home Page or into the Settings > Style, Custom HTML of the relevant layouts:

  • [translation("article-lists:recent-articles")]: this merge code grabs the Recent articles list heading in Tools > Customize Text > Article Lists, making it so no one has to edit the code in the future to update the title
  • [reader("recent-articles")]: this merge code generates the individual reader's recent articles list

Different setups are discussed further below.

Add the Recent Articles List to your home page (Settings > Style)

Newer knowledge bases have their entire home page set in Settings > Style. If your knowledge base uses this layout, you can follow these instructions to add the Recent Articles List there. (If your knowledge base doesn't show any article lists in Settings > Style > Custom HTML > Home Page, follow the next set of instructions!)

  1. Go to Settings > Style.
  2. Below the Preview pane, be sure Custom HTML is selected.
  3. Select Home Page from the Custom HTML dropdown.
  4. Near the bottom of the code editor, find the div with class="homepage-widgets row".
  5. Copy one of the other article lists and paste that code in again.
  6. Replace the title merge code with: [translation("article-lists:recent-articles")]
  7. Replace the list merge code with:[reader("recent-articles")]
  8. Your code should now look something like this:
  9. You can Preview your changes to be sure they look right.
  10. Be sure to Save your changes once you're done!

Add the Recent Articles List to your home page (Knowledge Base > Home Page)

There are two ways to do this, depending on how your knowledge base is set up. If you're using our older home page:

  1. Go to Knowledge Base > Home Page.
  2. Copy one of the other home page lists and paste it in again.
  3. Replace the title with this merge code: [translation("article-lists:recent-articles")]
  4. Replace the merge code with:[reader("recent-articles")]
  5. Save.

Your home page might now look like this:

Sample Knowledge Base > Home Page layout with Recent Articles list added

Add the Recent Articles List to all articles

You can place the recent articles merge code in the HTML of all articles. To do so:

  1. Go to Settings > Style
  2. Click on the Custom HTML tab, and select Article from the dropdown.
  3. Click the Select a Merge Code dropdown. Find the Article List Merge Codes section and click on Recently Viewed Articles List.
  4. This will display the merge code. You can either copy and paste it where you like, or put your cursor where you'd like in the Custom HTML and click the Insert button.
  5. You can place the merge code one of two places:
    1. After the article body merge code (will place it at the bottom of the article, but above the horizontal line in our default themes):
    2. In the hg-article-footer div (will place it at the bottom of the article, below the horizontal line in our default themes:
  6. You'll probably also want to add a header to display above the recent article links and perhaps a div with a class so that you can style the list.
    1. For the header, I used the Customize Text merge code for Recent articles heading, so our section will always respect what's been set in Customize Text.
    2. You can see I included a "recent-articles" class for my div in both examples, which would let you write CSS to style this list differently from other lists, too!
  7. Once you're done adding the merge code, text, and any Custom CSS to style it, be sure to Save.

Add the Recent Articles List to individual articles

If you only want to display the recent articles list in certain articles, we recommend creating a snippet that includes the recent articles merge code and whatever additional formatting you'd like, and then adding that to the individual articles where you'd like the list displayed.

This helps standardize the appearance of the list, regardless of where it's added.

To do so:

  1. Go to Library > Snippets.
  2. Select the + Create New Snippet button.
    Select + Create New Snippet to begin
  3. Give your snippet a Snippet Name and Snippet Description.
  4. In the Content, create the layout you'd like for the list (usually a heading, etc.). Add the merge code for both the list and the list heading into it. Here's a sample:
  5. Once you're satisfied with your snippet, click Create.
  6. With the snippet created, you can add the snippet into any article using the Insert Snippet option in the editor.

Add the Recent Articles List to the right column of your Knowledge Base

Finally, you might decide to display the Recent Articles List in the right column of your knowledge base. To do so:

  1. Go to Settings > Style.
  2. Click on the Custom HTML tab and select Right Column from the dropdown.
  3. Click the Select a Merge Code dropdown. Find the Article List Merge Codes section and click on Recently Viewed Articles List.
  4. This will display the merge code. You can either copy and paste it where you like, or put your cursor where you'd like in the Custom HTML and click the Insert button.
  5. Once your merge code is added, you will likely want to format it similarly to other things in your right column. We usually just copy the div for one of the other sections, paste it in, and edit it to match. Here's an example:
  6. Once you've added a heading and any other styling, be sure to Save your changes.

Create a custom home page articles list

By default, your knowledge base comes with three default article lists on the home page:

You can also add a Recent Articles List to your home page. But what if you'd like to build your own list?

This article will teach you how to build a home page articles list that populates with articles assigned a specific tag, using an API Snippet. It can be useful for setting up Frequently Referenced articles, Quick Links, and so on.

Note: You must have at least one active API key in your account with ONLY GET permission to use this functionality. To retrieve / generate a KnowledgeOwl API key, have an account administrator go to to Your Account > API and create/verify that a GET-only API key exists.

Step 1: Create your tag and add it to articles

In order to have a list that pulls all articles with a particular tag, the tag needs to exist and needs to be assigned to articles.

You can create a tag any time on the fly by opening an article in edit mode and typing into the Tags section. Once you save, the tag is created and assigned to the article.

You can see all tags in your knowledge base by going to Library > Tags.

Step 2: Get your tag's ID

Once your tag has been created, you'll need to know its tag ID, which is a unique identifier for that tag. We use the ID here in case the tag is ever edited--the ID won't change even if the spelling of the tag does.

There are  few ways to get your tag's ID. The fastest way is to go the Tags Library and inspect the tag. We offer instructions on how to do that below. (If you have an API key and you're comfortable using it, you can make an API call to the tag endpoint find it.)

Getting the tag ID from the Tags Library

To get the tag ID from the Tags Library, we'll use your browser's built-in Inspect option to look at the code in the page.

  1. Go to Library > Tags.
  2. Right-click on the tag whose ID you want to get and select Inspect.
  3. This will open some element details for the tag in a different pane. The value you see is the tag ID:
  4. Copy and paste this tag ID somewhere for later.

Step 3: Create a snippet that looks up articles for your tag

Now the real fun begins. We'll create an API snippet that will pull the list of articles that have that tag assigned, so it can be displayed in a list on the home page:

  1. Go to Library > Snippets.
  2. Select the + Create New Snippet button.
    Select + Create New Snippet to begin
  3. Give your snippet a name. In this example, since I'm using the tipsandtricks tag, I'll call it tipsandtricks Articles.
  4. The Merge Code Name will be automatically generated from the snippet name. You can edit it if you'd like.
  5. Add a description so you remember what this snippet does.
  6. Click the WYSIWYG Editor dropdown next to Snippet Content and select Code Editor from the dropdown.
    Select Code Editor from the Snippet Content dropdown
  7. Once in Code Editor, copy and paste the code below into the editor:
    <ul class="list-unstyled stat-list" id="NAME">
    </ul>
    
    
    <script>
    $(function(){
        //get all articles inside 
        $.get('[ko_api(article|{"project_id": "%cur_kb_id%", "tags": {"$in":["YOUR-TAG-ID"]},"status":"published","_fields": ["url_hash","name"],"sort": {"name": 1}})]',
            function(data) {
                if(data && data.data && data.data.length > 0) {
                      $.each(data.data, function(index, article){
                        $("#NAME").append('<li><div><a href="/help/'+article.url_hash+'">'+article.name+'</a></div></li>')
                    });
                }
              }).fail(function(error) {
              //failed
        });      
    });
    </script>
  8. In row 1, where it says id="NAME", replace NAME with a label or name that makes sense for your list. Be sure you keep the quotes around it. So if I'm creating this for my tips and tricks, I might use id="tips".
  9. Use that same NAME in row 12, where it says $("#NAME"). Be sure to keep the quotes and the # in front of it. So if I used id="tips" for the first one, I'll use $("#tips") here.
  10. In row 8, replace YOUR-TAG-ID with the tag ID you copied in Step 3. Keep it in "quotes".
  11. In row 12, if your knowledge base URL ends in something other than /help (such as /docs or /home), you will also need to update the <a href="/help/' portion to have the correct location. Replace "/help' with "/home' or "/docs' as appropriate.
  12. Here is what my sample code looks like for my tipsandtricks tag (I did not need to update /help/ because that's what my knowledge base uses):
  13. Optional: if you'd like this list to only be displayed to certain groups, use the Restrict to Reader Groups checkboxes in the right panel to choose the groups to show it to.
  14. Once you've finished making changes, select the Create button to create and save your snippet.

Step 4: Test your snippet

To test that your snippet is working:

  1. Create a new article.
  2. Add the snippet to your article.
  3. Publish the article and view it. If your snippet is working, you'll see a list of the articles with the tag you used. If it's not working, be sure you have at least one API key, and be sure that the a href path matches your knowledge base. Reach out to our support team if you're having issues.

Step 5: Add your snippet to your home page

Now that all the architecture is built for the list, let's add it to the home page. How to do this depends on how your knowledge base has been customized already and where you'd like to add the list:

  • If you'd like to add the list to the Right Column of your home page, see "Update the Home Page Right column" below.
  • If you'd like to add the list to the main body of your home page:
    • Go to Settings > Style and look at the Custom HTML for the Home Page.
      • If there's very little content and you just see a reference to the [homepage("body")] template, then you'll need to follow the steps below for editing Knowledge Base > Home Page. This is the most common configuration. See "Update the Home Page Body template" below.
        Sample home page layout with homepage body template
      • If you see a lot of HTML formatting other widgets, etc., you'll want to edit Settings > Style, Custom HTML > Home Page directly. See "Update the Home Page Custom HTML" below.

Update the Home Page Right Column

If you want to add the new list into your Home Page Right column:

  1. Go to Library > Snippets.
  2. Click on the snippet you created for this list.
  3. Copy the snippet's Merge Code Value and paste it somewhere where you can find it.
    Copy the Merge Code Value
  4. Go to Settings > Style.
  5. Select Custom HTML > Right Column.
  6. Wherever you'd like to add the list, copy the code below and paste it into that HTML:
    <div class="panel panel-default right-col-panel custom-panel">
      <div class="panel-heading">List Title</div>
      {{snippet.mySample}}
    </div>
  7. In row 1, replace custom-panel with a label for this panel that makes sense (I used "tip-panel"). Be sure that you leave the closing quotation mark.
  8. In row 2, replace List Title with the title you'd like displayed (I used Tips & Tricks).
  9. In row 3, replace the {{snippet.mySample}} with the merge code you copied in Step 3.
  10. Save your changes.

Here's a sample of how I added this code into my right column:

Sample added to my right column. Note that I've given this the "tips-panel" class, added my title, and updated my snippet merge code.

Update the Home Page Body template

If you saw [homepage("body")] somewhere in your Home Page Custom HTML, you probably already have a home page that has some of our pre-built articles widgets on it. Rather than editing the Custom HTML directly, it is easier to edit the home page body template itself. To do so:

  1. Go to Knowledge Base > Home Page. It will likely look something like this:
    Default Home Page Body Layout
  2. You can either replace one of the existing article list templates or add another (if you add another, you may have to play around with formatting to get things to align well).
  3. Add a title for your new articles list (default settings for article lists are Heading 3).
  4. Place your cursor under the title. Then select the Insert Snippet control (two gear cogs icon) from the editor toolbar.
  5. Type in part of the name to find the snippet, then select it and select Insert Snippet.
    The Insert Snippet control in the editor
  6. You can Preview the changes if you'd like, but be sure you click Save to save them!

If something in the format doesn't look correct, you can switch to Code View here, copy the HTML for one of the other lists to ensure it matches, paste it, and then update it with the snippet merge code and title of your choice!

Update the Home Page Custom HTML

If your knowledge base is not using the [homepage("body")] template, you can add the snippet merge code for your API snippet directly into the Custom HTML. You'll need to reference the snippet's Merge Code Value:

  1. Go to Library > Snippets.
  2. Click on the snippet you created for this list.
  3. Copy the snippet's Merge Code Value.
    Copy the snippet's Merge Code Value
  4. Go to Style > Settings. Paste the merge code into an appropriate div, paragraph, etc., in the Custom HTML for your Home Page.

Use Cases

You can use lists like this to provide curated lists of content on your home page that will update dynamically based on a tag being added to or removed from articles. In internal knowledge bases, these can be a great way to put frequently-referenced articles on your home page. In software support knowledge bases, these can be a great way to highlight documentation from your latest release. We've also seen customers use these for Announcements.

You can replace all the out-of-the-box home page article lists, or just one, or add additional widgets (though you may have to play with formatting for more than 3 to look good).

Have you added a custom home page widget to your knowledge base? Share your use case with us!

Add a custom banner using built-in div styles

It can be helpful to add a banner or announcement to your homepage to draw attention to outages, changes in policy/procedure, or to highlight certain content. There are a number of ways to do this, but here we'll use a fairly straightforward approach: using your knowledge base's existing Div styles.

The fastest way to create this banner and get it looking exactly how you want is to use our built-in div styles in the article editor, create the banner exactly how you'd like, and then copy that raw HTML and paste it straight into your theme.

If that sounds intimidating, don't worry, let's walk through it step by step!

First things first: let's use the article editor to create and style the div we want to use.

  1. Open an article in edit mode (we find it easier to create a new article for this so it's empty of any other code, but do whatever you feel comfortable with!)
  2. In the editor controls, click the magic wand next to the text formatting controls:Built-in Div styles
  3. Select the div style you want.
  4. With your div added to the editor, type whatever text and use the regular editor controls to insert hyperlinks and other formatting.
  5. Then, click the </> button in the editor to switch to Code View.
  6. Copy the HTML code for the div you created. For example, mine looks a bit like this:
<div class="alert alert-success">Read our latest <a href="/help/release-notes">Release Notes</a>.</div>

Congratulations, you now have a fully-formed div in HTML format! Now we just need to add this into the homepage itself.

For this part:

  1. Go to Settings > Style
  2. Below the preview pane, be sure Custom HTML is selected.
  3. In the Custom HTML dropdown, select Home Page.
  4. This page is going to look a bit different depending on how you've customized your knowledge base, so you may need to play with positioning a bit to get the look you want.
  5. For our standard layout, most often we see people put an announcement banner below the search bar and above the category panels, so that's what we'll do in this example.
  6. To add the banner here, look for a section called  <div class="hg-article-body">:
    Find the Home Page hg-article-body div 
  7. We'll put our banner immediately after that, before the template for the icon-cats and homepage body.
  8. Add a new line between the hg-article-body div and the icon-cats template (or the homepage body template if that comes first in your Home Page HTML) and paste that code onto that line. So your Custom HTML should now look like a little like this (though your div is probably a bit different!):
  9. You can Preview your changes to be sure they look good. If you're comfortable with HTML, you can make tweaks here, or head back to the article editor to re-create your div.
  10. Once you like the look of it, be sure to Save your changes.

Alternatives

For those of you with more HTML skills, you can also design your own div rather than using the default styles of the call-outs. Create a div and specify a background color, padding, etc. You can include a graphic or icon, as well. So, for example, this code:

Sample div constructed from scratch

Produces this:

Read our latest COVID-19 Updates.

For simplicity's sake, we used in-line styles in the HTML example here. You can always use Custom CSS and classes.

Add a custom icon and header link on your homepage

Sometimes we have requests to add some kind of icon and text to the homepage to encourage people to jump to a particular category or resource. This can be a great way to highlight and encourage awareness of specific issues or content.

In this example, we walk through creating a snippet that contains a div with a FontAwesome icon, some text, and a link to content in your knowledge base. You can then add that snippet to your home page to display it.

This will produce something like this:

Sample icon + link

Create the snippet

  1. Go to Library > Snippets.
  2. Select the + Create New Snippet button.
    Select the + Create New Snippet button to begin
  3. Give your snippet a name and a Merge Code name. (Here, we use Breaking News for the name and breakingNews for the merge code).
  4. Add a Snippet Description, like "This snippet creates a Breaking News section for the homepage, with a life preserver icon, linked to our Breaking News category."
  5. Click the dropdown next to Snippet Content to select Code Editor.
    Select Code Editor from the Snippet Content dropdown
  6. Copy the code below and paste it into the editor window:
    <div class="homepage-callout-icon">
      <!--Adjust the URL below to point to the location you want to use -->
      <a href="/help/breaking-news">
        <!--FontAwesome icon. Can be replaced with code for other FA icons -->
          <i class="fa fa-life-ring" aria-hidden="true"></i>
        <!--Text you want displayed below the icon-->
        <div>Breaking News!</div>
      </a>
    </div>
    <style>
      /* Style for icon */
      .homepage-callout-icon i {
        max-width: 240px;
        color: #A1222F;
        font-size: 48px;
      }
      /* Style for hyperlink text */
      .hg-minimalist-theme div.homepage-callout-icon a {
        color: #A1222F;
      }
      
      /* For next section, choose one alignment and remove/comment out the other two
      Left is used as default */
      
      /* Center*/
      /*.homepage-callout-icon {
        text-align:center;
        margin: 20px 0;
      }*/
      /* Left */
      .homepage-callout-icon {
        display: inline-block;
        text-align:center;
        margin: 20px 0;
      }
      /* Right */
      /* .homepage-callout-icon {
        display: inline-block;
        text-align:center;
        margin: 20px 0;
        float: right;
      }*/
    </style>
  7. In row 3, change the href="/help/breaking-news" to reference the URL you'd like this section to point to. If it's within your knowledge base, you only need to use the relative URL (/help/, /home/, or /docs/ with the URL of the specific article or category).
  8. In row 5: we use a FontAwesome life preserver ring icon. You can change this:
    • Head to the free FontAwesome icons
    • Browse or search for an icon you'd like to use.
    • Click on it and copy the HTML it displays for the icon.
    • Replace the HTML in line 5 with the HTML you copied from FontAwesome.
  9. In Row 7: Update the text you want displayed with the icon by editing this line.
  10. In Row 14, change the color and size of the icon by adjusting the styles for .homepage-callout-icon i
  11. In Row 19, change the color of the text font by changing the color for div.covid-19 div
  12. Rows 22-42: Choose one of the alignment options and delete or comment out the other two. In our sample, we have used the Left alignment and commented out the other two.But you can change the commenting and delete the alignments you don't want.
  13. Optional: If you'd like the linked icon and text to be visible only to certain reader groups, check the boxes in the Restrict to Reader Groups section.
  14. When you're done making adjustments, click Create.

Here's a completed snippet using the "Center" align with a newspaper icon and text "Breaking News" and the colors changed to a dark blue:

Sample completed snippet using Center alignment 

Add the snippet to your home page

  1. Copy the Merge Code Value of the snippet.
  2. Go to Settings > Style.
  3. Below the preview pane, select Custom HTML.
  4. Select Home Page from the dropdown.
  5. Paste the merge code value where you'd like it to appear in your home page. This may take some trial and error, but we have a few suggestions:
    • For knowledge bases using search, to place the snippet below the search bar area but above the category panels, add it immediately after the hg-article-body div:
      Which will display here, using center alignment:Sample center alignment, inside hg-article-body
    • For home pages with no search, add it between the hg-article-title h1 and the hg-article-body div:

      Which will display here, using left alignment:
      Sample left alignment, between hg-article-title and hg-article-body
  6. Save your changes.