How to Create a Bookmarklet to Capture Web Pages

A bookmarklet is a small software application stored as a bookmark in a web browser which typically allows a user to interact with the currently loaded web page in some way.

It is relatively simple to create a bookmarklet that will capture the url of a web page that a user is viewing and automatically send that url to a page on your server.  

Add the following HTML snippet to a page, where YOURAPP.com is the url of your application.  

<a href="javascript: (function () { window.open('https://YOURAPP.com/bookmarklet?source=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title || 'untitled')); })();" >Capture Web Page</a>

In this example you will need to create a page at /bookmarklet that accepts two query string parameters, source and title.

SourceThe url of the page to capture.
TitleThe title of the page.

To install the bookmarklet the user has to simply:

  1. Show the Browser Bookmarks Toolbar.
  2. Drag the bookmarklet from the page to his Bookmarks Toolbar. It should then appear on the toolbar.

Next Steps

One the bookmarklet and the bookmarklet handler page have been created you can use Capture Website to save a copy of the web page in Pandexio and Document Viewer Integration to view and snip the web page