Shoppable Videos

FireworkVideoSDK contains a shopping property that enables video shopping integration. There are two main points of integration both located on the FireworkVideoShopping type.
Assign a FireworkVideoShoppingDelegate to receive important shopping events. = <Your delegate>
The shopping lifecycle events provide opportinities to customize the product views, hydrate product information and handle when a user adds a product variant to the cart.

Shopping View Configuration

When the fireworkShopping(_:willDisplayProductInfo:forVideo:) method is called it gives the host app a chance to configure the view that will be displayed. Similar to how view configurations work on the VideoFeedViewController the properties are value types and must be reassigned to the configurator before the changes will be applied.
The following items can be configured:
  1. 1.
    Shopping Cart icon
    1. 1.
      isHidden - Important: When setting this value to false ensure the cartProvider is added.
    2. 2.
      indicator - (Used to indicate to the user that there is an item in their cart)
      1. 1.
        isHidden - if the indicator is hidden or not
  2. 2.
    Add to button
    1. 1.
      Button color
    2. 2.
      Button font
    3. 3.
      Button text color
For more detailed examples see the Sample App Code.

Product Hydration

The fireworkShopping(_:updateDetailsForProducts:forVideo:_:) method will be called when a video will be shown that contains products. It is at this point when the host app will be able to update the associated product information.
See the Sample App Code for examples of how to hydrate with Shopify.

Handle Add to Cart

The fireworkShopping(_:addProductVariantToCart:fromVideo:_:) method is called when the user has selected the "Add to cart" button and will pass the ids of the product and variant of the selected item.
The host app must call the addToCartCompletionHandler to inform the next action to perform.
  • showEmbeddedCart - When sepecifying this action the SDK will request a CartViewController from the; see Providing an embedded cart view for more details.
  • dismissWithFeedback - When specifying this action the SDK will dismiss the Product summary drawer and display a toast message to the user.
Note: If no action is provided within 2 seconds the SDK will assume the item was not successfully added.
Important: it is at this point when the host app should add the item to the user's cart as they have indicated intent to buy this product.

Providing an embedded cart view

The host app can embed their own custom cart view which will be displayed directly within the Firework Video Player. This custom cart view can be shown within the Firework Video Player after the following actions occur:
  • User clicks cart icon - The host app must setup the configuration to show a shopping icon; see Shopping View Configuration for more details.
  • Host app returns showEmbeddedCart as the AddToCartAction - This is sequence occurs after the user selects "Add to cart".
The host app must supply a mechanism that conforms to CartViewProviding in order to provide a CartViewController. A provider must be assigned on the property. If no provider is set the actions above will be replaced with these actions; respectively:
  • User clicks cart icon - Nothing.
  • Host app returns showEmbeddedCart as the AddToCartAction - SDK treats this as a success and will use the dismissWithFeedback with success.
The CartViewController has a drawerController: DrawerControllerRepresentable property which provides a func to close the cart view container.
The default action of the Link Icon to the right of the "Add to Cart" button is to open the product URL in a web view. By default, this button would be visible, but this button can be hidden if required within the event callback of the FireworkVideoShoppingDelegate
func fireworkShopping(
_ fireworkShopping: FireworkVideoShopping,
willDisplayProductInfo productInfoViewConfigurator: ProductInfoViewConfigurable,
forVideo video: VideoDetails
) {
productInfoViewConfigurator.productDetailsConfiguration.linkButtonConfiguration.isHidden = true

Purchase tracking

The host app can record a purchase which will help get a full picture of the user journey flow.In order to do this, call FireworkVideoSDK.trackPurchase whenever the purchase happens.
let totalPurchaseValue: Double = // The total value of the purchase
orderID: "<Order ID of User Purchase>",
value: totalPurchaseValue,
currencyCode: Locale.current.currencyCode,
countryCode: Locale.current.regionCode,
"additionalKey1": "additionalValue1",
"additionalKey2": "additionalValue2",
"additionalKey3": "additionalValue3"
Last modified 12d ago