Installing and customizing the Featured Articles extension

Sometimes, you want to show an article list filtered by a certain label. Our extension allows you to do that and show that list on any Help Center page.

At Lotus Themes, we offer an elegant and user-friendly way to show these forms: as tiles.
Now your customers will see all available forms in a convenient and modern way. Additionally, you can add an icon to each ticket form tile so your Submit a Request page will look even better.

Installation Usage
  1. Unpack the downloaded zip file. There will be the following files:

    • lotus-featured-articles.js
    • Readme.txt
  2. In Guide, click on the Customize design icon in the sidebar. The Theming center page opens.

  3. Click the theme you want to edit to open it.

  4. Click the Edit code button.

  5. In the Assets section, click Add asset, then browse to select your files.

    Select the lotus-featured-articles.js file from unpacked zip.  The files are added to your list of asset files.

  6. In your theme code configuration page under the templates directory, click the document_head.hbs file.

  7. In the document_head.hbs file, paste the following snippet:
    <script src="{{asset 'lotus-featured-articles.js'}}"></script>
    
  8. In your theme code configuration page, click on a template where you would like to display the list. Paste the following code snippet:
    <div class="lt-container lt-info-block-container lt-mb-9 is-hidden" x-data="window.Theme.featuredArticles('faq', 5)" x-init="fetchArticles()" x-cloak data-deatured-articles>
      <div class="lt-container-inner">
        <h2 class="lt-fs-4 lt-fs-lg-2 lt-fw-bold">Featured articles</h2>
        <ul class="lt-row lt-row-cols-3 lt-list-unstyled">
          <template x-for="(article, index) in featuredArticlesList" :key="index">
            <li class="">
              <a :href="article.html_url">
                <span class="lt-fw-bold lt-d-sm-block lt-mb-2" x-text="article.name"></span>
                <span class="lt-fs-lg-6 lt-d-sm-block" x-text="LotusUtils.truncate(article.body, 100)"></span>
              </a>
            </li>
          </template>
        </ul>
      </div>
    </div>
  9. Click Publish.

Extensions Bundle

Get 6 most popular extensions for your help center with a total price of $1,218 for $699 only.

  • Side Navigation
  • Prev Next Buttons
  • Table of Contents
  • Community Hot Posts
  • Alerts
  • Server Status
Learn More
Did this answer your question?
Still can’t find what you’re looking for?

Hire an expert

Our consultants and developers are Zendesk Guide certified.
Free up your time for your business while we take care of your help center.

Get a Quote

Ask a question

Not sure how something works or how to make changes?
Don’t worry, we’ll answer all your questions.

Contact Us