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.

Bubble Trigger View

This section shows supported customizations on the Bubble trigger.

let bubbleConfigurationModel = JoinStoriesBubbleConfigurations(...)
let bubbleTriggerView = BubbleTriggerView(bubbleConfigurationModel, alias: "<your_join_alias>")

Bubble Label

These attributes changes the style of label below each bubble.

JoinStoriesBubbleConfigurations(showLabel: Boolean)

JoinStoriesBubbleConfigurations(labelFont: UIFont)

JoinStoriesBubbleConfigurations(labelColor: UIColor)

📘

Tip

Visibility : The label is visible by default

Font : The label use the Avenir font with 12 of size by default

Color : The label color is .black by default

Bubble Spacing

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

JoinStoriesBubbleConfigurations(thumbViewSpacing: CGFloat)

Bubble Size

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

JoinStoriesBubbleConfigurations(thumbViewSize: CGFloat)

Bubble Loaders Color

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

JoinStoriesBubbleConfigurations(loaderColors: [CGColor])

Bubble Loader Size

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

JoinStoriesBubbleConfigurations(loaderWidth: CGFloat)

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.

JoinStoriesBubbleConfigurations(reorderedReadStories: true)

Bubble Story Viewed Indicator Color

This attribute changes the color of story viewed indicator. By default, the color is .gray.

JoinStoriesBubbleConfigurations(storyViewedIndicatorColor: UIColor)

Bubble Play Button Visibility

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

JoinStoriesBubbleConfigurations(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 (.none).

JoinStoriesBubbleConfigurations(animationType: .pulse)

Card Trigger View

This section shows supported customizations on the Card List and Card Grid triggers

let triggerCardConfiguration = TriggerCardConfigurationValues(...)
let triggerCardView = TriggerCardView(triggerCardConfiguration, alias: "<your_join_alias>")
// OR
let triggerListConfiguration = TriggerListConfigurationValues(...)
let triggerListView = TriggerListView(triggerListConfiguration, alias: "<your_join_alias>")

Card Radius

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

TriggerCardConfigurationValues(cardRadius: CGFloat)
// OR
TriggerListConfigurationValues(cardRadius: CGFloat)

Card Elevation

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

TriggerCardConfigurationValues(cardElevation: CGFloat)
// OR
TriggerListConfigurationValues(cardElevation: CGFloat)

Card Play Button Visibility

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

TriggerCardConfigurationValues(showPlayButton: Boolean)
// OR
TriggerListConfigurationValues(showPlayButton: Boolean)

Card Label

These attributes changes the style of label below each card.

TriggerCardConfigurationValues(showLabel: Boolean)
// OR
TriggerListConfigurationValues(showLabel: Boolean)

TriggerCardConfigurationValues(labelFont: UIFont)
// OR
TriggerListConfigurationValues(labelFont: UIFont)

TriggerCardConfigurationValues(labelColor: UIColor)
// OR
TriggerListConfigurationValues(labelColor: UIColor)

📘

Tip

Visibility : The label is visible by default

Font : The label use the Avenir font with 12 size in list format and 19 size in grid format by default.

Color : The label color is .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.

TriggerCardConfigurationValues(showOverlay: Boolean)
// OR
TriggerListConfigurationValues(showOverlay: Boolean)

Card Spacing

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

TriggerCardConfigurationValues(spacing: CGFloat)
// OR
TriggerListConfigurationValues(spacing: CGFloat)

Card Border Color

This attribute changes the color of the border. By default, the loader is .clear.

TriggerCardConfigurationValues(borderColor: UIColor)
// OR
TriggerListConfigurationValues(borderColor: UIColor)

Card Border Size

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

TriggerCardConfigurationValues(borderWidth: Int)
// OR
TriggerListConfigurationValues(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.

TriggerCardConfigurationValues(reorderedReadStories: true)
// OR
TriggerListConfigurationValues(reorderedReadStories: true)

Card Story Viewed Indicator Color

This attribute changes the color of story viewed indicator. By default, the color is .clear.

TriggerCardConfigurationValues(storyViewedBorderColor: UIColor)
// OR
TriggerListConfigurationValues(storyViewedBorderColor: UIColor)

Number of columns (only Card Grid)

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

TriggerCardConfigurationValues(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 TriggerCardView.
You can force the height with fixed size or use a ratio based on the max width available.

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

TriggerCardConfigurationValues(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.

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

TriggerListView(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.

TriggerCardConfigurationValues(animationType: .pulse)
// OR
TriggerListConfigurationValues(animationType: .none)

Player View

📘

Read player customization documentation to improve player experience

Player documentation