React Native SDK

Videowise React Native SDK provides components for integrating shoppable video and live shopping experiences directly into your mobile app. It includes: LiveShoppingChannel, VideoFeed, Floating and Inline. Available Widget Types (Inline): single video, in-page video player, quick shop carousel, stories, video carousel, highlighted carousel, overlapping carousel, masonry grid, grid gallery and gallery highlight.

Videowise Live Shopping Channel

A full-screen live shopping channel component that embeds the Videowise live streaming experience. It renders a WebView with the live shopping channel and dispatches custom events for user interactions like adding products to cart.

Note: The LiveShoppingChannel component does not need to be wrapped inside <VideowiseSDK.Provider>. It operates independently.

Props

Prop	Type	Required	Default	Description
videowiseInfo	object	Yes	—	Store configuration (see below)
offsetY	number	No	0	Reduces the height of the component wrapper by screenHeight - offsetY
style	StyleProp<ViewStyle>	No	—	Custom style overrides for the component wrapper
onEvent	(event) => void	No	—	Callback for live shopping events
onAddToCart	(event) => void	No	—	Callback when a product is added to cart
onCheckout	(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)

onEvent callback

Triggered for all live shopping interaction events. The event object has the following structure:

Property	Type	Description
type	'live-shopping'	Event type identifier
detail	object	Event detail payload (see below)

detail object (LSTrackingEventData)

Property	Type	Required	Description
lsId	string	Yes	Live shopping session ID
siteId	string	Yes	Site ID
organisationId	string	Yes	Organisation ID
clientTS	Date	Yes	Client timestamp
videoElapsedMinutes	number	Yes	Minutes elapsed in the video
videoElapsedSeconds	number	Yes	Seconds elapsed in the video
currentTime	number	No	Current playback time
uid	string	Yes	Unique user ID
device	'mobile' | 'desktop'	Yes	Device type
isLive	boolean	Yes	Whether the stream is currently live
url	string	Yes	Page URL
interactionType	string	Yes	Interaction type (see list below)
eventType	string	Yes	Host event type: 'play', 'pause', 'stop', 'load', 'pending', 'interaction'
item	object	No	Product data (present for add_to_cart and product_click interactions)

item object (when present)

Property	Type	Description
name	string	Product name
sku	string	Product SKU
id	string	Product ID
highlighted	boolean	Whether the product is highlighted
meta.customId	string	Custom variant ID
meta.vendor	string	Product vendor
meta.price	number | string	Product price
meta.compareAtPrice	unknown	Compare at price
meta.quantity	number	Quantity
meta.currency	string	Currency code

Possible interaction types (interactionType)

• mute_player — Player muted
• unmute_player — Player unmuted
• pause_player — Player paused
• resume_player — Player resumed
• like_reaction — Like reaction
• share — Share clicked
• add_to_calendar — Added to calendar
• send_chat — Chat message sent
• close_player — Player closed
• minimize_player — Player minimized
• maximize_player — Player maximized
• show_product_list — Product list shown
• hide_product_list — Product list hidden
• product_click — Product clicked
• add_to_cart — Product added to cart
• checkout — Checkout clicked
• show_cart — Cart shown
• hide_cart — Cart hidden
• toggle_cc_on — Closed captions enabled
• toggle_cc_off — Closed captions disabled
• replay — Replay clicked
• progress — Playback progress

onAddToCart callback

Triggered when a user adds a product to the cart (add_to_cart interaction). The product data is unified into a standard format. The event object has the following structure:

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

detail object

Property	Type	Description
productName	string	Product name
variantId	number	Variant ID
selectedVariant	number	Selected variant ID
qty	number	Quantity
price	number	Product price
currencyCode	string	Currency code

onCheckout callback

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

Property	Type	Description
type	'live-shopping'	Event type identifier
detail	object	LSTrackingEventData payload (same structure as onEvent detail)

Example

