Skip to main content

Product highlights

Product highlights allow the host of a live show to pin a product in the player overlay. Your app is notified whenever the highlighted product changes, and can update custom native UI elements in response.

Handle Highlight Updates​

Listen for the should-update-product-highlight event in your BambuserVideoPlayerDelegate implementation.

videoPlayerDelegate = object : BambuserVideoPlayerDelegate {
    override fun onNewEventReceived(
        playerId: String,
        event: BambuserEventPayload,
        viewActions: ViewActions
    ) {
        when (event.event) {

            "should-update-product-highlight" -> {
                val productData = event.data["event"] as? Map<*, *> ?: return
                val productId = productData["id"] as? String
                val sku       = productData["ref"] as? String
                val title     = productData["title"] as? String

                // Fetch your own product data to hydrate the products
            }
        }
    }
}

Handle Product View (Custom Navigation)​

When the product button is set to "none", tapping a highlighted product fires should-show-product-view instead of opening the player's built-in modal. Navigate to your native product detail screen.

"should-show-product-view" -> {
    val productData = event.data["event"] as? Map<*, *> ?: return
    val sku = productData["ref"] as? String ?: return

    runOnUiThread {
        navigateToProduct(sku)
    }
}

Enable custom product view handling in your player configuration:

configuration = mapOf(
    "buttons" to mapOf(
        "product" to "none"
    )
)

Handle Product List​

Use should-show-product-list and should-hide-product-list to coordinate your own overlay with the player's product list.

"should-show-product-list" -> {
    runOnUiThread { showProductListOverlay() }
}

"should-hide-product-list" -> {
    runOnUiThread { hideProductListOverlay() }
}

Note: Product data for highlights is supplied to the player via product hydration. See Product hydration for details on providing product data using getShoppableVideoPlayerCollection.