This document provides an example of JavaScript that can be used to embed some or all of a KB document in another webpage, such as a page in a WordPress website.
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 - Articles
The following key content areas are all passed through the Articles API can be included as desired:
Other pieces of data that can be displayed via the API as needed are:
** This field will only be applicable if you are using the KB's dynamic content replacement feature on a document owned by another group.
First, you will want to decide exactly what content from your KB document you would like to display on your website. You will also need to know how these fields are represented within the API, as those are the names you will reference later on. The below table shows how the fields listed above are named in the API:
Name in KB Admin Tools | Name in API |
---|---|
Doc ID | id |
Title | title |
Keywords | keywords |
PageHeader | header |
Summary | summary |
Body | body |
PageFooter | footer |
Name in KB Admin Tools | Name in API |
---|---|
Alert banner | alert |
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://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Just below this (still inside the <head>
tag), you will add some custom JavaScript that will:
In the example below, we are:
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/test/api/v1/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.
<body> <h2 id="kb-title"></h2> <div id="kb-body"></div> <p id="kb-created"></p> </body>
When put together, the code for the entire webpage would look something like this:
<!DOCTYPE html> <html> <head> <title>Webpage Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { $.ajax({ url: "https://kb.wisc.edu/test/api/v1/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...</h3><p>Please report the issue by clicking the <strong>Comment</strong> button below, and we'll make it right. Thank you!</p>") }); }); </script> </head> <body> <h2 id="kb-title"></h2> <div id="kb-body"></div> <p id="kb-created"></p> </body> </html>
And the resulting content on the page would be displayed as follows:
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