← Back to documentation

Creating a Bookmarklet That Emails the Current URL

Save the current page URL and title to your email when you select one bookmark.

4 min read

A browser bookmarklet is a browser bookmark that uses JavaScript. This example sends the current page URL and title to an email target when you select the bookmark. Use it to save an article, share a link, or build a reading list.

Purpose#

Use this guide to:

  • Build a JavaScript bookmarklet that calls a PayloadRelay endpoint.
  • Configure an email target for the saved URLs.
  • Add an optional note and tags to a saved link.
  • Install the bookmarklet in a browser.

Before you start#

  • Create a PayloadRelay endpoint that accepts POST with the JSON payload format.
  • Attach a confirmed email target to the endpoint.
  • Cross-origin resource sharing (CORS) must permit the current page origin when the bookmarklet uses fetch(). The GET and image-pixel alternative in step 7 cannot show if the delivery was successful. A page Content Security Policy (CSP) can also block that alternative.

Procedure#

1. Create the endpoint#

  1. Open Endpoints and select Create endpoint.
  2. Set the accepted method to POST.
  3. Set the payload format to JSON.
  4. In Outputs, attach your confirmed email target.
  5. Save and copy the endpoint URL.

2. Basic bookmarklet#

This bookmarklet sends the current page URL and title to the endpoint:

Code Example
javascript:void(fetch('https://api.payloadrelay.com/relay/YOUR_ENDPOINT_ID',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({subject:'Saved Link: '+document.title,url:location.href,title:document.title,saved_at:new Date().toISOString()})}).then(function(r){if(!r.ok){throw new Error('HTTP '+r.status)}alert('Link saved!')}).catch(function(e){alert('Failed to save link: '+e.message)}))

Readable version:

Code Example
javascript:void(
  fetch('https://api.payloadrelay.com/relay/YOUR_ENDPOINT_ID', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      subject: 'Saved Link: ' + document.title,
      url: location.href,
      title: document.title,
      saved_at: new Date().toISOString()
    })
  })
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    alert('Link saved!');
  })
  .catch((error) => alert(`Failed to save link: ${error.message}`))
)

3. Bookmarklet with notes#

This version asks for an optional note before it sends the request:

Code Example
javascript:void((function(){var n=prompt('Add a note (optional):','');if(n!==null){fetch('https://api.payloadrelay.com/relay/YOUR_ENDPOINT_ID',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({subject:'Saved Link: '+document.title,url:location.href,title:document.title,note:n||'(no note)',saved_at:new Date().toISOString()})}).then(function(r){if(!r.ok){throw new Error('HTTP '+r.status)}alert('Link saved!')}).catch(function(e){alert('Failed to save link: '+e.message)})}})())

Readable version:

Code Example
javascript:void((function() {
  var note = prompt('Add a note (optional):', '');
  if (note !== null) {
    fetch('https://api.payloadrelay.com/relay/YOUR_ENDPOINT_ID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        subject: 'Saved Link: ' + document.title,
        url: location.href,
        title: document.title,
        note: note || '(no note)',
        saved_at: new Date().toISOString()
      })
    })
    .then(function(response) {
      if (!response.ok) {
        throw new Error('HTTP ' + response.status);
      }
      alert('Link saved!');
    })
    .catch(function(error) {
      alert('Failed to save link: ' + error.message);
    });
  }
})())

If you select Cancel in the prompt, the bookmarklet does not send the request.

4. Bookmarklet with tags#

This version asks for tags and an optional note:

Code Example
javascript:void((function(){var t=prompt('Tags (comma-separated):','reading');if(t!==null){var n=prompt('Note (optional):','');if(n!==null){fetch('https://api.payloadrelay.com/relay/YOUR_ENDPOINT_ID',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({subject:'['+t+'] '+document.title,url:location.href,title:document.title,tags:t,note:n||'(no note)',saved_at:new Date().toISOString()})}).then(function(r){if(!r.ok){throw new Error('HTTP '+r.status)}alert('Link saved!')}).catch(function(e){alert('Failed to save link: '+e.message)})}}})())

The email subject contains the tags, for example: [reading, tech] Article Title.

5. Install the bookmarklet#

Chrome, Edge, Firefox, Brave

  1. Show the bookmarks bar (Ctrl+Shift+B or Cmd+Shift+B).
  2. Right-click the bookmarks bar. Select Add page or Add bookmark.
  3. Set a name that you recognize, for example, 📧 Save Link.
  4. Paste the bookmarklet code, which starts with javascript:, into the URL field.
  5. Save.

Safari

  1. Open Bookmarks and select Add Bookmark for a page.
  2. Edit the bookmark. Right-click it and select Edit Address.
  3. Replace the URL with the bookmarklet code.
  4. Save.

Mobile (iOS Safari)

  1. Bookmark a page.
  2. Edit the bookmark, and replace the URL with the bookmarklet code.
  3. To use it, type the first characters of the bookmark name in the address bar, and tap the suggestion.

6. Configure the email target#

  1. Open Relay targets. Select Add target, then select Email.
  2. Enter the email address that receives the saved links.
  3. Use the confirmation link to complete the email target confirmation.
  4. Attach it to the bookmarklet endpoint.

Each time you select the bookmarklet, it sends an email with:

  • Subject: Saved Link: <page title>, or with the tags if you configure them
  • Body fields: URL, title, note, tags, timestamp

7. Handling CORS restrictions#

Some websites have a Content Security Policy that blocks a fetch() request to an external URL. A GET and image-pixel request does not read the response, and it thus does not need CORS. The page img-src CSP can still block the request:

Code Example
javascript:void((function(){var d=encodeURIComponent(JSON.stringify({subject:'Saved: '+document.title,url:location.href,title:document.title,saved_at:new Date().toISOString()}));new Image().src='https://api.payloadrelay.com/relay/YOUR_ENDPOINT_ID?data='+d;alert('Save requested — check PayloadRelay Activity to confirm')})())

The endpoint must accept a GET request with query parameters. A GET query string has a length limit, so use this method for a short payload. JavaScript cannot read the image response. The alert shows only that the browser tried the request. Look for Completed (ACCEPTED) in PayloadRelay Activity.

Expected result#

  • A fetch bookmarklet shows a success message only after a 2xx response. The image fallback shows an alert for the request attempt. For the result, read Activity.
  • The email arrives in seconds with the page URL, the title, and the optional note and tags.
  • A request appears in PayloadRelay Request activity as Completed (ACCEPTED).

Common issues#

  • The bookmarklet does nothing: make sure that the URL field starts with javascript: and has no line breaks.
  • The Failed to save link alert: read the browser console. A Content Security Policy often blocks the fetch request.
  • No email: make sure that the email target is Confirmed and that it is attached to the endpoint.
  • A CORS error: permit the current page origin, or use the GET and image-pixel version. If the CSP blocks connect-src and img-src, the page cannot use either version.
  • The prompt does not appear: some browsers block a prompt from a bookmarklet on some pages. Use the basic version with no prompt.
← Back to documentation