Media
The Media component displays media content from your Fluid playlist with various display modes.
Usage
<!-- Display a specific Playlist --> <fluid-media-widget playlist-id="your-playlist-id"></fluid-media-widget> <!-- Display specific media --> <fluid-media-widget media-id="your-media-id"></fluid-media-widget>
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
playlist-id | string | — | Playlist ID to fetch media from |
media-id | string | — | Single media ID to display |
hide-widget | boolean | false | Whether to hide the component |
class-name | string | — | Additional CSS classes |
height | string | — | Thumbnail height |
width | string | — | Thumbnail width |
Display Options
| Attribute | Type | Default | Description |
|---|---|---|---|
embed-type | string | 'default' | Display mode: 'popover', 'inline', 'inline-shopping', 'default' |
auto-open | boolean | false | Auto-open on load (popover mode only) |
thumbnail-foam | boolean | false | Use object-cover for thumbnail |
Display Modes
Default Mode
Shows media with associated cta options (this is what is displayed on the shareable media pages)
<fluid-media-widget media-id="your-media-id" embed-type="default" ></fluid-media-widget>
Popover Mode
Shows a thumbnail that opens media in a popover overlay: auto-open true enabled will open the popover on load
<fluid-media-widget media-id="your-media-id" embed-type="popover" auto-open="true" ></fluid-media-widget>
Inline Mode
Embeds media directly in the page:
<fluid-media-widget media-id="your-media-id" embed-type="inline" ></fluid-media-widget>
Examples
Custom Dimensions
<fluid-media-widget playlist-id="your-playlist-id" height="300px" width="500px" ></fluid-media-widget>
Auto-Opening Popover
<fluid-media-widget media-id="your-media-id" embed-type="popover" auto-open="true" ></fluid-media-widget>
CTA Options
You can customize the Call-to-Action (CTA) displayed with media using client-side overrides. CTA options can be set via HTML attributes or the SDK API.
CTA Options Reference
| Option | Type | Required | Description |
|---|---|---|---|
type | string | Yes | CTA type: 'cart', 'link', 'phone', or 'email' |
url | string | If type is 'link' | URL to navigate to when CTA is clicked |
buttonText | string | No | Custom button text (not applicable for 'cart' type) |
buttonDescription | string | No | Description text below the button (not applicable for 'cart' |
Setting CTA via HTML Attribute
Use the cta-options-manual-override attribute with a JSON string:
<!-- Link CTA --> <fluid-media-widget media-id="12345" cta-options-manual-override='{"type":"link","url":"https://shop.example.com","buttonText":"Shop Now"}' ></fluid-media-widget> <!-- Cart CTA this section will display all tagged products if available --> <fluid-media-widget media-id="12345" cta-options-manual-override='{"type":"cart"}' ></fluid-media-widget> <!-- Email CTA with description --> <fluid-media-widget media-id="12345" cta-options-manual-override='{"type":"email","buttonText":"Get Updates","buttonDescription":"Join 10,000+ subscribers"}' ></fluid-media-widget> <!-- Phone CTA --> <fluid-media-widget media-id="12345" cta-options-manual-override='{"type":"phone","buttonText":"Call Now"}' ></fluid-media-widget>
Setting CTA via SDK API
Media-Specific Settings (Higher Priority)
Set CTA options for specific media IDs using the SDK. These persist in localStorage and are page-scoped:
// Set CTA for a specific media item window.FairShareSDK.media.settings.setForMedia("12345", { ctaOptionsManualOverride: { type: "email", buttonText: "Get Updates", buttonDescription: "Join 10,000+ subscribers", }, });
Default Settings (Lower Priority)
Set default CTA options that apply to all media widgets on the page when no specific override exists:
// Set default CTA for all media widgets on this page window.FairShareSDK.media.settings.setDefault({ ctaOptionsManualOverride: { type: "cart", }, });
Priority Order
CTA options are applied in the following priority (highest to lowest):
- HTML Attribute (
cta-options-manual-override) — Highest priority - SDK API - Media-Specific (
setForMedia) — Medium priority - SDK API - Default Settings (
setDefault) — Lowest priority
JavaScript API
// Get media data const media = await window.FairShareSDK.getMedia("media-slug-or-id");