2020.2

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, can only be used in Web templates,
and cannot be output on Print or Email contexts (even though they 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" on page381). 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
Connect" on page402.
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()" on page793 and "loadjson
()" on page796) 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.
Page 412