Media CTA Options

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

Quick Start

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

// Set CTA via SDK API
FairShareSDK.media.settings.setForMedia("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:

Cart CTA

Displays all tagged products if available:

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

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>

Email CTA

<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. These persist in localStorage and are page-scoped:

// Cart CTA for specific media
FairShareSDK.media.settings.setForMedia("12345", {
  ctaOptionsManualOverride: {
    type: "cart"
  }
});

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

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

// Phone CTA for specific media
FairShareSDK.media.settings.setForMedia("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 - Media-Specific	`setForMedia()`
3 (Lowest)	SDK API - Default	`setDefault()`

Examples

Override CTA for a Promotional Video

<fluid-media-widget
  media-id="promo-video-123"
  cta-options-manual-override='{"type":"link","url":"https://example.com/sale","buttonText":"Shop the Sale"}'
></fluid-media-widget>

Set Default Cart CTA, Override for Specific Media

// Default: show cart for all media
FairShareSDK.media.settings.setDefault({
  ctaOptionsManualOverride: { type: "cart" }
});

// Override: specific video links to landing page
FairShareSDK.media.settings.setForMedia("landing-video", {
  ctaOptionsManualOverride: {
    type: "link",
    url: "https://example.com/signup",
    buttonText: "Get Started"
  }
});

Media — Display individual media items
Media Event Listeners — Track CTA clicks and media events
Playlist CTA Options — CTA options for playlists