Stories
Widget used to display a list of playlists in a "Stories" layout
To use this widget you'll need to setup display conditions in your playlists settings, letting them appear in the html tag whenever the display conditions match the current url where your tag is included.
For example, if your widget in a url with /products/shoes and you set in your playlist in the widget conditions Contains: /products/shoes, the playlist will be displayed in your stories widget.
HTML Snippet
Attributes
Here all attributes you can use in a HTML widget element:
Key
Value
Description
data-type*
String (stories in this cas)
Widget type
data-title
Boolean (true or false)
Display the title of the playlist. Default: true
data-new-disabled
Boolean (true or false)
Disable showing the NEW pill and the Gradient. Default: false
data-new-pill-disabled
Boolean (true or false)
Disable showing the NEW pill. Default: false
data-new-gradient-disabled
Boolean (true or false)
Disable showing the Gradient. Default: false
data-border-color
CSS Color string (either a HEX, a RGB, HLS or event linear-gradient value).
The color(s) used for the border around the story when it's new.
Default: linear-gradient(225deg, rgba(255, 245, 0, 1) 0%, rgba(254, 153, 2, 1) 50%, rgba(254, 2, 2, 1) 100%)
data-pulse-color
HEX Color without the # prefix
The "pulse" color (background shadow during the NEW animation). Default: FF0000
* Required fields
CSS Classes
You can customize your widget appearance by overwriting the CSS, here all CSS classes you can select:
Name
Description
.aploze-stories
Stories Widget
.aploze-stories__container
Stories Container
.aploze-stories__left-arrow
Left Arrow
.aploze-stories__right-arrow
Right Arrow
.aploze-stories__story-element
Story Bubble Wrapper
.aploze-stories__story-element--image
Story Bubble Image
.aploze-stories__story-element--name
Story Bubble Title
.aploze-stories__story-element--icon-wrapper
Story Bubble Icon Wrapper
.aploze-stories__story-element--new-pill
Story Bubble New Pill
.aploze-stories__story-element--border-color
Story Bubble Border
.aploze-stories__skeleton
Skeleton Wrapper
.aploze-stories__skeleton--bubble
Skeleton Bubble
.aploze-stories__skeleton--title
Skeleton Title
Last updated