Skip to main content

Product highlights

Product highlights allow the host of a live show to pin a product in the player overlay, drawing viewer attention to it. Your app is notified whenever the highlighted product changes, and can react by updating custom UI elements.

Handle Highlight Updates​

Listen for the should-update-product-highlight event in your BambuserVideoPlayerDelegate to receive the currently highlighted product. The event contains a products array with one product when a product is highlighted, and an empty array when the highlight is cleared.

func onNewEventReceived(id: String, event: BambuserEventPayload) {
    switch event.type {

    case "should-update-product-highlight":
        guard let products = (event.data["event"] as? [String: Sendable])?["products"] as? [[String: Sendable]] else { return }

        guard let productData = products.first else {
            DispatchQueue.main.async {
                self.clearHighlightedProduct()
            }
            return
        }

        let productId = productData["id"] as? String
        let sku       = productData["ref"] as? String
        let title     = productData["title"] as? String

        DispatchQueue.main.async {
            // Use these values to update your custom highlighted product UI
        }

    default:
        break
    }
}

Handle Product View (Custom Navigation)​

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

case "should-show-product-view":
    guard let productData = event.data["event"] as? [String: Sendable],
          let sku = productData["ref"] as? String else { return }

    DispatchQueue.main.async {
        self.navigateToProduct(sku: sku)
    }

To enable this behavior, set the product button to "none" in your player configuration:

configuration: [
    "buttons": [
        "product": "none"
    ]
]

Handle Product List​

When a user opens the product list in the player with product set to "none", the should-show-product-list and should-hide-product-list events fire. You can use these to coordinate your own product list overlay with the player.

case "should-show-product-list":
    DispatchQueue.main.async {
        self.showProductListOverlay()
    }

case "should-hide-product-list":
    DispatchQueue.main.async {
        self.hideProductListOverlay()
    }

Note: Product data for highlights is provided to the player via product hydration. See Product hydration for how to supply product details using invoke("updateProductWithData", ...).