This guide shows you how to customize the JOIN Stories experience of your users. These customizations apply to Bubble, Card List, Card Grid and Player.

📘

Before you begin

It is advised to apply these customizations after JOINStoriesInit if you are planning to do the customizations programmatically.

Bubble Trigger View

This section shows supported customizations on the Bubble trigger.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration()

Bubble Label

These attributes changes the label below each bubble.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(showLabel: Boolean)

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(labelFont: Typeface?)

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(labelFontSize: Float)

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(labelColor: Int)

📘

Tip

Visibility: The label is visible by default

Font : The label use the font of device by default

Font Size : The font size of label is 12f by default

Color : The label color is Color.BLACK by default

Bubble Spacing

This attribute changes the spacing between each bubble. The spacing is 12dp by default

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(thumbViewSpacing: Int)

Bubble Size

This attribute changes the bubble size. The size is 74dp by default

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(thumbViewSize: Int)

Bubble Loaders Color

This attribute changes the colors of loader. By default, the loader use "#D9222D" and "#FFA800" colors.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(loaderColors: IntArray)

Bubble Loader Size

This attribute changes the width of loader. By default, the width of loader is 2dp

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(loaderWidth: Int)

Bubble Reordered Read Stories

This attribute controls whether already read stories are reordered. By default, the value is null, which means the SDK default behavior is used.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(reorderedReadStories = true)

Bubble Enable Read

This attribute controls whether the read state is enabled for stories. By default, the value is null, which means the SDK default behavior is used.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(enableRead = true)

Bubble Story Viewed Indicator Color

This attribute changes the color of story viewed indicator. By default, the color is Color.GRAY. For this feature to be enabled, the value of enableRead must be set to something other than false.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(storyViewedIndicatorColor: Int)

Bubble Play Button Visibility

This attribute changes the visibility of the play button on the bubble image. By default, the play button is visible.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(showPlayButton: Boolean)

Bubble Animation

An animation can be added to the widget's first bubble. It is currently possible to add a pulse or not. By default, there is no animation (AnimationType.NONE).

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(animationType: AnimationType.PULSE)

Card Trigger View

Card configuration is shared by grid cards and list cards.
Use CardGridConfiguration for grid layouts and CardListConfiguration for horizontal list layouts.

val cardTrigger: CardTriggerView = CardTriggerView(context)

cardTrigger.cardConfiguration = CardGridConfiguration()
// OR
cardTrigger.cardConfiguration = CardListConfiguration()

Card Radius

This attribute changes the radius of card. By default, the radius is 8dp in list format and 10dp in grid format.

cardTrigger.cardConfiguration = CardGridConfiguration(cardRadius: Int)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(cardRadius: Int)

Card Elevation

This attribute changes the elevation of card. By default, the radius is 2dp .

cardTrigger.cardConfiguration = CardGridConfiguration(cardElevation: Int)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(cardElevation: Int)

Card Play Button Visibility

This attribute changes the visibility of the play button on the card image. By default, the play button is visible.

cardTrigger.cardConfiguration = CardGridConfiguration(showPlayButton: Boolean)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(showPlayButton: Boolean)

Card Label

These attributes changes the label below each card.

cardTrigger.cardConfiguration = CardGridConfiguration(showLabel: Boolean)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(showLabel: Boolean)

cardTrigger.cardConfiguration = CardGridConfiguration(labelFont: Typeface?)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(labelFont: Typeface?)

cardTrigger.cardConfiguration = CardGridConfiguration(labelFontSize: Float)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(labelFontSize: Float)

cardTrigger.cardConfiguration = CardGridConfiguration(labelColor: Int)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(labelColor: Int)

📘

Tip

Visibility: The label is visible by default.

Font : The label use the font of device by default

Font Size : By default, the font size of label is 12f in list format and 19f in grid format.

Color : The label color is Color.WHITE by default

Card Overlay Visibility

This attribute changes the visibility of overlay present at the bottom of each card (below the label). By default, the overlay is visible.

cardTrigger.cardConfiguration = CardGridConfiguration(showOverlay: Boolean)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(showOverlay: Boolean)

Card Spacing

This attribute changes the spacing between each card. By default, the spacing is 6dp in list format and 16dp in grid format

cardTrigger.cardConfiguration = CardGridConfiguration(spacing: Int)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(spacing: Int)

Card Border Color

This attribute changes the color of border. By default, the border is Color.TRANSPARENT

cardTrigger.cardConfiguration = CardGridConfiguration(borderColor: Int)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(borderColor: Int)

Card Border Size

This attribute changes the width of border. By default, the width of loader is 0

cardTrigger.cardConfiguration = CardGridConfiguration(borderWidth: Int)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(borderWidth: Int)

Card Reordered Read Stories

This attribute controls whether already read stories are reordered. By default, the value is null, which means the SDK default behavior is used.

cardTrigger.cardConfiguration = CardGridConfiguration(reorderedReadStories = true)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(reorderedReadStories = true)

Card Enable Read

This attribute controls whether the read state is enabled for stories. By default, the value is null, which means the SDK default behavior is used.

cardTrigger.cardConfiguration = CardGridConfiguration(enableRead = true)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(enableRead = true)

Card Story Viewed Indicator Color

This attribute changes the color of story viewed indicator. By default, the color is Color.TRANSPARENT. For this feature to be enabled, the value of enableRead must be set to something other than false.

cardTrigger.cardConfiguration = CardGridConfiguration(storyViewedBorderColor: Int)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(storyViewedBorderColor: Int)

Number of columns (only Card Grid)

This attribute changes the number of columns in the card grid. By default, it is 2 columns.

cardTrigger.cardConfiguration = CardGridConfiguration(numberOfColumns: Int)

Card Size

By default, cards is in 9:16 format but you can change the size of card using a CardSize object. The CardSize request a CardSizeType (CardSizeType.Ratio or CardSizeType.Fixed) and a value.

CardSize(type: CardSizeType, value: Float)

Card Grid Height

In card grid format, you can only customize height. The card take the max width available in CardTriggerView.
You can force the height with fixed size or use a ratio based on the max width available.

val height = CardSize(type: CardSizeType.Fixed, value: 200f)
//OR
val height = CardSize(type: CardSizeType.Ratio, value: 0.5f)

cardTrigger.cardConfiguration = CardGridConfiguration(cardHeight: height)

Card List Width

In card list format, you can only customize width. The card take the height of CardTriggerView.
You can force the width with fixed size or use a ratio based on the height.

val width = CardSize(type: CardSizeType.Fixed, value: 150f)
//OR
val width = CardSize(type: CardSizeType.Ratio, value: 1f)

cardTrigger.cardConfiguration = CardListConfiguration(cardWidth: width)

Card Story Animation

An animation can be added to the widget's first card. It is currently possible to add a pulse or not. By default, there is no animation (AnimationType.NONE).

cardTrigger.cardConfiguration = CardGridConfiguration(animationType: AnimationType.PULSE)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(animationType: AnimationType.NONE)

Player View

📘

Read player customization documentation to improve player experience

Player documentation