FAQ content

Widgets: FAQ List / Single Full FAQ Entry

In this article

The FAQ List widget allows you to display customized lists of FAQs on another webpage. The FAQ lists include:

  • Most recent FAQs
  • Most popular FAQs
  • FAQs by topic
  • FAQs by keyword
  • A custom list of FAQs of your choice
  • Single full FAQ entry (question and answer)

Each list will display the question, last updated date, assigned topics, and total number of views. You can also include the question details, as well.

In addition, the FAQ List widget also allows you to display a single, full FAQ entry -- so instead of just the question and details, it'll also show the complete answer.

Example of an FAQ List widget displaying recent FAQs

Create an FAQ List widget

  1. Go to Admin > Widgets. (If you are an Admin user, go to Admin > Widgets & API.)
  2. Click on the  Create Widget button.

Getting to the Widgets and API page

Basic Widget Options

  1. Enter a descriptive name for your widget in the Widget Title field.
    • This does not display to the public -- it's just to help you identify it in the future.
  2. For the Display Type, choose whether you want to embed the entire FAQ list into a page or have it pop up by clicking a button.
    • If you select the Pop-up via button option, users will click a button to launch the FAQ list in a modal window.
    • You will be given the option to style this as either a button or side-tab, and customize the text of the button or tab.
  3. In the Header field, you can optionally enter text to display as a heading in the widget. This will appear above the list of FAQs.
  4. For the Content setting, select the FAQ List option.
  5. For the Open Links setting, select whether you want search results to open in the current or a new window.

FAQ Entries

  1. From the Type options, select which type of list you want to create.
    • Recent FAQ Entries: this will display the most recently updated FAQs, in descending order by date.
    • Popular FAQ Entries: this will display the most viewed FAQs, in descending order by total number of views.
    • FAQ Entries by Topic: this will display a list of FAQs assigned to a specific topic. You will be able to sort the list by the last updated date or total number of views.
    • FAQ Entries by Keyword: this will display a list of FAQs assigned to a specific keyword. You will be able to sort the list by the last updated date or total number of views.
    • Custom FAQ Entries List: this will display a list of FAQs that you select. Just enter the ID numbers of the FAQs you want to display in the order in which they should appear. (You can find an FAQ's ID under Answers > FAQ Entries.)
    • Single Full FAQ Entry: this will display a single FAQ entry's question, details, and answer. Just enter the ID number of the FAQ you want to display. (You can find an FAQ's ID under Answers > FAQ Entries.)
      • When displaying a full FAQ entry, you will have the option of customizing its layout using a Template. For example, you could rearrange certain elements, remove certain elements, or modify an element's classes.
      • Leave this blank to just use the default template (which will be represented in the widget's preview area). Or, click the Fill field with default template link to view and customize it.
      • Click on the Template Information button for detailed instructions.
  2. Use the Group dropdown to select which group's FAQs to display, or select All Public to display FAQs from all public groups. (Not applicable to the Single Full FAQ Entry type.)
  3. Use the # Items to Show field to customize how many FAQs to display in the list. (Not applicable to the Custom FAQ Entries List or Single Full FAQ Entry types.)
  4. If you would like to display an FAQ's details below the question, select the Show Details Field checkbox. (Not applicable to the Single Full FAQ Entry type.)

Style and Appearance

  1. Leave the Use our CSS file checkbox selected to use the default LibAnswers styles for your widget.
    • If you deselect this option, you will need to provide your own custom CSS code to style the widget.
  2. Optionally, you can use the Custom CSS text box to add your own custom styles to your widget.
    • This can help you tweak the default styles, such as borders, font sizes, colors, etc.
    • If you disabled the Use our CSS file checkbox, you can add your own styles here.
    • Do not enclose your CSS rules between <style></style> tags. Just enter the rules themselves.

Save and Preview

  1. Once you've made all of your customizations, click the Save button to create your widget. 
  2. To preview how your widget will look to the public, click on the Refresh Preview button.
    • The preview widget is completely functional, so feel free to take it for a spin!
  3. If you're happy with the changes, click on the View Embed Code button to view the widget's HTML code.
    • This is the code you'll need to add the widget to your own site.
    • If you want to use this widget in your LibGuides, there's no need to copy the embed code! Simply edit your guide in LibGuides and add a new LibAnswers content item.
    • If you selected the Embedded in the page display type, the Alternate Method will provide you with a direct URL for your FAQ list. This will allow you to link to a standalone page containing your list, or display it inside of a simple <iframe> element.
  4. When all finished creating your widget, click the Back to Widget List button to return to the Widgets & APIs page.

FAQ List widget options 

Managing your LibAnswers widgets

Each widget you create is saved, allowing you to make changes to it over time without having to completely replace it with a new one. For example, you could easily switch an FAQ List from a Recent FAQ Entries list to an FAQs by Topic list. All you need to do is edit the widget, change the list type options, and save. It'll automatically update the widget everywhere it's embedded.

  1. Go to Admin > Widgets. (If you are an Admin user, go to Admin > Widgets & API.)
    1. Click on any column heading to sort the list by that column in ascending order. Click it again to switch to descending order.
    2. Use the pagination buttons to navigate between multiple pages of widgets.
    3. To view any widget's embed code, click on its code () icon in the Actions column.
    4. To create a copy of any widget, click on its copy () icon in the Actions column.
      • This will create an exact replica of the widget, owned by you.
      • Changes you make to the copy will not affect the original.
    5. To edit a widget's settings, click on its edit () icon in the Actions column.
      • Please note: once you save changes to a widget, they will be reflected everywhere the widget is being used.
      • If you do not want to change the original, consider creating a copy instead.
    6. To delete a widget, click on its trash can () icon in the Actions column.
      • USE CAUTION: this will permanently delete the widget and cannot be undone.
      • If the widget is currently being used on a webpage, it will no longer display.
      • Admins can delete any widget; however, Regular users can only delete the widgets they created.

Options for managing widgets