# Hero Unit

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

{% tabs %}
{% tab title="HTML" %}
Place the javascript part either on the `<head>` or `<body>` or right above the Firework component you are adding.

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

Place the web component where the feed should be displayed.

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

{% endtab %}
{% endtabs %}

## Attributes <a href="#attributes" id="attributes"></a>

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

{% content-ref url="../player/player-attributes" %}
[player-attributes](https://docs.firework.com/firework-1-1/web/integration-guide/player/player-attributes)
{% endcontent-ref %}

{% content-ref url="../feed-attributes" %}
[feed-attributes](https://docs.firework.com/firework-1-1/web/integration-guide/feed-attributes)
{% endcontent-ref %}

{% content-ref url="storyblock" %}
[storyblock](https://docs.firework.com/firework-1-1/web/integration-guide/components/storyblock)
{% endcontent-ref %}

<table><thead><tr><th width="236">Name</th><th width="419.76234003656305">Description</th><th>Default Value</th></tr></thead><tbody><tr><td><code>height</code></td><td>Height of the unit. Accepts CSS height string.</td><td><code>75vh</code></td></tr><tr><td><code>hero_text_mode</code></td><td><code>even | stretched</code></td><td><code>even</code></td></tr><tr><td></td><td>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</td><td></td></tr><tr><td><code>hero_flip_order</code></td><td>Boolean to flip the order of video and countdown</td><td><code>false</code></td></tr><tr><td><code>hero_hide_countdown</code></td><td>Boolean to hide the countdown.</td><td><code>false</code></td></tr><tr><td><code>hero_previous_event_promotion</code></td><td>Boolean to hide/show the previous event promotion</td><td><code>true</code></td></tr></tbody></table>
