Storyblock
Storyblock is used when you want to integrate the video player directly on to your website.
Integration
Place the javascript part either on the <head>
or <body>
or right above the Firework component you are adding.
Place the web component where the Storyblock should be displayed.
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
pagePlayer AttributespageFeed AttributesName | Description | Default value |
---|---|---|
| number of videos showed in storyblock | Infinity |
| loop feed of videos | false |
| dock to minimized player when scrolled out of viewport | false |
|
| ✕ |
| page url of widget, this configuration is considered only if widget is used inside iframe | URL of opened page |
| height of Storyblock widget, if not used Storyblock will use 100% of parent container, but maximally 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 |
| CSS string to specify storyblock background in case its visible. Defaults to |
| CSS string to specify storyblock border radius. Defaults to |
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 |
| Video Player background color (backdrop, tiles, ...). Defaults to semi-transparent black. |
| Background color of chat section in fullscreen player. |
| Background color of commerce section in fullscreen player. |
| Video Player border radiuses. Defaults to |
| Video Player inset CSS string used when minimized. Defaults to |
| Video Player height as a CSS string. Defaults to |
| Video Player width as a CSS string. Defaults to |
| Video Player margin from the edge of screen. Defaults to |
| Customize font for video player UI |
| 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:
Option 2: Target specific element via CSS declaration or inline style
for narrow scope:
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:
Custom font family
Widget Styling Attributes
List of widget attributes which can be used to alter style or UI of Firework components.
Name | Description | Default |
| Link to custom CSS file. | |
| CSS color value of color accents. | |
| CSS color value of CTA button. | |
| CSS color value of CTA button text. | |
| Border radius style.
|
|
| Coma separated values of share sheet options. |
|
Examples
Last updated