← Web Components

Web Components · PDP

<mmm-pdp-share>

Share button with a copy-URL action and a tooltip confirmation. Falls back from the native Web Share API (mobile) to a clipboard copy (desktop), showing a transient tooltip on success.

Overview

On mobile, taps the native share sheet via navigator.share(). On desktop, writes the current PDP URL to navigator.clipboard and shows a "Copied!" tooltip. The tooltip is fully styled via the tooltip-* attributes.

When to use

  • On every PDP — social proof + virality.
  • For mobile-first stores where native share sheets convert better than buttons.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-pdp-share></mmm-pdp-share>

Attributes

AttributeTypeDefaultDescription
btn-positionstringrelativeCSS position for the share button.
btn-border-colorstringtheme button stroke / #dddButton border colour (idle).
btn-hover-border-colorstringtheme button hover stroke / #000Border colour on hover.
tooltip-positionstringabsoluteTooltip CSS position.
tooltip-bottomstring100%CSS bottom anchor.
tooltip-leftstring50%CSS left anchor.
tooltip-transformstringtranslateX(-50%)CSS transform.
tooltip-backgroundstring#000Tooltip background.
tooltip-colorstring#fffTooltip text colour.
tooltip-paddingstring0.375rem 0.75remTooltip padding.
tooltip-border-radiusstring0.25remTooltip border-radius.
tooltip-font-sizestringtheme caption size / 0.75remTooltip font size.
tooltip-white-spacestringnowrapTooltip white-space.
tooltip-margin-bottomstring0.5remSpacing between tooltip and button.
tooltip-opacitynumber0Default opacity (hidden).
tooltip-pointer-eventsstringnonePointer-events while hidden.
tooltip-transitionstringopacity 0.3s easeShow / hide transition.
tooltip-hover-opacitynumber1Opacity when shown (after click).
custom-cssstring—Extra CSS appended inside the shadow DOM.

Events

EventTargetPayload
pdp:share-clickedhost{ productName, productUrl }

Live preview

store sample-store tag <mmm-pdp-share>

Examples

1. Default — bordered share button

<mmm-pdp-share></mmm-pdp-share>

2. Floating share with accent tooltip

<mmm-pdp-share
  btn-border-color="transparent"
  btn-hover-border-color="#c8a8ff"
  tooltip-background="#c8a8ff"
  tooltip-color="#0e1011"
  tooltip-font-size="0.6875rem">
</mmm-pdp-share>

3. Tooltip below button (anchor flipped)

<mmm-pdp-share
  tooltip-bottom="auto"
  tooltip-margin-bottom="0"
  custom-css=".tooltip { top: 100%; margin-top: 0.5rem; }">
</mmm-pdp-share>