Zotero provides a great way to create and manage bibliography – however, sometimes it’s necessary or convenient to display bibliographic on a web page, selected and organized according to different subjects. We wanted to create an annotated bibliography and publish it using Scalar so that it could include other content, images, layout and design. We also wanted to use Zotero to manage the actual bibliography and notes. Below, we describe how to insert javascript into a Scalar page so that it will include bibliography (and notes) drawn from Zotero, using Zotero tags as subject labels.

Set Up
You will need a Zotero account/group, your User ID, and an API Key with library access and notes access. You can create an API private key and see your User ID on the “Feeds/API” pane of the Zotero Settings page on zotero.org. Make note of the key (a long string of random letters and numbers listed in the second column of the table in the “Feeds/API” pane), and your user id (a 7- or 8-digit number listed above the table in the same pane). Make sure that your key has read only permissions.

Classify your citations in Zotero using tags
Think of a single word or short phrase to identify which citations from your Zotero library you would like to display together on your Scalar page, e.g., if my Scalar page will list all my bibliographic items on Constantinople, my word might be simply “constantinople”. Go through your Zotero library and add this word as a tag to the citations you would like to display on the page. Write annotations for each citation by adding one or more notes in Zotero. In my example, I would have a set of citations tagged as “constantinople,” each with a note providing an annotation.

Scalar page with HTML for inserting bibliography

Create your page in Scalar
Create a Scalar page as you normally would, and when you are done, switch to the “HTML” tab of the editor. Find a place in your page where you would like to have your bibliography. Copy the following HTML and place it there:

<div id="citations">[your_tag]</div>

Replace the [your_tag] content with the tag you chose for your citations. In our example, this would read

<div id="citations">constantinople</div>

Adding custom javascript to a Scalar page.

Next, scroll down and open the “Style” section of the Scalar editor. You should see several text boxes, one of which is called “Custom Javascript”. In this text box, paste the following code, replacing the bold text in the first two lines with your API key and User ID from Zotero. Don’t delete the quotation marks:

var apikey = "0loZ2XwYQBtp1dQ0cvREVRiE";
var user = "1599821";

var baseURL = "https://api.zotero.org/users/"+user+"/items/";
var baseParam = "?key="+apikey;


function get_data_for_tag() {

	var id = $("#citations").text();
	$("#citations").html("");

	var url = baseURL+baseParam+"&tag="+id+"&format=json&include=bib&sort=creator";

	$.get(url, null, function(data, status) {
		if(status == "success") {
			$.each(data, function(index, entry) {
				var citation = entry['bib'];
				var zoterokey = entry['key'];
				$().add(citation).attr("entry", zoterokey).appendTo("#citations");
			});

			$("#citations div").each(function(index, element) {
				var url2 = baseURL+$(element).attr("entry")+"/children"+baseParam+"&format=json&include=data";

				$.get(url2, null, function(data, status) {
					$.each(data, function(index, note) {
						$().add("<p>"+note['data']['note']+"</p>").css("margin-left", "2em").appendTo(element);
					});
				});
			});
		}
	});
}

$(document).ready(get_data_for_tag);

Once you have finished with the above steps, press “Save”, and your bibliography should appear in the Scalar page after a few seconds; each citation will be followed by the notes associated with the item in Zotero. If it is not working, you may see your tag word in the text of the page instead. In that case, you should recheck the API key, username, tagging in Zotero, and make sure that there are no changes to the javascript code that may have introduced syntax errors.

Note that as currently written, you can only have one javascript call per page, but you can include more than one “category” of items by putting a list of tags in the HTML element that triggers the javascript.

For example:

<div id="citations">constantinople || rome</div>

would create a bibliography containing Zotero citations that are tagged with the term constantinople as well as citations that are tagged with the term rome.

It’s possible to modify and improve the javascript to handle multiple bibliographic sections in one page.

This post as well as the javascript example code by Carlos Rotger ’17.
Also of interest: Using the Zotero API to Render Formatted Bibliography on a Webpage