<VideowiseSDK.LiveShoppingChannel
    videowiseInfo={{ shop: 'storename.myshopify.com' }}
    environment="production"
    offsetY={50}
    style={{ backgroundColor: '#000' }}
    onEvent={(event) => console.log('onEvent', event)}
    onAddToCart={(event) => console.log('onAddToCart', event)}
    onCheckout={(event) => console.log('onCheckout', event)}
/>

Here’s a list of the possible events triggered inside the LiveShopping component -> https://docs.videowise.com/custom-events-ls.

---

Note: The Inline, Floating, and VideoFeed components must be wrapped inside <VideowiseSDK.Provider> to function correctly. The Provider manages modal video state and handles navigation when a user taps on a video.

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

---

Videowise VideoFeed

A full-screen video feed component that displays a single video with shopping capabilities. The video player is shown immediately upon render.

Props

Prop	Type	Required	Default	Description
videowiseInfo	object	Yes	—	Store configuration (see below)
widgetId	string	Yes	—	The ID of the Videowise widget
style	StyleProp<ViewStyle>	No	—	Custom style overrides for the component wrapper
videoId	string	No	''	Specific video ID to display
rightActionButtonsTop	number	No	7	Top offset (px) for the right action buttons (close, etc.)
marketingLogoTop	number	No	20	Top offset (px) for the marketing logo
shoppableTop	number	No	0	Top offset (px) for the shoppable product list
shoppableListAspectRatio	`${number}/${number}` | "auto"	No	"1/1"	Aspect ratio of product list items
disableIndependentApiCall	boolean	No	true	Disables independent API calls
onEvent	(event) => void	No	—	Callback for custom events
onAddToCart	(event) => void	No	—	Callback when a product is added to cart
onCheckout	(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
• videowiseCtaClick — CTA button clicked

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.VideoFeed
            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}
            shoppableListAspectRatio="1/1"
            videoId=""
            onEvent={(event) => console.log('onEvent', event)}
            onAddToCart={(event) => console.log('onAddToCart', event)}
            onCheckout={(event) => console.log('onCheckout', event)}
        />
    </View>
</VideowiseSDK.Provider>

---

Videowise Floating

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
shoppableListAspectRatio	`${number}/${number}` | "auto"	No	—	Aspect ratio of product list items
onEvent	(event) => void	No	—	Callback for custom events
onAddToCart	(event) => void	No	—	Callback when a product is added to cart
onCheckout	(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
• videowiseCtaClick — CTA button clicked

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}
            shoppableListAspectRatio="1/1"
            onEvent={(event) => console.log('onEvent', event)}
            onAddToCart={(event) => console.log('onAddToCart', event)}
            onCheckout={(event) => console.log('onCheckout', event)}
        />
    </View>
</VideowiseSDK.Provider>

---

Videowise Inline

An inline widget that embeds directly within the page flow. It starts with minimal height and dynamically expands as content loads, making it suitable for placing inside scrollable layouts. When a user taps on a video, a full-screen VideoFeed modal opens.

Available Widget Types

The following widget layouts are supported for the Inline component:

• Single Video
• In-Page Video Player
• Quick Shop Carousel
• Stories
• Video Carousel
• Highlighted Carousel
• Overlapping Carousel
• Masonry Grid
• Grid Gallery
• Gallery Highlight

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
shoppableListAspectRatio	`${number}/${number}` | "auto"	No	—	Aspect ratio of product list items
onEvent	(event) => void	No	—	Callback for custom events
onAddToCart	(event) => void	No	—	Callback when a product is added to cart
onCheckout	(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
• videowiseCtaClick — CTA button clicked

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, justifyContent: 'center' }}>
        <VideowiseSDK.Inline
            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}
            shoppableListAspectRatio="1/1"
            onEvent={(event) => console.log('onEvent', event)}
            onAddToCart={(event) => console.log('onAddToCart', event)}
            onCheckout={(event) => console.log('onCheckout', event)}
        />
    </View>
</VideowiseSDK.Provider>