React Native SDK

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`)

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

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

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. 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

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>

Documentation

Videowise Live Shopping Channel

Props

`videowiseInfo` object

Example

Videowise VideoFeed

Props

`videowiseInfo` object

Example

Videowise Floating

Props

Example

Videowise Inline

Available Widget Types

Props

Example

Documentation

​Videowise Live Shopping Channel

​Props

​videowiseInfo object

​Example

​Videowise VideoFeed

​Props

​videowiseInfo object

​Example

​Videowise Floating

​Props

​Example

​Videowise Inline

​Available Widget Types

​Props

​Example

Videowise Live Shopping Channel

Props

`videowiseInfo` object

Example

Videowise VideoFeed

Props

`videowiseInfo` object

Example

Videowise Floating

Props

Example

Videowise Inline

Available Widget Types

Props

Example