UI Customizations

Suggest Edits

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 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)

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)

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)

Player View

You can customize the player that opens when the trigger is clicked. You can customize the configuration for player in standalone mode or with a trigger :

let playerConfiguration: JoinStoriesPlayerConfigurations = JoinStoriesPlayerConfigurations()

let playerView = JoinStoriesPlayer(playerConfiguration, alias: "<your_join_alias>")

let playerConfiguration: JoinStoriesPlayerConfigurations = JoinStoriesPlayerConfigurations()
let trigger = BubbleTriggerView(playerConfiguration, ...)

Player Start Opening Animation (only standalone mode)

The start opening animation can be changed when the player is used in standalone mode. By default, the animation start from the bottom of the screen.

// enum PlayerStandaloneAnimationOriginType {
//    case top
//    case topLeft
//    case topRight
//    case bottom
//    case bottomLeft
//    case bottomRight
// }

JoinStoriesPlayerConfigurations(playerStandaloneAnimationOrigin: PlayerStandaloneAnimationOriginType)

Player Vertical Anchor

The attribute changes the player anchor when the player's height is smaller than screen height. The default anchor is .top

// enum PlayerVerticalAnchorType {
//    case top
//    case bottom
//    case center
//}

JoinStoriesPlayerConfigurations(playerVerticalAnchor: PlayerVerticalAnchorType)

Player Background Color

The attribute changes the background color of player. The background color is .black by default

JoinStoriesPlayerConfigurations(playerBackgroundColor: UIColor)

Player Horizontal Margins

The attribute changes the player's left and right margins. By default, the player has no margin.

JoinStoriesPlayerConfigurations(playerBackgroundColor: CGFloat)

Player Corner Radius

The attribute changes the corner radius of player. By default, the corner radius is 0.

JoinStoriesPlayerConfigurations(playerCornerRadius: CGFloat)

Player Progress Bar

These attributes change the style of the progress bar at the top of the player

JoinStoriesPlayerConfigurations(playerProgressBarDefaultColor: UIColor)

JoinStoriesPlayerConfigurations(playerProgressBarFillColor: UIColor)

JoinStoriesPlayerConfigurations(playerProgressBarThickness: CGFloat)

JoinStoriesPlayerConfigurations(playerProgressBarRadius: CGFloat)

📘

Tip

Default Color : The default color is .white with 50% of alpha

Fill Color : The default color is .white

Thickness : By default, the thickness is 2

Radius : By default, the radius is 6

Updated 5 months ago