All posts
Javascript Development Salesforce Development Browser Api Javascript Salesforce Salesforcetips

Snippet: Native Sharing in Salesforce with LWC and the Web Share API, One-Tap Record Sharing on Mobile

· 3 min read

A minimal LWC that opens the device’s native share sheet (WhatsApp, Mail, Teams, etc.) so users can share a Salesforce record link in one tap — no Apex, no custom service integrations.

Salesforce is a hub of critical business information. Often, users need to share this information — a promising lead, a key account, or a public knowledge article — with colleagues. The default workflow of copy-pasting URLs is inefficient, especially on mobile devices. We can leverage the Web Share API, a standard browser feature, to provide a native sharing experience directly from a record page. This post demonstrates how to create a “Record Sharer” component that uses navigator.share() to invoke the device’s own sharing functionality.

Solution Approach

The business problem is to allow a user to share a Salesforce record using their preferred communication tool (like Teams, Slack, WhatsApp, or email) with a single click.

This Solution delegates the entire sharing UI and logic to the client’s operating system. The LWC’s role is simply to gather the necessary information — the record’s title and URL — and hand it off to the browser. The LWC’s JavaScript controller calls navigator.share(), passing an object with title, text, and url. The browser then intercepts this call and opens the device’s native share sheet, populated with the user’s own apps.

Implementation Steps

LWC — Source Code

**force-app/main/default/lwc/recordSharer/recordSharer.html**

CODEBLOCK_0_END

**force-app/main/default/lwc/recordSharer/recordSharer.js**

CODEBLOCK_1_END

**force-app/main/default/lwc/recordSharer/recordSharer.js-meta.xml**

CODEBLOCK_2_END

(Optional) **force-app/main/default/lwc/recordSharer/recordSharer.css**

CODEBLOCK_3_END

Deploy & Open the Org

CODEBLOCK_4_END

CODEBLOCK_5_END

CODEBLOCK_6_END

Create the Lightning Record Page

Open Lightning App Builder
 Setup → App Builder → New → Record Page.

Choose Object & Template

  • Label: Opportunity Record with Share (or your label)
  • Object: Opportunity (or your target object)
  • Pick a template (e.g., Header + Right Sidebar).

Add the standard Record Detail

  • In the Standard components list, drag Record Detail into the main content region.
  • (Optional but common) Drag Highlights Panel into the header region for actions/key fields.
  • If you use Dynamic Forms (custom objects or supported core objects), you can instead add Field Section + Fields; both approaches are fine.

Add the share component

  • In Custom components, drag RecordSharer into a side region (e.g., Right Sidebar) or under the details section — wherever it best fits.

Save & Activate

  • Click Save, then Activate.
  • Set as Org Default (or assign to specific Apps/Profiles/Record Types).

Test

  • Open any record for that object.
  • Click Share this Record.
  • On supported browsers/devices, the native share sheet opens; otherwise, you’ll see the fallback message.

Object swap (if not Opportunity)

Change the field import in recordSharer.js and redeploy:

  • Account → @salesforce/schema/Account.Name
  • Case → @salesforce/schema/Case.CaseNumber

CODEBLOCK_7_END

Quick tips

  • User gesture + HTTPS are required for navigator.share()—the button click covers this.
  • Mobile-first: iOS Safari and Android Chrome are the most reliable; desktop support varies.
  • If the button doesn’t render, your browser likely doesn’t support Web Share — use the fallback.