One-to-one Virtual Shopping Business Portal

Carousel / Grid

Embed feed - Carousel or Grid allows the content to be displayed as a row or grid of thumbnails. Embed feeds are usually used for content discovery where the user can see multiple content and increases the chance to initiate the content engagement.

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/embed-feed.js" type="text/javascript" ></script>

Place the web component where the feed should be displayed.

<fw-embed-feed
  channel="your-channel"
  mode="row"
></fw-embed-feed>

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 Embed Feed in the section below

pagePlayer AttributespageFeed Attributes
NameDescriptionDefault Value

mode

row | grid | pinned

One of three available display modes.

row

size

medium | large

Thumbnail size. Does not apply to grid mode

large

placement

top | middle | bottom Informal value about placement position.

open_in

Where to open video player on thumbnail click.

  • default - this option will allow us to pick most suitable way how to open player on page based on browser, device and others

  • _modal - popup-like modal (does not leave publisher site)

  • _self - current tab

  • _blank - new tab

default

max_videos

Max. number of videos loaded for grid mode. Zero 0 creates grid with infinite scroll.

paginate_by

Page size for manual pagination in grid mode. Reveals "Load More" button to load next page. Please notepaginate_by ** and ** max_videos are fuzzy numbers which do not allow any orphaned thumbnails to fall on next grid row.

autoplay

true | false

Autoplays first thumbnail.

true

captions

true | false

Show captions for autoplayed thumbnails

true

title

Specify title for grid mode. Defaults to localized "Stories and Short Videos"

product_tag_placement

top | bottom | false Product tag indicating video contains a product card can be positioned on top, bottom or disabled.

top

Embed Feed Styling

CSS variables for embed feed can be declared in global scope or on specific <fw-embed-feed> component. You can declare in :root, head ,body or on specific <fw-embed-feed> component.

Variable

Description

--fw-thumbnail-border-radius

Border radius for feed thumbnails. Defaults to 10px.

--fw-thumbnail-width

Custom thumbnail width. Defaults to 240px.

--fw-thumbnail-height

Custom thumbnail height. Defaults to 400px.

--fw-thumbnail-gap

Gap between thumbnails. Defaults to 10px.

--fw-font-family

Customize font for video title to better match you site design.

--fw-ad-badge-background

Custom "Sponsored" badge background

--fw-ad-badge-font-color

Custom "Sponsored" badge font color

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

Example

<fw-embed-feed
    channel="awesome-channel"
    playlist="kj43j2"
    ui_border_style = "hard"
></fw-embed-feed>
PreviousHero UnitNextStoryblock

Last updated