CTA

Customize CTA (Click To Action)

CTA Options

The CTA button behavior and style can be customized using the CTA Options.

val ctaOptions = CtaOption.Builder()
    .ctaDelay(CtaDelay(ctaDelayDuration, ctaDelayUnit.toCtaDelayUnit()))
    .ctaHighlightDelay(CtaDelay(ctaHighlightDelayDuration, ctaHighlightDelayUnit.toCtaDelayUnit()))
    .ctaMode(CtaMode.FULL_WIDTH)
    .build()

Mode includes:

enum class CtaMode {
    FULL_WIDTH,
    COMPACT,
    SIZE_TO_FIT,
}

It is possible to control the appearance of the CTA button using delay and highlight delay values, as well as defining the unit type, which can be either seconds elapsed from the video playback start or a percentage. This allows you to choose when the CTA appears as a grayed button and when it becomes fully visible:

enum class CtaDelayUnit {
    SECONDS,
    PERCENTAGE,
}

CTA Handling

The CTA functionality can be handled by the SDK if you set sdkHandleCtaButtonClick to true or by the host app if you set it to false while setting the View Options during initialization:

val playerOptions = PlayerOption.Builder()
            ...
            .sdkHandleCtaButtonClick(true|false)
            ...

If the host app wants to handle the CTA, you can use the analytic callback to get informed that a CTA button is clicked and act on it. You can read more about analytic callbacks here.

@FwAnalyticCallable
fun onCtaButtonClicked(event: CtaButtonClickAnalyticsEvent) {
    Log.i("CTA clicked: " + event.label + " " + event.actionUrl)
}

This method will receive all the required parameters in CtaButtonClickAnalyticsEvent

CTA Popup modal

Using the CTA button clicked analytic callback you can also show a popup modal over the player.

The layout XML file can look something like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".CtaModalActivity">

    <View
        android:id="@+id/overlay"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">

    ...
    
    </androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

The popup modal is just a transparent Activity in the host app which can be done like this:

class CtaModalActivity : AppCompatActivity() {

    private lateinit var binding: ActivityCtaModalBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityCtaModalBinding.inflate(LayoutInflater.from(this))
        setContentView(binding.root)

        val event = intent.getSerializableExtraCompat(EXTRA_EVENT) as? CtaButtonClickAnalyticsEvent
        
        ...

        binding.overlay.setOnClickListener {
            finish() // this will handle the user click outside the view
        }

        binding.close.setOnClickListener {
            finish() // this can be a close or skip button
        }
    }

    override fun onResume() {
        super.onResume()
        hideSystemNavigationUI() // This makes sure that modal activity looks and behaves the same as Player
    }

    private fun hideSystemNavigationUI() {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        WindowInsetsControllerCompat(window, binding.root).let { controller ->
            controller.hide(WindowInsetsCompat.Type.navigationBars())
            controller.systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
        }
    }

    private inline fun <reified T : Serializable> Intent.getSerializableExtraCompat(key: String): T? = when {
        Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU -> getSerializableExtra(key, T::class.java)
        else ->
            @Suppress("DEPRECATION")
            getSerializableExtra(key) as? T
    }

    companion object {
        private const val EXTRA_EVENT = "event"

        fun start(context: Context, event: CtaButtonClickAnalyticsEvent) {
            val intent = Intent(context, CtaModalActivity::class.java)
            intent.putExtra(EXTRA_EVENT, event)
            context.startActivity(intent)
        }
    }
}

The activity should be declared in the host app manifest with a transparent theme:

<activity
    android:name=".CtaModalActivity"
    android:theme="@style/AppTheme.Transparent" />

and the transparent theme can be defined like this:

    <style name="AppTheme.Transparent" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:backgroundDimEnabled">false</item>
    </style>

Later you can start that activity in the callback:

@FwAnalyticCallable
fun onCtaButtonClicked(event: CtaButtonClickAnalyticsEvent) {
    ...
    if (!isCtaHandledBySDK) {
        CtaModalActivity.start(this, event)
    }
}

All the necessary logic for the popup modal can be held within the activity. The Player will pause when the activity is opened on top and later continue playback of the content after the activity is finished or the user presses the back button.