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: |
data-new-disabled | Boolean (true or false) | Disable showing the NEW pill and the Gradient. Default: |
data-new-pill-disabled | Boolean (true or false) | Disable showing the NEW pill. Default: |
data-new-gradient-disabled | Boolean (true or false) | Disable showing the Gradient. Default: |
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: |
data-pulse-color | HEX Color without the # prefix | The "pulse" color (background shadow during the NEW animation). Default: |
* 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