Publishr

Appearance

Web-Embed Types ​

WebEmbedGet ​

typescript
WebEmbedGet {
  id: number;
  fkMediahouse: number;
  label: string;
  dataJson: string; // WebEmbedData
  slug: string;
  customization: string | null;
  webEmbedNavTag: WebEmbedNavTagGet[];
}

References: WebEmbedNavTagGet, WebEmbedData

WebEmbedNavTagGet ​

typescript
WebEmbedNavTagGet {
  fkWebEmbed: number;
  fkTag: number;
  tag?: TagGet;
}

References: TagGet

WebEmbedData ​

typescript
WebEmbedData {
  contentType: WebEmbedContentType
  type: EmbedType
  layout: WebEmbedLayout
  contentOptions: ContentOptions
  navigationOptions: NavigationOptions
  searchOptions: SearchOptions
  storyOptions: StoryOptions
  headerImageSizes: HeaderImageSizes
}

References: WebEmbedContentType, EmbedType, WebEmbedLayout, ContentOptions, NavigationOptions, SearchOptions, StoryOptions, HeaderImageSizes

StoryOptions ​

typescript
StoryOptions {
  text: {
    titleColor: string
    titleMouseOverColor: string
    titleFont: FontOption
    titleSize: number
    leadColor: string
    leadFont: FontOption
    leadSize: number
    readlessText: string
    enableLeadText: boolean
  }
  topStory: {
    enableTopStory: boolean
    titleFont: FontOption
    titleSize: number
    titleColor: string
    titleSizeMobile: number
    leadFont: FontOption
    leadSize: number
    leadColor: string
    leadSizeMobile: number
    readmoreFont: FontOption
    readmoreText: string
    carouselLayout: CarouselLayout.STANDARD
    backgroundColor: string
  }
  effectOptions: {
    enableMouseOverEffect: boolean
    enableShadowedBorders: boolean
    shareButtonStyle: ShareButtonStyle
    shareOptionsColor: string
    enabledMouseOverEffects: MouseOverEffect
    closeButtonStyle: CloseButtonStyle
    closeButtonBackgroundColor: string
    closeButtonSignColor: string
    enablePercentageCircle: boolean
    percentageCircleBackgroundColor: string
    percentageCircleColor: string
    percentageTextColor: string
    percentageCircleFont: FontOption
  }
  buttonOptions: {
    readMoreText: string
    readMoreBackgroundColor: string
    readMoreMouseOverBackgroundColor: string
    readMoreTextColor: string
    readMoreMouseOverTextColor: string
    readMoreFont: FontOption
    readMoreSize: number
    readMoreButtonStyle: ButtonStyle
    loadMoreText: string
    loadMoreBackgroundColor: string
    loadMoreTextColor: string
    loadMoreButtonStyle: ButtonStyle
    enableLikeButton: boolean
    likeButtonBackgroundColor: string
    likeButtonColor: string
  }
  carouselOptions: {
    captionFont: FontOption
    captionSize: number
    captionStyle: FontStyle
    captionAlignment: Alignment
    descriptionFont: FontOption
    descriptionSize: number
    descriptionStyle: FontStyle
    descriptionAlignment: Alignment
  }
  quoteOptions: {
    borderSize: number
    borderColor: string
    textFont: FontOption
    textSize: number
    textColor: string
    textStyle: FontStyle
    authorFont: FontOption
    authorSize: number
    authorColor: string
    authorStyle: FontStyle
  }
  miscOptions: {
    streamBackgroundColor: string
    primaryLinkColor: string
    textFont: FontOption
    textSize: number
    mediumScreenSize: number
    smallScreenSize: number
    largeScreenSize: number
    ribbonTextColor: string
    ribbonBackgroundColor: string
    buttonBackgroundColor: string
    buttonTextColor: string
    buttonMouseOverColor: string
    headerTextColor: string
    headerBackgroundColor: string
  }
  postOptions: {
    displayTime?: number
    socialBackgroundColor: string
    socialTextColor: string
    storyBackgroundColor: string
    storyTextColor: string
    sponsoredColor: string
    contentNetworkColor: string
  }
  headerOptions: {
    imageLabelColor: string
    imageLabelFont: FontOption
    imageLabelSize: number
    videoButtonColor: string
    videoButtonMouseOverColor: string
  }
}

References: FontOption, FontStyle, Alignment, ButtonStyle, CloseButtonStyle, ShareButtonStyle, CarouselLayout, MouseOverEffect

typescript
NavigationOptions {
  enableTopNavigation: boolean
  enableSubNavigation: boolean
  titleAll: string
  titleStories: string
  titleSocial: string
  backgroundColor: string
  backgroundColorHover: string
  style: NavigationStyle
  textStyle: FontStyle
  textColor: string
  textFont: FontOption
  textSize: number
  textHoverSize: number
  textHoverColor: string
  textActiveColor: string
  activeBackgroundColor: string
}

References: NavigationStyle, FontStyle, FontOption

ContentOptions ​

