First time slide customization

Customize the Viewer onboarding slide in an Android 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 Android SDK before you set player styles.
• Start from BlazeStoryPlayerStyle.base() and override only the properties you need.
• The firstTimeSlide property lives on BlazeStoryPlayerStyle.
• backgroundColorResId is a color resource ID, not a raw color int.

Set a global default

Call setDefaultStoryPlayerStyle after SDK initialization.

val storyStyle = BlazeStoryPlayerStyle.base().apply {
    firstTimeSlide.apply {
        show = true
        mainTitle = BlazeFirstTimeSlideTextStyle.storyMainTitle().apply {
            text = "Welcome to stories"
        }
        subtitle = BlazeFirstTimeSlideTextStyle.storySubTitle().apply {
            text = "Swipe and tap to explore highlights"
        }
        backgroundColorResId = R.color.first_time_slide_background
        cta = BlazeFirstTimeSlideCTAStyle.default().apply {
            title = "Got it"
        }
        instructions.forward.headerText.text = "Next page"
        instructions.pause.isVisible = false
    }
}

BlazeSDK.setDefaultStoryPlayerStyle(storyStyle)

Scope the style to one widget or play call

• Widget: pass playerStyle in initWidget or call updatePlayerStyle on the widget.
• Single session: pass a style argument when you open stories programmatically.

See Story player customizations and Android widgets.

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 Android SDK version: 1.18.0 or later.

Add custom instruction rows

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

val shareTip = BlazeFirstTimeSlideInstructionStyle(
    headerText = BlazeFirstTimeSlideInstructionStyle.header().apply {
        text = "Share"
    },
    descriptionText = BlazeFirstTimeSlideInstructionStyle.description().apply {
        text = "Tap the share icon on any story"
    },
    iconDrawableResId = R.drawable.ic_share,
    isVisible = true
)

storyStyle.firstTimeSlide.instructions.customs = listOf(shareTip)

Related API reference

• BlazeStoryPlayerFirstTimeSlideStyle
• BlazeStoryPlayerFirstTimeSlideInstructionsStyle
• BlazeFirstTimeSlideTextStyle
• BlazeFirstTimeSlideCTAStyle
• BlazeFirstTimeSlideInstructionStyle