Embedding multiple DocumentCloud notes

multiple_note_embed.html

<!-- The page DOM needs a container for each note, uniquely identified as `DC-note-{note_id}`. These can go anywhere in your page, though, so long as it's BEFORE the JavaScript below. -->
<div id="DC-note-{first_note_id}" class="DC-note-container"></div>
<div id="DC-note-{second_note_id}" class="DC-note-container"></div>
<div id="DC-note-{third_note_id}" class="DC-note-container"></div>

<!-- Only include the loader once; this and the other script tag should go at/near the bottom of the page. -->
<script src="//s3.amazonaws.com/s3.documentcloud.org/notes/loader.js"></script>

<script>
  // Load each note individually.
  dc.embed.loadNote('//www.documentcloud.org/documents/{document_slug}/annotations/{first_note_id}.js');
  dc.embed.loadNote('//www.documentcloud.org/documents/{document_slug}/annotations/{second_note_id}.js');
  dc.embed.loadNote('//www.documentcloud.org/documents/{document_slug}/annotations/{third_note_id}.js');
</script>


<!-- Here's what the above would look like in practice: -->
<div id="DC-note-53674" class="DC-note-container"></div>
<div id="DC-note-79590" class="DC-note-container"></div>
<div id="DC-note-202703" class="DC-note-container"></div>
<script src="//s3.amazonaws.com/s3.documentcloud.org/notes/loader.js"></script>
<script>
  dc.embed.loadNote('//www.documentcloud.org/documents/282753-lefler-thesis/annotations/53674.js');
  dc.embed.loadNote('//www.documentcloud.org/documents/282753-lefler-thesis/annotations/79590.js');
  // Note that this next note is from an entirely different document; that's no problem, just make sure you use the full note URL as provided by the embed wizard
  dc.embed.loadNote('//www.documentcloud.org/documents/1659580-economic-analysis-of-the-south-pole-traverse/annotations/202703.js');
</script>