---
title: Receipts
tags:
- web-archives
layout: post
---

The Webrecorder team recently [announced](https://webrecorder.net/2022/11/10/showing-provenance-on-replaywebpage-embeds.html) a new feature that lets you  embed web archives into your own pages with a bit of JavaScript and a [WACZ](https://specs.webrecorder.net/wacz/latest/) 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](https://www.nytimes.com/live/2022/11/11/world/ukraine-war-news-russia-updates) that I archived using [ArchiveWebPage](https://archiveweb.page/) into my "Random" collection which I've also got stored on Amazon S3 at [https://edsu-webarchives.s3.amazonaws.com/random.wacz](https://edsu-webarchives.s3.amazonaws.com/random.wacz).

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

<br>

The display above was created with this bit of JavaScript and HTML that I put into the [Markdown](https://raw.githubusercontent.com/edsu/inkdroid.org/main/_posts/2022-11-11-receipts.md) for this post (I'm still using the Jekyll static site generator).

```html
<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:

```html
<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/" />
```

<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"
  coll="2022-20-12-random"
  replayBase="/js/replaywebpage/" />

<br>

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](https://archiveweb.page) and importing it.