|
| 1 | +--- |
| 2 | +layout: default |
| 3 | +title: Embedding ReplayWeb.page |
| 4 | +nav_order: 2 |
| 5 | +permalink: /docs/embedding |
| 6 | +--- |
| 7 | + |
| 8 | +## Embedding Web Archives with ReplayWeb.page |
| 9 | + |
| 10 | +A key goal of ReplayWeb.page is to make embedding web archives into other sites as easily as possible, |
| 11 | +as easy as it is to embed PDFs, for example. |
| 12 | + |
| 13 | +ReplayWeb.page provides the `<replay-web-page>` HTML tag to support embedding. |
| 14 | + |
| 15 | +Embedding requires just two parts, loading the frontend ui and the backend service worker. |
| 16 | + |
| 17 | +For example, to embed a web archive stored on s3 at `s3://webrecorder-builds/warcs/netpreserve-twitter.warc` |
| 18 | +(shorthand for: `https://webrecorder-builds.s3.amazonaws.com/warcs/netpreserve-twitter.warc`), you can first add |
| 19 | +the following snippet to your HTML page: |
| 20 | + |
| 21 | + |
| 22 | +{: .bg-blue-000 .text-grey-lt-000 .cap-header} |
| 23 | +my-web-archive-embed.html |
| 24 | + |
| 25 | +```html |
| 26 | +< script src= "https://unpkg.com/[email protected]/ui.js"></ script> |
| 27 | +<replay-web-page source="s3://webrecorder-builds/warcs/netpreserve-twitter.warc" |
| 28 | +url="https://twitter.com/netpreserve"></replay-web-page> |
| 29 | +``` |
| 30 | + |
| 31 | +This will load the frontend UI. |
| 32 | + |
| 33 | +Since ReplayWeb.page requires a service worker, it is necessary to add a service worker path |
| 34 | +from where the web archive will be served. Create a subdirectory (eg. `replay/`) and place the following |
| 35 | +one-line script |
| 36 | + |
| 37 | + |
| 38 | +{: .bg-blue-000 .text-grey-lt-000 .cap-header} |
| 39 | +./replay/sw.js |
| 40 | + |
| 41 | +```javascript |
| 42 | +importScripts( "https://unpkg.com/[email protected]/sw.js"); |
| 43 | +``` |
| 44 | + |
| 45 | +Thus, if the HTML snippet was added to `https://my-site.example.com/path/my-web-archive-embed.html` |
| 46 | +then the sw.js should be added such that it is at: `https://my-site.example.com/path/replay/sw.js`. |
| 47 | + |
| 48 | +That's it! Loading `https://my-site.example.com/path/my-web-archive-embed.html` should now load the web arhive. |
| 49 | + |
| 50 | +(Be sure to add sizes to the `<replay-web-page>` tag as needed to size the embed). |
| 51 | + |
| 52 | +You can replace `s3://webrecorder-builds/warcs/netpreserve-twitter.warc` with any web archive hosted on your site, |
| 53 | +eg. `https://my-site.example.com/warcs/my-warc-file.warc`. |
| 54 | + |
| 55 | +{: .fs-3 .pad .bg-grey-lt-100} |
| 56 | +If the file is loaded from a different origin, your site must have CORS access to download the web archive. |
| 57 | + |
| 58 | + |
| 59 | +### Versioning |
| 60 | + |
| 61 | +Note that the above example uses the paths as: |
| 62 | + |
| 63 | +- `https://unpkg.com/[email protected]/ui.js` |
| 64 | +- `https://unpkg.com/[email protected]/sw.js` |
| 65 | + |
| 66 | +Another alternative would be: |
| 67 | + |
| 68 | +- `https://cdn.jsdelivr.net/npm/[email protected]/ui.js` |
| 69 | +- `https://cdn.jsdelivr.net/npm/[email protected]/sw.js` |
| 70 | + |
| 71 | +These URLs point to a specific version of ReplayWeb.page software released on NPM, eg. `1.0.0`, meaning that your replay should stay stable, even if ReplayWeb.page is updated. |
| 72 | + |
| 73 | +You can choose another of ReplayWeb.page (or even try different versions) to ensure that you have tbest available replay. |
| 74 | + |
| 75 | +This addresses the potential issue of older sites breaking when web archive replay software is updated. |
| 76 | + |
| 77 | +For production use, it is advised against linking to the latest version, eg. `https://replayweb.page/ui.js` |
| 78 | +and `https://replayweb.page/sw.js` as these will be updated frequently and make break your embed. |
| 79 | + |
| 80 | + |
| 81 | + |
| 82 | + |
0 commit comments