Links

Storyblock

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

Integration

HTML
AMP
iframe
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/storyblock.js" type="text/javascript"></script>
Place the web component where the Storyblock should be displayed.
<fw-storyblock
channel="firework"
></fw-storyblock>
AMP HTML header part (avoid duplication with previously declared scripts)
<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
<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.
<!-- 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>
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.
<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>
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
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>

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
Name
Description
Default value
max_videos
number of videos showed in storyblock
Infinity
loop
loop feed of videos
false
dock
dock to minimized player when scrolled out of viewport
false
mode
pinned for initialized as minimized player
fullscreen for player in fullscreen mode
page_url
page url of widget, this configuration is considered only if widget is used inside iframe
URL of opened page
height
height of Storyblock widget, if not used Storyblock will use 100% of parent container, but maximally 75% of visible height
75vh - 75% of visible height

Storyblock Styling

Storyblock

CSS variables for embed feed can be declared in global scope or on specific <fw-storyblock> component. You can declare in :root, head ,body or on specific <fw-storyblock> component.
Variable
Description
--fw-storyblock-background
CSS string to specify storyblock background in case its visible. Defaults to black.
--fw-storyblock-border-radius
CSS string to specify storyblock border radius. Defaults to 10px.

Video Player

CSS variables for video player needs to be declared in global scope. :root, head or body is ok. Values applied to all Video Player instances and Storyblocks.
Variable
Description
--fw-player-background
Video Player background color (backdrop, tiles, ...). Defaults to semi-transparent black.
--fw-player-chat-background
Background color of chat section in fullscreen player.
--fw-player-shop-background
Background color of commerce section in fullscreen player.
--fw-player-border-radius
Video Player border radiuses. Defaults to 14px.
--fw-player-inset
Video Player inset CSS string used when minimized. Defaults to auto 0 0 auto for bottom right corner.
--fw-player-height
Video Player height as a CSS string. Defaults to 320px or 192px for small screens.
--fw-player-width
Video Player width as a CSS string. Defaults to 180px or 108px for small screens.
--fw-player-margin
Video Player margin from the edge of screen. Defaults to 16px or 8px for small screens.
--fw-font-family
Customize font for video player UI
--fw-player-header-font-family
--fw-player-chat-font-family
--fw-product-name-font-family
--fw-product-price-font-family
--fw-product-description-font-family
More granular font settings for header, chat and product.

Applying CSS variables

There are multiple ways how to scope CSS variables in general.
Option 1: Target :root, html or body element to achieve broader scope:
<style>
:root {
--fw-player-background: rgba(255, 255, 255, 0.6);
--fw-player-border-radius: 0;
}
</style>
Option 2: Target specific element via CSS declaration or inline style for narrow scope:
<style>
fw-storyblock {
// `id` or `class` can be used as well.
--fw-storyblock-background: transparent;
}
</style>
<fw-storyblock
channel="awesome-channel"
playlist="kj43j2"
style="--fw-font-family: 'Roboto Slab', serif"
></fw-storyblock>
Styling fullscreen video element on a more broader scope (:root) might be necessary since many components do not render video within them, rather use <body> as a placement.

Examples

Remove border radius and change player backgorund to white:

<style>
:root {
--fw-player-background: rgba(255, 255, 255, 0.6);
--fw-player-border-radius: 0;
}
fw-embed-feed {
--fw-thumbnail-border-radius: 0;
}
</style>

Custom font family

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');
:root {
--fw-font-family: "Roboto Slab", serif;
}
</style>

Widget Styling Attributes

List of widget attributes which can be used to alter style or UI of Firework components.
Name
Description
Default
ui_font_css
Link to custom CSS file.
ui_primary_color
CSS color value of color accents.
ui_button_color
CSS color value of CTA button.
ui_button_font_color
CSS color value of CTA button text.
ui_border_style
Border radius style.
  • rounded radius ~14px
  • hard No radius
rounded
ui_share_sheet
Coma separated values of share sheet options.
facebook,twitter,whatsapp, sms,copy,native

Examples

<fw-storyblock
channel="awesome-channel"
playlist="kj43j2"
ui_primary_color="rgb(255, 0, 0);"
></fw-storyblock>