Welcome to the BrowserUX Share Button Documentation

1.Auto-Detection of Sharing Capabilities

When the user clicks the button:

• If navigator.share() is supported (typically mobile or PWA), it opens the native share sheet.
• If not, it displays a custom modal fallback with share links and a copy-to-clipboard option.

4. Language & Accessibility

• The component auto-detects the UI language via the lang attribute or html lang.
• All labels and ARIA messages are translated (10+ languages supported).
• Modal and button are fully accessible (ARIA roles, keyboard navigation, focus trapping

1. Modern project with bundler (Vite, Webpack, etc.)

1. Import the component globally in your main script:

import 'browserux-share-button';

2. Then use it in your HTML:

<browserux-share-button></browserux-share-button>

2. React / Next.js

1. Dynamically import the component inside a useEffect:

import { useEffect } from 'react';

useEffect(() => {
  import('browserux-share-button');
}, []);

2. Then use it in JSX as a regular HTML tag:

<browserux-share-button></browserux-share-button>

Add the types/browserux-share-button.d.ts file for better TypeScript support with JSX.

3. Vue 3

1. Import it globally in you main.js or main.ts:

import 'browserux-share-button';

2. Use it like a native HTML element:

<browserux-share-button></browserux-share-button>

4. Angular

1. Import it in main.ts:

import 'browserux-share-button';
    

2. Add CUSTOM_ELEMENTS_SCHEMA to your AppModule:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

1. Custom Targeting (target)

By default, the browserux-share-button component shares the current page's URL (location.href). However, you can override this behavior by explicitly setting a different URL using the url attribute.

Attribute: target

• Type: string (valid URL)
• Default value: location.href
• Effect: specifies the URL to be passed to the native Web Share API or fallback share links

Example

<browserux-share-button
    url="https://example.com/page-to-share"
></browserux-share-button>

In this example, clicking the share button will share https://example.com/page-to-share, regardless of the actual page URL. This is useful for:

• Sharing a specific canonical or shortened URL
• Promoting a landing page from multiple contexts
• Testing different links without changing the page's location

Tip

Make sure the URL is publicly accessible and starts with https:// for best compatibility across social and native share services.

2. Custom Title (title)

The title is used by some sharing platforms as a subject (e.g. email) or headline (e.g. Twitter/X or LinkedIn). By default, the component tries to extract the title from the current document or web app manifest.

Attribute: title

• Type: string
• Default value: from title tag or web manifest
• Effect: provides a human-readable headline or subject in share payloads

Example

<browserux-share-button
    title="Check out this amazing article!"
></browserux-share-button>

In this case, platforms like email will use this as the subject line, and X/Twitter will include it as part of the tweet text.

Fallback behavior

If no title is provided:

• 1. The component checks the current page's title tag
• 2. If unavailable, it attempts to read the name field from the app manifest (if found)
• 3. If all fail, the title is omitted

When to override

Provide a custom title if:

• The current page title is too generic
• You want to promote a specific message or product
• You’re sharing a page from within an app shell or embedded view

Tip: Combine title, text, and url for best presentation across all platforms.

3. Custom Share Text (text)

The text attribute provides a message or summary accompanying the shared URL. This content is commonly used in messaging apps, social platforms, and even email bodies.

Attribute: target

• Type: string
• Default value: fetched from the meta decription, the web manifest (description) or left blank
• Effect: adds context to the share payload, especially useful when URLs alone aren't descriptive enough

Example

<browserux-share-button
    text="Here's a quick read I think you'll enjoy."
></browserux-share-button>

Use Cases

• Suggesting a reason to click or read the link
• Including promotional copy alongside the URL
• Describing the linked content more clearly

4. Custom Language (lang)

The lang attribute controls which language is used for all built-in labels, ARIA descriptions, and fallback UI content.

Attribute: lang

• Type: string
• Default value: derived from the component, html lang, or fallback to en
• Effect: adjusts internationalized content inside the component

Example

<browserux-share-button
    lang="fr"
></browserux-share-button>

In this example, all labels such as "Copy link" or error messages will appear in French.

Language Detection Order

• 1. Explicit lang attribute on the component
• 2. Fallback to html lang
• 3. Fallback to "en" (English)

Supported Languages

The component supports the following languages for accessible labels (aria-label):

• 🇬🇧 en – English (default)
• 🇫🇷 fr – French
• 🇪🇸 es – Spanish
• 🇩🇪 de – German
• 🇯🇵 ja – Japanese
• 🇷🇺 ru – Russian
• 🇵🇹 pt – Portuguese
• 🇮🇹 it – Italian
• 🇳🇱 nl – Dutch

5. Shadow DOM Toggle (no-shadow)

By default, the component uses Shadow DOM to encapsulate its styles and structure. You can disable this behavior by adding the no-shadow attribute.

Attribute: no-shadow

• Type: boolean (presence-only)
• Effect: renders component content in the light DOM (no encapsulation)

Example

<browserux-share-button
    no-shadow
></browserux-share-button>

When to Use

• You want to style the component via global CSS
• You use a framework that has limitations or bugs with Shadow DOM
• You prefer easier inspection/debugging in DevTools

⚠️ Disabling Shadow DOM makes the component more vulnerable to global style conflicts.

6. Disabling Share Platforms (facebook="false", etc.)

The browserux-share-button component includes a fallback UI that shows sharing options for multiple platforms. If you want to hide specific platforms (e.g., those irrelevant to your audience or use case), you can disable them using a simple boolean attribute.

Format

• Attribute name: matching the platform name
• Attribute value: "false" (as a string)

Supported Platforms

• email
• sms
• x
• facebook
• whatsapp
• linkedin
• telegram
• reddit

Example

<browserux-share-button
    facebook="false"
    sms="false"
></browserux-share-button>

7. Custom Manifest Source (manifest-src)

By default, if you do not explicitly provide the title or text attributes, browserux-share-button will try to load metadata from your web app's manifest file.

The component looks for:

• name → used as the share title
• description → used as the share text

This enables automatic integration with existing PWA metadata.

Attribute: manifest-src

• Type: string (valid URL path or absolute URL)
• Default: uses link rel="manifest" from the current pagek
• Effect: overrides the manifest URL used to fetch metadata

Example

<browserux-share-button
    manifest-src="/custom-manifest.webmanifest"
></browserux-share-button>

When to use

• Your manifest file is not declared in the page header
• You want to load share metadata from a different file (e.g., per-page manifest)
• The default manifest path is incorrect or inaccessible

Fallback logic

If no manifest-src is defined:

• 1. The component looks for a link rel="manifest" in the head
• 2. If found, it tries to fetch and parse it
• 3. If this fails, the component continues with defaults or empty values

Tip: The manifest must be served with the correct MIME type (application/manifest+json) and must be accessible via CORS.html