KB User's Guide - API - Using JavaScript to Embed KB Content

This document provides examples of JavaScript code that can be used to embed all or part of a KnowledgeBase (KB) document into another website or web page, such as a page hosted on a WordPress site.

What Can I Display Using the API?

To embed KB document content, we will be using the Articles API. The technical details for this API service can be found here: KB User's Guide - API - View / Search Articles (GET)

The following key content areas are available through the Articles API and can be included as needed:

Doc ID
Title
Keywords
PageHeader
Summary
Body
PageFooter

Additional data elements that can also be displayed through the API as needed:

Owner
Last Updater
Date/time of creation
Date/time of last update
Date/time of last review
Date/time of activation
Date/time of expiration
OwnerGroup

How Do I Display It On My Website?

Determine which content from your KB document you would like to display on your website. You will also need to identify the corresponding API field names, as these are the values you will reference when configuring your implementation. The tables below show how the content fields listed above are represented within the API.

Document Content Fields
Name in KB Admin Tools	Name in API
Doc ID	id
Title	title
Keywords	keywords
PageHeader	header
Summary	summary
Body	body
PageFooter	footer

Document Metadata Fields
Name in KB Admin Tools	Name in API
Owner	owner
LastUpdater	updater
Created	created
Updated	updated
Reviewed	reviewed
Activation	activation
Expiration	expiration
Group	ownerGroup

If your website does not currently load a jQuery file, insert the following within the <head> tag of your website (or wherever you have been instructed to enter JavaScript):
```
<script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
```
Just below this (still inside the <head> tag), you will add some custom JavaScript that will:
1. call the desired article
2. pull the content from the fields you specify
3. insert that content into an HTML element with a specified ID or class
4. display an error message if the API call fails for any reason
In the example below, we are:
1. calling the KB document 79005, which is available under https://kb.wisc.edu/test/
2. returning the content (referred to as "data" in JavaScript) from the title, body, and created fields
3. placing the data into HTML elements with the IDs kb-title, kb-body, and kb-created, repectively
4. inserting an error message into the kb-body element if the KB document fails to load
Only the highlighted text will vary with your specific use (though you may have more or fewer than three lines referencing the fields and elements, depending on how much or how little of the document data you plan to display).
```
$(document).ready(function() {

    $.ajax({

        url: "https://kb.wisc.edu/uw-kb-demo/api/v2/articles/79005"

    }).then(function(data) {

       $('#kb-title').append(data.title);

       $('#kb-body').append(data.body);

       $('#kb-created').append(data.created);

    });

    $( document ).ajaxError(function() {

       $('#kb-body').append("<h3>Something seems to have gone wrong...</h3><p>Please report the issue by clicking the <strong>Contact Us</strong> link at the bottom of page, and we'll make it right. Thank you!</p>")

    }); 

});
```
In the <body> of your webpage, locate the exact place where you would like to embed your content. Then, insert the desired elements with the classes or IDs you referenced in your JavaScript. These elements should essentially be empty HTML tags; when the page loads, the data from the API will load inside of them.

Using the above example, we will place the title in a Heading 2 (<h2>) tag, the body in a divider (<div>) tag, and the created date into a paragraph (<p>) tag.
```
<h2 id="kb-title"></h2>

<div id="kb-body"></div>

<p id="kb-created"></p>
```

When put together, the code for the entire webpage would look something like this:

<title>Webpage Title</title>

<script
  src="https://code.jquery.com/jquery-4.0.0.min.js"
  integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao="
  crossorigin="anonymous"></script>

<script>
  $(document).ready(function() {
    $.ajax({
      url: "https://kb.wisc.edu/uw-kb-demo/api/v2/articles/79005"
    }).then(function(data) {
      $('#kb-title').append(data.title);
      $('#kb-body').append(data.body);
      $('#kb-created').append(data.created);
    });

    $( document ).ajaxError(function() {    
      $('#description').append("<h3>Something seems to have gone wrong...<p>Please report the issue by clicking the <strong>Comment button below, and we'll make it right. Thank you!")
    });
  });
</script>




<h2 id="kb-title"></h2>

<div id="kb-body"></div>

<p id="kb-created"></p>

And the resulting content on the page would be displayed as follows:

What Would This Look Like On Another Website?

In practice, you can embed one or more KB documents throughout a much more robust webpage.

To see an example of how KB document content (in this case, content from three different documents) can be embedded within the broader context of an external webpage, open the following page in your browser: My Official Service Website

KB User's Guide - API - Using JavaScript to Embed KB Content

What Can I Display Using the API?

How Do I Display It On My Website?

What Would This Look Like On Another Website?

See Also