The Webrecorder team recently announced a new feature that lets you embed web archives into your own pages with a bit of JavaScript and a WACZ file. The embed includes a “receipts” pane that includes provenance information for the archive: when the resource was created, what the archive was created with, a public key for the creator, whether the WACZ is valid, the size, and a link to easily download the archive.

For example, here’s a NYTimes article that I archived using ArchiveWebPage into my “Random” collection which I’ve also got stored on Amazon S3 at https://edsu-webarchives.s3.amazonaws.com/random.wacz.

The display above was created with this bit of JavaScript and HTML that I put into the Markdown for this post (I’m still using the Jekyll static site generator).

<script src="https://cdn.jsdelivr.net/npm/replaywebpage@1.7.2/ui.js"></script>
<replay-web-page 
  style="height: 600px"
  embed="replay-with-info"
  source="https://edsu-webarchives.s3.amazonaws.com/random.wacz"
  url="https://www.nytimes.com/live/2022/11/11/world/ukraine-war-news-russia-updates"
  replayBase="/js/replaywebpage/" />

The key things to note here are the loading of the ReplayWebPage JavaScript library, and then using the newly available replay-web-page component to add the archive to the page.

This WACZ file is called “random” because it actually contains some other things that I’ve randomly collected using ArchiveWebPage. So it’s possible to embed something else by using a different url from the archive:

<replay-web-page 
  style="height: 600px"
  embed="replay-with-info"
  source="https://edsu-webarchives.s3.amazonaws.com/random.wacz"
  url="https://www.facebook.com/georgeclintonpfunk"
  replayBase="/js/replaywebpage/" />

Down at the bottom of the receipts pane is a link to download my WACZ file. Which you could replay by going over to ArchiveWebPage and importing it.