Web Share Action

The action module for this action is "vb/action/builtin/webShareAction".

The Web Share action allows mobile and web applications to share content with other applications, such as Facebook, Twitter, Slack, and SMS, by invoking the native sharing capabilities of the host platform.

Note:

Web apps require the web browser running the app to support the Web Share action. Currently, not all browsers support this native feature.

This action should only be invoked following a user gesture (such as a button click). It is a good idea to only enable share UI based of feature detection:

<oj-button disabled="[[!navigator.share]]">Share</oj-button>

Web Share action parameters correspond to Web Share API options:

The action supports the following parameters.

Parameter Name Description
title Title of the document being shared. May be ignored by the handler/target.
text An arbitrary text that forms the body of the message being shared.
url A URL string referring to a resource being shared.

All parameters are individually optional, but at least one parameter has to be specified. Any url can be shared, not just urls under website's current scope. Text can be shared with or without a url.

The example below illustrates an action's parameters one would specify to share the current page's title and url:

"share": {
  "module": "vb/action/builtin/webShareAction",
  "parameters": {
    "text": "Check out this cool new app!",
    "title": "[[document.querySelector('h1').textContent]]",
    "url": "[[ document.querySelector('link[rel=canonical]') && document.querySelector('link[rel=canonical]').href || window.location.href]]",  },
  "outcomes": {
    "failure": "handleShareError"
  }
}

A success outcome is returned once user has completed a share action. A failure outcome is returned when browser does not support Web Share API or a parameter error is detected.