typescript
ContentOptions {
  theme: WebEmbedTheme
  columns: number
  rows: number
  storiesPerRow: number
  socialPostsPerRow: number
  startWith: StartWithOption
  expandedStoryWidth: number
  expansionBehaviour: ExpansionBehaviour
  postShareUrl: string // url where the web-embed is hosted. Story share-urls are generated based on this url. Can include ${STORY_ID} placeholder 
  previewUrl?: string // optional custom preview url, must include ${STORY_ID} placeholder
  loadMoreOption: LoadMoreOption
  showCallToActions: boolean
  showSkeleton: boolean
  showBranding: boolean
  storyColumnWidth: number
  socialColumnWidth: number
  gapWidth: number
  totalColumnWidth: number
  teaserDestinationEmbed?: number
}

References: WebEmbedTheme, StartWithOption, ExpansionBehaviour, LoadMoreOption

SearchOptions ​

typescript
SearchOptions {
  enableSearch: boolean
  searchButtonText: string
  searchButtonColor: string
  searchButtonTextColor: string
  closeButtonText: string
  closeButtonColor: string
  closeButtonTextColor: string
  placeholderText: string
  textColor: string
  textFont: FontOption
  textSize: number
}

References: FontOption

HeaderImageSizes ​

typescript
HeaderImageSizes {
  desktop: AspectRatio
  mobile: AspectRatio
  tablet: AspectRatio
  desktopExtraLarge: AspectRatio
}

References: AspectRatio

EmbedType ​

typescript
enum EmbedType {
  TEASER_EMBED = 'nt',
  WEB_EMBED = 'nw',
}

WebEmbedLayout ​

typescript
enum WebEmbedLayout {
  STANDARD = 'Standard',
  BOX = 'Box',
  GRID = 'Grid',
  STORY_BOX = 'Story Box',
  TEASER_BOX = 'Teaser Box',
  TEASER_WALL = 'Teaser Wall',
  WALL = 'Wall',
}

WebEmbedTheme ​

typescript
enum WebEmbedTheme {
  DEFAULT = 1,
  VANILLA = 2,
  SHADOWED = 3,
  ROUNDED = 4,
  SOBER = 5,
  SOCIAL = 6,
  DUAL = 7,
  CENTERINO = 8,
  SOCIALLY = 9,
  PLATFORM = 10,
  PLUS = 11,
  BORDERLESS = 12,
  MARVEL = 13,
  COLORFUL = 14,
}

WebEmbedContentType ​

typescript
enum WebEmbedContentType {
  ALL = 'All (Story + Social)',
  STORY = 'Story',
  SOCIAL = 'Social',
}

StartWithOption ​

typescript
enum StartWithOption {
  STORIES = 'story',
  SOCIAL = 'social',
}

FontOption ​

typescript
enum FontOption {
  ARIAL = 'Arial',
  CALIBRI = 'Calibri',
  HELVETICA = 'Helvetica',
  VERDANA = 'Verdana',
}

FontStyle ​

typescript
enum FontStyle {
  NORMAL = 'normal',
  ITALIC = 'italic',
  BOLD = 'bold',
  UNDERLINE = 'underline',
}

Alignment ​

typescript
enum Alignment {
  CENTER = 'center',
  LEFT = 'left',
  RIGHT = 'right',
  JUSTIFY = 'justify',
}

ButtonStyle ​

typescript
enum ButtonStyle {
  SQUARE_CORNERS = 1,
  ROUNDED_CORNERS = 2,
  SKEW_EFFECT = 3,
  MARVEL_APP = 4,
}

CloseButtonStyle ​

typescript
enum CloseButtonStyle {
  CLASSIC_ROUND_BUTTON = 'classic',
  X_SIGN = 'x-sign',
  BIG_ROUND_BUTTON = 'big',
}

ShareButtonStyle ​

typescript
enum ShareButtonStyle {
  CLASSIC_VIEW = 'classic',
  GRACEFUL_VIEW = 'graceful',
}

AspectRatio ​

typescript
enum AspectRatio {
  SQUARE = '1:1',
  TWO_TO_ONE = '2:1',
  FOUR_TO_THREE = '4:3',
  SIXTEEN_TO_NINE = '16:9',
}

CarouselLayout ​

typescript
enum CarouselLayout {
  STANDARD = 'standard',
  RIGHT_SIDE = 'right-side',
  LEFT_SIDE = 'left-side',
}
typescript
enum NavigationStyle {
  BASIC_STYLE = 1,
  ROUNDED_CENTERED = 2,
  ROUNDED_LEFT = 3,
  RECTANGLE_TABS_ONLY_TOP = 4,
  ROUND_TABS_ONLY_TOP = 5,
  BORDERLESS = 6,
}

ExpansionBehaviour ​

typescript
enum ExpansionBehaviour {
  STANDARD = 1,
  POST_LIGHTBOX = 2,
}

LoadMoreOption ​

typescript
enum LoadMoreOption {
  AUTOLOAD = 1,
  BUTTON = 2,
}

MouseOverEffect ​

typescript
enum MouseOverEffect {
  PICKING_UP = 1,
  ZOOM_IN_EFFECT = 2,
  MAGNIFY = 3,
}