First time slide customizations - iOS

Customize the Viewer onboarding slide in an iOS app. Override copy and colors, tune built-in gesture instructions, or append custom instruction rows.

For the concept, default slide, and platform support, see Viewer onboarding slide.

Before you start

• Initialize the iOS SDK before you set player styles.
• Start from BlazeStoryPlayerStyle.base() and override only the properties you need.
• The firstTimeSlide property lives on BlazeStoryPlayerStyle.

Set a global default

Call setDefaultStoryPlayerStyle after SDK initialization so every story player uses your first-time slide styling.

var storyStyle = BlazeStoryPlayerStyle.base()

storyStyle.firstTimeSlide.show = true
storyStyle.firstTimeSlide.mainTitle.text = "Welcome to stories"
storyStyle.firstTimeSlide.subtitle.text = "Swipe and tap to explore highlights"
storyStyle.firstTimeSlide.backgroundColor = .systemBackground

storyStyle.firstTimeSlide.cta.title = "Got it"
storyStyle.firstTimeSlide.cta.backgroundColor = .label
storyStyle.firstTimeSlide.cta.textColor = .systemBackground

storyStyle.firstTimeSlide.instructions.forward.headerText.text = "Next page"
storyStyle.firstTimeSlide.instructions.pause.isVisible = false

Blaze.shared.setDefaultStoryPlayerStyle(storyStyle)

Scope the style to one widget or play call

• Widget: set storyPlayerStyle on the stories widget when you create or update it.
• Single session: pass a style argument to playStory or playStories.

Widget and play-call styles merge with the global default. See Story player customizations.

Related story player branding

Use the first-time slide when you need an onboarding moment before playback. Use BlazeStoryPlayerTitleImageStyle when you need a small circular image in the story player header, next to the story title.

The title image can use a dynamic image from titleImageUrl or a static image. Supported iOS SDK version: 1.18.1 or later.

Add custom instruction rows

On iOS, append extra rows with instructions.customs. Custom rows appear after the built-in forward, pause, backward, and transition instructions.

let shareTip = BlazeFirstTimeSlideInstructionStyle(
    headerText: .init(text: "Share", font: .systemFont(ofSize: 22, weight: .medium), textColor: .label),
    descriptionText: .init(text: "Tap the share icon on any story", font: .systemFont(ofSize: 16), textColor: .label),
    icon: UIImage(systemName: "square.and.arrow.up"),
    isVisible: true
)

storyStyle.firstTimeSlide.instructions.customs = [shareTip]

Hide a built-in row instead of replacing it:

storyStyle.firstTimeSlide.instructions.transition.isVisible = false

Related API reference

• BlazeStoryPlayerFirstTimeSlideStyle
• BlazeStoryPlayerFirstTimeSlideInstructionsStyle
• BlazeFirstTimeSlideTextStyle
• BlazeFirstTimeSlideCTAStyle
• BlazeFirstTimeSlideInstructionStyle