How do I embed FAQ content into web pages?

 

FAQ content can be flexibly embedded in other web pages. You'll need two things.

1. Indicate which FAQ content you want to embed. The options are outlined below.
2. Place the following script on your page one time, preferably as far down in the body as you can.

<script type="text/javascript">
  (function() {
    var x = document.createElement("script"); x.type = "text/javascript"; x.async = true;
    x.src = "//MYFAQ.ask.libraryh3lp.com/js/faq-embeddable/embed.js";
    var y = document.getElementsByTagName("script")[0]; y.parentNode.insertBefore(x, y);
  })();
</script>

Note: Substitute your own FAQ name for MYFAQ in the above JavaScript. If you use one of our regional servers, also remember to take that into account. For example, FAQs on our server in Canada look like this:

MYFAQ.ask.ca.libraryh3lp.com

Also if you are testing a page containing this script on your local disk (i.e. you aren't accessing the page from a server), you'll need to add http: or https: just before the // at the beginning of the x.src line.

 

---

Question and answer

<div class="lh3-faq-question" data-question-id="485"></div>

ID is the question ID. Find the question ID by viewing your FAQ and looking at the URL for the question you want to embed. The number at the end of the URL is the ID you want to use here.

 

No options. If no data-question-id, nothing happens.

Answer only

<div class="lh3-faq-answer" data-question-id="485"></div>

ID is the question ID. Find the ID by viewing your FAQ and looking at the URL for the question you want to embed. The number at the end of the URL is the ID you want to use here.

 

No options. If no data-question-id, nothing happens.

List of questions and answers (similar to what you see on your main FAQ page)

<div class="lh3-faq-questions"></div>

Defaults to top 20 viewed items, sorted by number of views.

Options:

• data-questions-offset: Start x questions into results where x is an integer in string format (e.g. "1")
• data-questions-limit: Only return x questions where x is an integer in string format (e.g. "1")
• data-questions-topic: Restricting questions by topic. integer in string format (e.g. "168"). Find the topic ID by viewing your FAQ and looking at the URL for the topic you want to embed. The number at the end of the URL is the topic ID.
• data-questions-order-by: String specifying how to order questions: last-updated, views, likes, dislikes, question (alphabetical using first letter in question)
• data-questions-direction: Sort order. Can be either "asc" or "desc". Default is desc.

Example. Show the 10 most viewed questions (and answers) for topic 180 and sort them by last-updated, in descending order (most recently updated first):

<div class="lh3-faq-questions" data-questions-limit="10" data-questions-topic="180" data-questions-order-by="last-updated" data-questions-direction="desc"></div>

FAQ search results

<div class="lh3-faq-results"></div>

Options:

• data-search-topic: Restrict results by topic where topic is the name of the topic. E.g. "widget"
• data-search-phrase: Search phrase. E.g. "survey"

Example. Show search results for the word "widget:"

<div class="lh3-faq-results" data-search-phrase="widget"></div>

Search box

<div class="lh3-faq-search"></div>

Options:

• data-form-target: Where results are displayed. Default is "_self". Use "_blank" to open results in new browser window/tab.
• data-submit-value: Text shown on the button. Default is "search"
• data-show-topic: Set to false to hide the topic drop-down.

Example: Change the search button text to "Search our FAQ" and hide the topic drop-down:

<div class="lh3-faq-search" data-submit-value="Search our FAQ" data-show-topic="false"></div>

Topic listing

<div class="lh3-faq-topics"></div>

Options:

• data-topic-format: "cloud" or "list". Defaults to list if not specified or bad value given.

Example. Show the topic listing in the form of a tag cloud:

<div class="lh3-faq-topics" data-topic-format="cloud"></div>

Styling Embedded FAQ Content

Content will typically be styled using CSS on larger web page that includes the embedded FAQ content.

For additional question/answer styling options, you can edit the question-fragment.html template for your FAQ within the Faqs tab of the admin site (Templates section). Using the template, you can do things like apply styling to the question separately from the answer.

Example. In the question-fragment.html template, you can make all of the question titles appear in H2 tags like this:

<h2>{{ question.question|safe }}</h2>

FAQ URL: