Stories - Web

Player Style - Stories

The player's appearance will resemble this when using the default presets:

{
  "titleVisible": true,
  "titleFont": "'WSC Open Sans'",
  "titleFontSize": "12px",
  "titleFontSizeEmbedded": "11px",
  "titleColor": "#F8F9FB",
  "publishedDateVisible": true,
  "publishedDateFont": "'WSC Open Sans'",
  "publishedDateFontSize": "12px",
  "publishedDateFontSizeEmbedded": "11px",
  "publishedDateColor": "#B6B7B8",
  "statusLiveStyle": {
    "backgroundColor": "#FF364E",
    "textColor": "#F8F9FB",
    "font": "'WSC Open Sans'",
    "textSize": "10px",
    "letterSpacing": "initial",
    "borderRadius": "14px",
    "borderWidth": 2,
    "borderColor": "#F8F9FB",
    "text": "LIVE",
    "isVisible": true,
    "padding": "3px 9px"
  },
  "ctaButton": {
    "color": "",
    "backgroundColor": "",
    "borderRadius": "8px",
    "padding": "0",
    "border": "",
    "fontSize": "16px",
    "font": "'WSC Open Sans'",
    "fontWeight": "700",
    "textTransform": "uppercase",
    "isAnimated": false,
    "isDisplayCtaModal": true,
    "width": "100%",
    "height": "40px",
    "position": "CENTER",
    "isVisible": true,
    "icon": {
    	"isVisible": false,
    	"url": "data:image/svg+xml;base64,URL_FOR_ICON",
    	"size": "24px",
    	"color": "inherit"
  	}
  },
  "iconsPosition": "HORIZONTAL",
  "iconsButtonPadding": "5px",
  "iconsButtonSize": "28px",
  "iconsButtonEmbeddedSize": "20px",
  "iconsButton": [
    {
      "value": "MUTE_UNMUTE",
      "isEmbeddedVisible": true,
      "isVisible": true,
      "color": "#FFFFFF",
      "backgroundColor": "transparent",
      "borderRadius": "50%"
    },
    {
      "value": "PLAY_PAUSE",
      "isEmbeddedVisible": true,
      "embeddedSize": "20px",
      "isVisible": true,
      "color": "#FFFFFF",
      "backgroundColor": "transparent",
      "borderRadius": "50%"
    },
    {
      "value": "SHARE",
      "isEmbeddedVisible": false,
      "isVisible": true,
      "color": "#FFFFFF",
      "backgroundColor": "transparent",
      "borderRadius": "50%"
    },
    {
      "value": "EXIT_PLAYER",
      "isEmbeddedVisible": false,
      "isVisible": true,
      "color": "#FFFFFF",
      "backgroundColor": "transparent",
      "borderRadius": "50%"
    },
    {
      "value": "FULLSCREEN",
      "isEmbeddedVisible": true,
      "isVisible": false,
      "color": "#FFFFFF",
      "backgroundColor": "transparent",
      "borderRadius": "50%"
    }
  ],
  "iconsButtonNavigation": [
    {
      "value": "NEXT_PAGE",
      "size": "28px",
      "isVisible": true,
      "color": "#000000",
      "backgroundColor": "#FFFFFF",
      "borderRadius": "50%",
      "padding": "10px"
    },
    {
      "value": "PREV_PAGE",
      "size": "28px",
      "isVisible": true,
      "color": "#000000",
      "backgroundColor": "#FFFFFF",
      "borderRadius": "50%",
      "padding": "10px"
    },
    {
      "value": "NEXT_STORY",
      "size": "28px",
      "isVisible": true,
      "color": "#FFFFFF",
      "backgroundColor": "transparent",
      "borderRadius": "50%",
      "padding": "0"
    },
    {
      "value": "PREV_STORY",
      "size": "28px",
      "isVisible": true,
      "color": "#FFFFFF",
      "backgroundColor": "transparent",
      "borderRadius": "50%",
      "padding": "0"
    }
  ],
  "iconsButtonOrder": [
    "MUTE_UNMUTE",
    "PLAY_PAUSE",
    "SHARE",
    "EXIT_PLAYER"
  ],
  "contentOrder": [
    "LIVE_CHIP",
    "STORY_TITLE",
    "PUBLISHED_DATE"
  ],
  "localeDirection": "LTR",
  "icons": {
    "play": "data:image/svg+xml;base64,URL_FOR_PLAY_ICON",
    "pause": "data:image/svg+xml;base64,URL_FOR_PAUSE_ICON",
    "mute": "data:image/svg+xml;base64,URL_FOR_MUTE_ICON",
    "unmute": "data:image/svg+xml;base64,URL_FOR_UNMUTE_ICON",
    "share": "data:image/svg+xml;base64,URL_FOR_SHARE_ICON",
    "fullscreen": "data:image/svg+xml;base64,URL_FOR_MUTE_ICON",
    "exitMobileTablet": "data:image/svg+xml;base64,URL_FOR_EXIT_ICON",
    "exitDesktop": "data:image/svg+xml;URL_FOR_EXIT_ICON",
    "navigation": {
      "nextPage": "data:image/svg+xml;URL_FOR_NEXT_PAGE_ICON",
      "prevPage": "data:image/svg+xml;base64,URL_FOR_PREV_PAGE_ICON",
      "nextStory": "data:image/svg+xml;base64,URL_FOR_NEXT_STORY_ICON",
      "prevStory": "data:image/svg+xml;base64,URL_FOR_PREV_STORY_ICON"
    }
  },
  "captions": {
    "font": "'Inter', sans-serif",
    "fontWeight": "700",
    "positioning": {
      "horizontal": "start",
      "vertical": "top"
    }
  }
}

Player Content

Title
Published Time

Attribute	Property Name	Default Value	Type
Story Title - Display	titleVisible	true	Boolean
Story Title Font	titleFont	'Roboto', 'SF Pro Text', 'Open Sans'	String
Story Title Font Size	titleFontSize	12px	String
Story Title Font Color	titleColor	#F8F9FB	String
Story Published Date - Display	publishedDateVisible	true	Boolean
Story Published Date Font	publishedDateFont	'Roboto', 'SF Pro Text', 'Open Sans'	String
Story Published Date Font Size	publishedDateFontSize	12px	String
Story Published Date Color	publishedDateColor	#7F7F7F	String

myRowCircleTheme.playerStyle.titleVisible = true
myRowCircleTheme.playerStyle.titleFont = "Monaco", 
myRowCircleTheme.playerStyle.titleColor = '#FFC0CB'
myRowCircleTheme.playerStyle.titleFontSize = '10px'

myRowCircleTheme.playerStyle.publishedDateVisible = true 
myRowCircleTheme.playerStyle.publishedDateFont = "Monaco"
myRowCircleTheme.playerStyle.publishedDateColor = '#FFC0CB' 
myRowCircleTheme.playerStyle.publishedDateFontSize = '10px'

Live Chip - Status Indicator

Attribute	Property Name	Default Value	Type
Background Color	backgroundColor	true	Boolean
Border Radius	borderRadius	'Roboto', 'SF Pro Text', 'Open Sans'	String
Border Color	borderColor	12px	String
Border Width	titleColor	F8F9FB	String
Text	text	LIVE	String
Text Color	textColor	F8F9FB	String
Text Size	textSize	10px	String
Letter Spacing	letterSpacing	initial	String
Font	font	WSC Open Sans	String
Is Visible	isVisible	true	String
Padding	padding	padding	String

myRowCircleTheme.playerStyle.statusLiveStyle.backgroundColor = '#FF364E'
myRowCircleTheme.playerStyle.statusLiveStyle.textColor = "#F8F9FB", 
myRowCircleTheme.playerStyle.statusLiveStyle.font = '#Monaco'
myRowCircleTheme.playerStyle.statusLiveStyle.textSize = '10px'

Title Image

Attribute	Property Name	Default Value	Type
Is Visible	isVisible	true	String
Size	size	20	number
Source Mode	sourceMode	dynamic	String
Static URL	staticUrl	-	String
Dynamic Fallback Url	dynamicFallbackUrl	-	String

myRowCircleTheme.playerStyle.titleImage.isVisible = true;
myRowCircleTheme.playerStyle.titleImage.size = 20; // px. supported up to 32
myRowCircleTheme.playerStyle.titleImage.sourceMode = 'dynamic'; // 'static'
myRowCircleTheme.playerStyle.titleImage.staticUrl = 'https://my-domain.com/static-title-image.jpg';
myRowCircleTheme.playerStyle.titleImage.dynamicFallbackUrl = 'https://my-domain.com/fallback-image.jpg';

Player Direction

myRowCircleTheme.playerStyle.statusLiveStyle.localeDirection =  "LTR" // "RTL"

Player Content Order

To reorder the player content so that the live chip appears first, the story title second, and the published date last, you should use the contentOrder attribute within the playerStyle object, not within statusLiveStyle. Here's the corrected example:

myRowCircleTheme.playerStyle.contentOrder = ["LIVE_CHIP","STORY_TITLE","PUBLISHED_DATE"]

Captions

Use captions on StoryPlayerStyle to customize the appearance and placement of closed captions in the player.

Attribute	Property Name	Type
Font	captions.font	string
Font size	captions.fontSize	string
Font weight	captions.fontWeight	string
Horizontal positioning	captions.positioning.horizontal	string
Vertical positioning	captions.positioning.vertical	string

Supported values:

captions.positioning.horizontal: start | center
captions.positioning.vertical: top | center | bottom

myRowCircleTheme.playerStyle.captions = {
  font: "'WSC Open Sans'",
  fontSize: '16px',
  fontWeight: '700',
  positioning: {
    horizontal: 'center',
    vertical: 'bottom'
  }
}

Player Icons

All icons listed here use base64 encoding for their respective SVG data. The navigation icons are nested within the icons object and represent specific actions for navigating through pages and stories.

Icon Name	Property Name
Play	icons.play
pause	icons.pause
mute	icons.mute
unmute	icons.unmute
share	icons.share
fullscreen	icons.fullscreen
exitMobileTablet	icons.exitMobileTablet
exitDesktop	icons.exitDesktop
nextPage	icons.navigation.nextPage
prevPage	icons.navigation.prevPage
nextStory	icons.navigation.nextStory
prevStory	icons.navigation.prevStory

myRowCircleTheme.playerStyle.icons.mute = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InBsYXlfYXJyb3dfIGhvbGxvdyI+CjxtYXNrIGlkPSJtYXNrMF8yMTA2Xzk5NCIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4KPHJlY3QgaWQ9IkJvdW5kaW5nIGJveCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRDlEOUQ5Ii8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8yMTA2Xzk5NCkiPgo8cGF0aCBpZD0icGxheV9hcnJvdyIgZD0iTTggMTlWNUwxOSAxMkw4IDE5Wk0xMCAxNS4zNUwxNS4yNSAxMkwxMCA4LjY1VjE1LjM1WiIgZmlsbD0iI0YwRjBGMCIvPgo8L2c+CjwvZz4KPC9zdmc+Cg=='
myRowCircleTheme.playerStyle.icons.navigation.nextPage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InBsYXlfYXJyb3dfIGhvbGxvdyI+CjxtYXNrIGlkPSJtYXNrMF8yMTA2Xzk5NCIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4KPHJlY3QgaWQ9IkJvdW5kaW5nIGJveCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRDlEOUQ5Ii8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8yMTA2Xzk5NCkiPgo8cGF0aCBpZD0icGxheV9hcnJvdyIgZD0iTTggMTlWNUwxOSAxMkw4IDE5Wk0xMCAxNS4zNUwxNS4yNSAxMkwxMCA4LjY1VjE1LjM1WiIgZmlsbD0iI0YwRjBGMCIvPgo8L2c+CjwvZz4KPC9zdmc+Cg=='

Player Icon Position

We can set our player icon position to be Vertical or Horizontal

myRowCircleTheme.playerStyle.iconsPosition = 'VERTICAL' // HORIZONTAL is the default value

Player Icons - Custom Style Global

You can control some attributes related to the player icons, such as icon player buttons, background color around them, and icon button size.

Attribute	Property Name	Default Value	Type
Player button Icons Padding	iconsButtonPadding	5px	string
player buttons Icon Size	iconsButtonSize	28px	string

myRowCircleTheme.playerStyle.iconsButtonPadding = '10px'
myRowCircleTheme.playerStyle.iconsButtonSize = '30px'

Player Icons Order

You can control the order of the player icons from left to right by rearranging them as desired.

myRowCircleTheme.playerStyle.iconsButtonOrder = ["MUTE_UNMUTE","PLAY_PAUSE","SHARE","EXIT_PLAYER"]

Player Icon - Custom Style Per Icon

Attribute	Property Name	Type
Is Visible on Default player (Full screen)	isVisible	boolean
Is Visible on Embedded layer (Only in Player Icons)	isEmbeddedVisible	boolean
Icon color	color	string
Background Color	backgroundColor	string
Border Radius	borderRadius	string
Padding (Only in Navigation Buttons)	padding	string
Size (Only in Navigation Buttons)	size	string

Share behavior

The shared link opens the Story from the first page (it doesn't preserve the exact page where Share was clicked).

// Hide the share button
myRowCircleTheme.playerStyle.iconsButton.filter(icon => icon.value === 'SHARE')[0].isVisible = false

Embedded Player Customization

We allow differentiation between the fullscreen player and the embedded player.

Player Content

Attribute	Property Name	Default Value	Type
Title Font Color	titleFontSizeEmbedded	11px	String
Published Date Font Size	publishedDateFontSizeEmbedded	11px	String

Player Custom Style

Attribute	Property Name	Default Value	Type
Player Buttons Size	iconsButtonEmbeddedSize	20px	String

Player Icons -

MuteUnmute/Share/Exit/Fullscreen/PlayPause

Attribute	Default Value	Property Name	Type
is Button Visible	20px	isEmbeddedVisible	String

Updated 11 days ago

Did this page help you?