Loading content using a server's API
Content in a template is usually static (apart from being personalized) and part of the main text flow. It can also be located in a snippet (see Snippets).
It is also possible to include content that is served by another server. Many servers provide an API to fetch publicly available content from their site. That content may even be dynamic: the most recent blog posts on a Wordpress website, for example, or the current weather forecast for a certain city.
This topic explains how to retrieve content using a server's API and insert that content in a template.
Step 1: Getting the appropriate link
To request content from another server, you will need a link.
Some websites give the option to embed their content in your website by providing a link or the complete HTML. Youtube.com, for example, offers not only a link to share a certain video, but also the full HTML to embed that video in your website.
If that option is not available, you will have to build the link yourself. Find the server's API and look through it to get the exact endpoint and parameters that you need.
With many servers it is required to use an API key in the link; this key generally comes for free after you sign up to their website. The key will be part of the link that is used to make a request to the server.
Note: Pay attention to the service's Terms of Service. Many servers have limitations on the number of calls that can be made to them for free. Beyond these limits, their content will not show up in your template unless you purchase a business plan.
Step 2: Preparing the template
The next step is to set up a template. If you've got the HTML to embed content in your template you can paste that HTML on the Source tab (and skip Step 3).
Otherwise your template has to contain an element that can be replaced or followed by the remote content: an empty paragraph, for example, or a heading. If the element isn't unique in the template, give the element an ID.
Note that interactive content, such as an interactive map, cannot be used (even though it will show up in Preview mode!).
Step 3: Writing a script
The final step is to write a script that retrieves the content and inserts it into the template (see Writing your own scripts). Use the element or the ID of the element that you added in Step 2 as the script's selector. For information about selectors, see Selectors in OL Connect.
Tip: Select an element, then click on 'ID' in the Attributes pane, to create a script that has that element's ID as selector.
Retrieving content
Depending on the type of content that the remote server returns - HTML or JSON - you can use loadhtml(location) or loadjson(location) (see also: loadhtml() and loadjson()) to retrieve the content. The link that you selected in Step 1 should be passed to the function as a string. For example:
loadjson('https://blog.mozilla.org/wp-json/wp/v2/posts?per_page=5');If the returned content is JSON data, that data has to be wrapped in HTML before inserting it into the template. This is demonstrated in the example below.
Tip: Install the Postman application to preview JSON returned by an endpoint.
Tip: To load a JavaScript file (.js) or a style sheet (.css) you can use loadtext(). See loadtext().
Inserting content in the template
To insert the content after the selected element, use results.after(). To replace the element with the new content, use results.html() or results.replaceWith().
Example: recent posts
The following script loads five posts from Mozilla's blog and inserts their titles as links in a template. Mozilla's blog is a WordPress website. Since the WordPress REST API uses JSON as the response format, the loadjson() function has to be used and the received content has to be wrapped in HTML.
If the script's selector was h1 (a level one heading), the retrieved content would be inserted after each level one heading.
var postsObj = loadjson('https://blog.mozilla.org/wp-json/wp/v2/posts?per_page=5');
var html = '';
html = '<ul>';
for (var idx in postsObj) {
html += '<li><a href="' + postsObj[idx].link + '">' + postsObj[idx].title.rendered + '</a></li>';
}
html += '</ul>';
results.after(html);