← Back to documentation

Creating a Bookmarklet That Emails the Current URL

One-click bookmarklet that captures the current page URL and title, sends it to a PayloadRelay endpoint, and delivers it to your email inbox.

6 min read

Create a browser bookmarklet that sends the current page's URL and title to your email with a single click. Useful for saving articles, sharing links, or building a personal read-later list.

Purpose

This guide helps you:

  • Build a JavaScript bookmarklet that calls a PayloadRelay endpoint.
  • Configure an email target to receive saved URLs.
  • Add optional notes and tags to saved links.
  • Install the bookmarklet in any browser.

Prerequisites and permissions

  • A PayloadRelay endpoint configured to accept POST with JSON payload format.
  • A confirmed email target attached to the endpoint.
  • Note: Bookmarklets using fetch() require CORS to be enabled on the endpoint. If you get CORS errors, either add your domain to the endpoint's allowed CORS origins, or use the GET/image-pixel fallback shown in step 7.

Step-by-step workflow

1. Create the endpoint

  1. Open Endpoints and select Create endpoint.
  2. Set the accepted method to POST.
  3. Set payload format to JSON.
  4. In Target destinations, 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 your PayloadRelay 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(()=>alert('Link saved!')).catch(()=>alert('Failed to save link')))

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(() => alert('Link saved!'))
  .catch(() => alert('Failed to save link'))
)

3. Bookmarklet with notes

This version prompts for an optional note before sending:

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(){alert('Link saved!')}).catch(function(){alert('Failed to save link')})}})())

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() { alert('Link saved!'); })
    .catch(function() { alert('Failed to save link'); });
  }
})())

Pressing Cancel on the prompt aborts the save.

4. Bookmarklet with tags

Add tag selection for categorizing saved links:

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(){alert('Link saved!')}).catch(function(){alert('Failed to save link')})}}})())

The email subject line will include the tags: [reading, tech] Article Title.

5. Install the bookmarklet

Chrome, Edge, Firefox, Brave

  1. Show the bookmarks bar (Ctrl+Shift+B / Cmd+Shift+B).
  2. Right-click the bookmarks bar → Add page / Add bookmark.
  3. Set the name to something recognizable (e.g. 📧 Save Link).
  4. Paste the bookmarklet code (starting with javascript:) into the URL field.
  5. Save.

Safari

  1. Go to Bookmarks → Add Bookmark for any page.
  2. Edit the bookmark: right-click → Edit Address.
  3. Replace the URL with the bookmarklet code.
  4. Save.

Mobile (iOS Safari)

  1. Bookmark any page.
  2. Edit the bookmark and replace the URL with the bookmarklet code.
  3. To use it, start typing the bookmark name in the address bar and tap it from suggestions.

6. Configure the email target

  1. Open Relay targets → Add target → Email.
  2. Enter the email address where saved links should arrive.
  3. Confirm the email target.
  4. Attach it to the bookmarklet endpoint.

Each click of the bookmarklet sends an email with:

  • Subject: Saved Link: <page title> (or with tags if configured)
  • Body fields: URL, title, note, tags, timestamp

7. Handling CORS restrictions

Some websites have strict Content Security Policies that block fetch() to external URLs. If the bookmarklet fails silently on certain sites, use an image-pixel fallback approach:

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('Link saved!')})())

This requires the endpoint to accept GET requests with query parameters. Note that GET query strings have length limits, so this approach works best for shorter payloads.

Expected result and verification checks

  • Clicking the bookmarklet shows a success alert.
  • Email arrives within seconds with the page URL, title, and optional note/tags.
  • Requests appear in PayloadRelay Request activity with outcome ACCEPTED.

Common issues and fixes

  • Bookmarklet does nothing: ensure the URL field starts with javascript: and contains no line breaks.
  • Failed to save link alert: check browser console for errors. The most common cause is Content Security Policy blocking the fetch.
  • No email received: verify the email target is Confirmed and attached to the endpoint.
  • CORS errors in console: use the GET/image-pixel fallback for sites with strict CSP.
  • Prompt not appearing: some browsers block prompts from bookmarklets on certain pages — the basic version (without prompts) will still work.

Related guides

← Back to documentation