diff --git a/docs/assets/example.wacz b/docs/assets/example.wacz new file mode 100644 index 0000000..173ebca Binary files /dev/null and b/docs/assets/example.wacz differ diff --git a/docs/embedding.md b/docs/embedding.md index bcfef6b..bfc73bd 100644 --- a/docs/embedding.md +++ b/docs/embedding.md @@ -13,7 +13,7 @@ To make this possible ReplayWeb.page provides the `` HTML web c For the web component to work you need to load the *frontend* user interface and the *backend* service worker into your web page, and then point a `` component at your WACZ file. The *frontend* defines the `` web component itself, and the backend service worker is responsible for retrieving data on demand from your web archive file. The backend pulls resources from the WACZ file *on-demand* as they are requested, so full retrieval of the WACZ to the browser is *not* required. The frontend and backend are just static JavaScript assets which you can choose to load from a Content Delivery Network (CDN) or directly from your website if you would like to host them yourself. -For example, to embed a WACZ web archive stored at `https://webrecorder-builds.s3.amazonaws.com/wacz/netpreserve-twitter.wacz`, you first need to add the following snippet to your HTML page to load the user interface and use the `` component to point to the WACZ: +For example, to embed a WACZ web archive stored at `https://replayweb.page/docs/assets/example.wacz` you first need to add the following snippet to your HTML page to load the user interface and use the `` component to point to the WACZ: {: .bg-blue-000 .text-grey-lt-000 .cap-header} my-web-archive-embed.html @@ -21,8 +21,8 @@ my-web-archive-embed.html ```html - + ``` The first line loads version {{ site.data.package.version }} of the ui from the jsDelivr content delivery network. And the second instantiates the ReplayWebPage component using the `source` attribute to point to the location of the WACZ file on the web (in this case published on AWS S3). The `url` attribute is used to indicate what URL to display from the archive after the component loads. @@ -43,8 +43,7 @@ That's it! Loading `https://my-site.example.com/path/my-web-archive-embed.html` Be sure to add width and height styles to the `` tag as needed to size the embed. -You can replace `s3://webrecorder-builds/wacz/netpreserve-twitter.wacz` with any web archive hosted on your site, -eg. `https://my-site.example.com/wacz/my-wacz-file.wacz`. +You can replace `https://replayweb.page/docs/assets/example.wacz` with any web archive hosted on your site. {: .fs-3 .pad .bg-grey-lt-100} If the file is loaded from a different origin, your site must have CORS access to download the web archive. @@ -59,13 +58,13 @@ For example if you are publishing a page at `https://my-site.example.com/path/my ```html - + ``` The following URLs would then need to resolve correctly: * https://my-site.example.com/path/my-web-archive-embed.html -* https://my-site.example.com/path/netpreserve-twitter.wacz +* https://my-site.example.com/path/example.wacz * https://my-site.example.com/path/ui.js * https://my-site.example.com/path/replay/sw.js @@ -73,14 +72,14 @@ If you want to embed more than one web archive on your site it can be helpful to * https://my-site.example.com/js/ui.js * https://my-site.example.com/js/sw.js -* https://my-site.example.com/wacz/netpreserve-twitter.wacz +* https://my-site.example.com/wacz/example.wacz Then you adjust your HTML to reference the new resources: ```html - + ``` For a working example of hosting multiple web archives take a look at our *example-webarchive* [repository](https://github.com/webrecorder/example-webarchive/) and [static website](https://webrecorder.github.io/example-webarchive) which hosted on Github pages. It may give you ideas for how to integrate the ReplayWeb.page component into your site You may also be interested in [Web Replay Gen](https://github.com/webrecorder/web-replay-gen) which is an 11ty based static site builder for a web archive of WACZ files.