Hero Unit

Component suitable for Livestream events.

Hero Unit allows you livestream event to be promoted with countdown, sharing, and add to calendar. Hero Unit is a natural extension of our existing and battle-proven Storyblock better suited to promote events.

Integration

Place the javascript part either on the <head> or <body> or right above the Firework component you are adding.

<script async src="//asset.fwcdn3.com/js/fwn.js" type="text/javascript" ></script>

Place the web component where the feed should be displayed.

<fw-herounit
  channel="your-channel"
  playlist="your-livestream-playlist"
></fw-herounit>

Attributes

In addition to the attributes described below, there are Player Attributes (which affects the way player behaves) and Feed Attributes (which decides the content being displayed). Also Hero Unit extends Storyblock, those can be used as well. You can find the list of attributes specific to Hero Unit in the section below

pagePlayer Attributes pageFeed Attributes pageStoryblock

Name Description Default Value

Name	Description	Default Value
`height`	Height of the unit. Accepts CSS height string.	`75vh`
`hero_text_mode`	`even \| stretched`	`even`
	With "even", the unit will use 50% for the countdown and the rest split between video and gaps. With "stretched", max room will be dedicated to countdown. For better finetuning, you can try to wrap the widget to give it some padding constraints
`hero_flip_order`	Boolean to flip the order of video and countdown	`false`
`hero_hide_countdown`	Boolean to hide the countdown.	`false`
`hero_previous_event_promotion`	Boolean to hide/show the previous event promotion	`true`

height

Height of the unit. Accepts CSS height string.

75vh

hero_text_mode

even | stretched

even

With "even", the unit will use 50% for the countdown and the rest split between video and gaps. With "stretched", max room will be dedicated to countdown. For better finetuning, you can try to wrap the widget to give it some padding constraints

hero_flip_order

Boolean to flip the order of video and countdown

false

hero_hide_countdown

Boolean to hide the countdown.

false

hero_previous_event_promotion

Boolean to hide/show the previous event promotion

true

PreviousComponents NextCarousel / Grid

Last updated 4 months ago