# Storyblock (Web)

Storyblock is used when you want to integrate the video player directly on to your website.

<div align="left"><img src="https://business.firework.com/storyblock.gif" alt="Storyblock"></div>

## 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/storyblock.js" type="text/javascript"></script>
```

Place the web component where the Storyblock should be displayed.

```markup
<fw-storyblock
  channel="firework"
></fw-storyblock>
```

{% endtab %}

{% tab title="AMP" %}
AMP HTML header part (avoid duplication with previously declared scripts)

```markup
 <script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
 <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-latest.js"></script>
 <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
```

AMP HTML header part

```markup
    <script id="amp-access" type="application/json">
    [{
        "noPingback": true,
        "authorization": "https://fireworktv.com/embed/amp-access?&source_url=SOURCE_URL&ampdoc_url=AMPDOC_URL&canonical_url=CANONICAL_URL&document_referrer=DOCUMENT_REFERRER&reader_id=READER_ID&_=RANDOM",
        "authorizationFallbackResponse": {
            "access": false,
            "error": true
        },
        "namespace": "fwn"
    }]
    </script>
```

AMP HTML body part. Search for `{CHANNEL}` and replace with your **channel name**. Other params can be serialized as iframe src querystring.

```markup
<!-- This part goes to body -->
<section amp-access="fwn.access">
    <template amp-access-template type="amp-mustache">
        <amp-iframe height="600" layout="fixed-height" resizable width="auto" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation allow-top-navigation-by-user-activation"
            src="https://fw.tv/iframe/embed-feed?&channel={CHANNEL}&open_in=_blank&page_url={{fwn.source_url}}"
        >
            <div overflow>Loading videos...</div>
            <div placeholder style="text-align:center;margin:50px 0;">
                <amp-img layout="fixed" width="300" height="118" src="https://asset.fireworktv.com/images/amp/firework.png"></amp-img>
            </div>
        </amp-iframe>
    </template>
</section>
```

{% endtab %}

{% tab title="iframe" %}
IFrame integrations are based on Firework hosted code snippets. Querystring of `src` attribute should be used to pass any additional attributes. Please note `page_url` is also used as a primary url for sharing. Read more about [iframe limitations here](https://docs.firework.tv/web/troubleshooting#iframe_limitations).

```markup
<iframe
  allow="autoplay; web-share;"
  style="background: transparent; border: none; height: 50vh"
  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation allow-top-navigation-by-user-activation"
  src="https://fw.tv/iframe/storyblock?amp=1&channel={CHANNEL}&page_url={CURRENT_URL}"
></iframe>
```

{% hint style="info" %}
IFrame integration can be used for Facebook Instant Article as well. Please follow the FB guidelines on how to include embeds. <https://developers.facebook.com/docs/instant-articles/reference/embeds>
{% endhint %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
In case your page uses multiple widget components, insert `<script>` tag with combined `fwn.js` file instead of requesting each js file individually. This would improve your performance.

*Example:*

`<script`\
`async`\
`src="//asset.fwcdn3.com/js/fwn.js"`\
`type="text/javascript"`\
`></script>`
{% endhint %}

## 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) . You can find the list of attributes specific to Storyblock in the section below

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

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

<table><thead><tr><th width="207.38612687452618">Name</th><th width="334.0283867788573">Description</th><th>Default value</th></tr></thead><tbody><tr><td><code>max_videos</code></td><td>number of videos showed in storyblock</td><td>Infinity</td></tr><tr><td><code>loop</code></td><td>loop feed of videos</td><td><code>false</code></td></tr><tr><td><code>dock</code></td><td>dock to minimized player when scrolled out of viewport</td><td><code>false</code></td></tr><tr><td><code>mode</code></td><td><p><code>pinned</code> for initialized as minimized player</p><p><code>fullscreen</code> for player in fullscreen mode</p></td><td>✕</td></tr><tr><td><code>page_url</code></td><td>page url of widget, this configuration is considered only if widget is used inside iframe</td><td>URL of opened page</td></tr><tr><td><code>height</code></td><td>height of Storyblock widget, if not used Storyblock will use 100% of parent container, but maximally 75% of visible height</td><td><code>75vh</code> - 75% of visible height</td></tr><tr><td><code>player_captions</code></td><td>Disable the title of the video appearing on the player</td><td><code>true</code></td></tr></tbody></table>
