Floating - Videowise

Inline, Floating, and VideoFeed must be wrapped in <VideowiseSDK.Provider>. The Provider manages modal video state when a shopper taps a video. LiveShoppingChannel does not use the Provider.

<VideowiseSDK.Provider>{/* Your components here */}</VideowiseSDK.Provider>

A floating widget overlay that appears at the bottom-left of the screen. It dynamically sizes itself based on the widget content. When a user taps on a video, a full-screen VideoFeed modal opens.

Props

Prop	Type	Required	Default	Description
`videowiseInfo`	`object`	Yes	—	Store configuration (same as VideoFeed)
`widgetId`	`string`	Yes	—	The ID of the Videowise widget
`rightActionButtonsTop`	`number`	No	—	Top offset (px) for the right action buttons
`marketingLogoTop`	`number`	No	—	Top offset (px) for the marketing logo
`shoppableTop`	`number`	No	—	Top offset (px) for the shoppable product list
`shoppableBottom`	`number`	No	—	Bottom padding (px) for shoppable UI
`shoppableCardListBottom`	`number`	No	—	Bottom offset (px) for the shoppable card list
`shoppableListAspectRatio`	`${number}/${number}` \| `"auto"`	No	—	Aspect ratio of product list items
`loggedInUserData`	`{ email?: string; fullName?: string }`	No	—	Logged-in user info passed to the embed
`onEvent`	`(event: OnEventType<'custom-event'>) => void`	No	—	Callback for custom events
`onAddToCart`	`(event: OnEventType<'add-to-cart'>) => void`	No	—	Callback when a product is added to cart
`onCheckout`	`(event: OnEventType<'custom-event'>) => void`	No	—	Callback for checkout events
`environment`	`'local' \| 'staging' \| 'production'`	No	`'production'`	Environment target

`videowiseInfo` object

Property	Type	Required	Default	Description
`shop`	`string`	Yes	—	Your store domain (e.g. `storename.myshopify.com`)
`cartType`	`'Shopify' \| 'Magento' \| 'SFCC' \| 'Tapcart' \| 'Other'`	No	`'Shopify'`	Cart platform type
`currency`	`string`	No	`'USD'`	Display currency
`currencyRate`	`number`	No	`1`	Currency conversion rate
`productId`	`number \| null`	No	`null`	Filter by specific product ID

`onEvent` callback

Triggered for all custom events from the widget. The event object has the following structure:

Property	Type	Description
`type`	`'custom-event'`	Event type identifier
`detail`	`object`	Event detail payload (see below)
`name`	`string`	Event name (see list below)
`targetTag`	`null`	Reserved for future use

detail object

Property	Type	Description
`productName`	`string`	Product name
`productId`	`number`	Product ID
`variantId`	`number`	Variant ID
`selectedVariant`	`number`	Selected variant ID
`qty`	`number`	Quantity
`price`	`number`	Product price
`currencyCode`	`string`	Currency code (e.g. `'USD'`)
`videoTitle`	`string`	Video title
`videoId`	`string`	Video ID
`widgetId`	`string`	Widget ID
`deviceType`	`string`	Device type
`url`	`string`	Page URL
`campaignId`	`string`	Campaign ID
`items`	`array`	Array of products (see `onCheckout`)

All detail properties are optional and depend on the event type.

Possible event names (name)

videowiseProductAddToCart — Product added to cart
videowiseProductBuyNow — Buy now clicked
videowiseCheckoutClick — Checkout clicked
videowiseProductClick — Product clicked
videowiseVideoClick — Video clicked
videowiseVideoStart — Video played more than 3 seconds
videowiseVideoIsPlaying — Video is currently playing
videowiseVideoFull — Video played more than 80%
videowiseVideoSwipe — Video swiped
videowisePlayerClose — Player closed
videowiseVideoSoundOn — Sound turned on
videowiseVideoSoundOff — Sound turned off
videowiseVideoBounce — Video closed/swiped before 3 seconds
videowiseDataReady — Widget data loaded
videowiseCampaignReady — Campaign rendered
videowiseCampaignCheckout — Redirecting to checkout
videowiseBackgroundV2Rendered — Background V2 rendered
videowiseCtaClick — CTA button clicked
videowiseTriggerPlayerClose — Player close triggered

`onAddToCart` callback

Triggered when a user adds a product to the cart (videowiseProductAddToCart event). The event object has the following structure:

Property	Type	Description
`type`	`'add-to-cart'`	Event type identifier
`detail`	`object`	Event detail payload

detail object

Property	Type	Description
`productName`	`string`	Product name
`productId`	`number`	Product ID
`variantId`	`number`	Variant ID
`selectedVariant`	`number`	Selected variant ID
`qty`	`number`	Quantity
`price`	`number`	Product price
`currencyCode`	`string`	Currency code (e.g. `'USD'`)
`videoTitle`	`string`	Video title
`videoId`	`string`	Video ID
`widgetId`	`string`	Widget ID
`deviceType`	`string`	Device type
`url`	`string`	Page URL

`onCheckout` callback

Triggered when a user clicks checkout (videowiseCheckoutClick event). The event object has the following structure:

Property	Type	Description
`type`	`'custom-event'`	Event type identifier
`detail`	`object`	Event detail payload
`name`	`string`	Event name
`targetTag`	`null`	Reserved for future use

detail object

Property	Type	Description
`campaignId`	`string`	Campaign ID
`deviceType`	`string`	Device type
`url`	`string`	Page URL
`items`	`array`	Array of products in the checkout

items array element

Property	Type	Description
`productName`	`string`	Product name
`productId`	`number`	Product ID
`qty`	`number`	Quantity
`price`	`number`	Product price
`currencyCode`	`string`	Currency code

Example

<VideowiseSDK.Provider>
  <View style={{ flex: 1 }}>
    <VideowiseSDK.Floating
      videowiseInfo={{
        cartType: "Shopify",
        shop: "storename.myshopify.com",
        currency: "USD",
        currencyRate: 1,
        productId: null,
      }}
      widgetId="your-widget-id"
      environment="production"
      rightActionButtonsTop={44}
      marketingLogoTop={44}
      shoppableTop={44}
      shoppableBottom={44}
      shoppableListAspectRatio="1/1"
      onEvent={(event) => console.log("onEvent", event)}
      onAddToCart={(event) => console.log("onAddToCart", event)}
      onCheckout={(event) => console.log("onCheckout", event)}
    />
  </View>
</VideowiseSDK.Provider>

​Props

​videowiseInfo object

​onEvent callback

​onAddToCart callback

​onCheckout callback

​Example

​Related

Props

`videowiseInfo` object

`onEvent` callback

`onAddToCart` callback

`onCheckout` callback

Example

Related