Playlist CTA Options

Customize the Call-to-Action (CTA) displayed with media items in a playlist. CTAs can be set via HTML attributes or the SDK API.

Quick Start

<!-- Set CTA via HTML attribute -->
<fluid-media-widget
  playlist-id="12345"
  cta-options-manual-override='{"type":"cart"}'
></fluid-media-widget>

// Set CTA via SDK API for all media in a playlist
FairShareSDK.media.settings.setForPlaylist("12345", {
  ctaOptionsManualOverride: { type: "cart" }
});

CTA Types

Type	Description	Required Fields
`cart`	Add to cart action	None (displays tagged products)
`link`	External URL link	`url`
`email`	Email/contact form	None
`phone`	Phone contact	None

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'` or `'link'` type)

Setting CTA via HTML Attribute

Use the cta-options-manual-override attribute with a JSON string. This applies to all media items in the playlist:

Cart CTA

Displays all tagged products if available:

<fluid-media-widget
  playlist-id="12345"
  cta-options-manual-override='{"type":"cart"}'
></fluid-media-widget>

Link CTA

<fluid-media-widget
  playlist-id="12345"
  cta-options-manual-override='{"type":"link","url":"https://shop.example.com","buttonText":"Shop Now"}'
></fluid-media-widget>

Email CTA

<fluid-media-widget
  playlist-id="12345"
  cta-options-manual-override='{"type":"email","buttonText":"Get Updates","buttonDescription":"Join 10,000+ subscribers"}'
></fluid-media-widget>

Phone CTA

<fluid-media-widget
  playlist-id="12345"
  cta-options-manual-override='{"type":"phone","buttonText":"Call Now"}'
></fluid-media-widget>

Setting CTA via SDK API

Playlist-Specific Settings

Set CTA options for all media within a specific playlist. These persist in localStorage and are page-scoped:

// Cart CTA for all media in playlist
FairShareSDK.media.settings.setForPlaylist("12345", {
  ctaOptionsManualOverride: {
    type: "cart"
  }
});

// Link CTA for all media in playlist
FairShareSDK.media.settings.setForPlaylist("12345", {
  ctaOptionsManualOverride: {
    type: "link",
    url: "https://shop.example.com",
    buttonText: "Shop Now"
  }
});

// Email CTA for all media in playlist
FairShareSDK.media.settings.setForPlaylist("12345", {
  ctaOptionsManualOverride: {
    type: "email",
    buttonText: "Get Updates",
    buttonDescription: "Join 10,000+ subscribers"
  }
});

// Phone CTA for all media in playlist
FairShareSDK.media.settings.setForPlaylist("12345", {
  ctaOptionsManualOverride: {
    type: "phone",
    buttonText: "Call Now"
  }
});

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
FairShareSDK.media.settings.setDefault({
  ctaOptionsManualOverride: {
    type: "cart"
  }
});

Priority Order

CTA options are applied in the following priority (highest to lowest):

Priority	Source	Description
1 (Highest)	HTML Attribute	`cta-options-manual-override` attribute
2	SDK API - Playlist-Specific	`setForPlaylist()`
3 (Lowest)	SDK API - Default	`setDefault()`

Examples

Product Showcase Playlist

<fluid-media-widget
  playlist-id="product-showcase"
  cta-options-manual-override='{"type":"cart"}'
></fluid-media-widget>

<fluid-media-widget
  playlist-id="tutorials"
  cta-options-manual-override='{"type":"link","url":"https://example.com/signup","buttonText":"Start Free Trial"}'
></fluid-media-widget>

Set Different CTAs for Different Playlists

// Product videos: show cart
FairShareSDK.media.settings.setForPlaylist("products", {
  ctaOptionsManualOverride: { type: "cart" }
});

// Tutorial videos: link to signup
FairShareSDK.media.settings.setForPlaylist("tutorials", {
  ctaOptionsManualOverride: {
    type: "link",
    url: "https://example.com/signup",
    buttonText: "Get Started"
  }
});

// Support videos: show contact options
FairShareSDK.media.settings.setForPlaylist("support", {
  ctaOptionsManualOverride: {
    type: "email",
    buttonText: "Contact Support",
    buttonDescription: "We're here to help"
  }
});

Playlist — Display a playlist of media
Playlist Event Listeners — Track CTA clicks and media events
Media CTA Options — CTA options for individual media