One-to-one Virtual Shopping Business Portal

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.

<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>

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 Attributes
NameDescriptionDefault 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>

PreviousCarousel / GridNextFloating Player

Last updated