React Native SDK - Videowise

Installation

npm install @videowisehq/videowise-react-native-sdk react-native-webview @react-native-async-storage/async-storage

For Live Shopping Picture-in-Picture (PiP), also install react-native-video (>= 6.0.0) and run pod install in your ios/ folder.

SDK

interface VideowiseSDKProps {
  Provider: React.FC<ProviderProps>;
  Inline: React.FC<InlineProps>;
  Floating: React.FC<FloatingProps>;
  VideoFeed: React.FC<VideoFeedProps>;
  LiveShoppingChannel: React.FC<LiveShoppingChannelProps>;
  trackingPixel: (parameters: ParametersType) => Promise<Response | null>;
}

Event callbacks use discriminated unions via OnEventType<T>:

Callback	Type parameter	`event.type`	`event.detail`
`onEvent` (widgets)	`'custom-event'`	`'custom-event'`	`EventDetailType` + `name: EventType`
`onEvent` (Live Shopping)	`'live-shopping'`	`'live-shopping'`	`LSTrackingEventData`
`onAddToCart`	`'add-to-cart'`	`'add-to-cart'`	`EventDetailType`
`onCheckout`	`'custom-event'` or `'live-shopping'`	matches component	matches component

Shared props

Available on Inline, Floating, VideoFeed, and LiveShoppingChannel:

Prop	Type	Required	Default	Description
`environment`	`'local' \| 'staging' \| 'production'`	No	`'production'`	Environment target
`loggedInUserData`	`{ email?: string; fullName?: string }`	No	—	Logged-in user info passed to the embed
`onEvent`	`(event: OnEventType<T>) => void`	No	—	Callback for custom events (`T` depends on component)
`onAddToCart`	`(event: OnEventType<'add-to-cart'>) => void`	No	—	Callback when a product is added to cart
`onCheckout`	`(event: OnEventType<T>) => void`	No	—	Callback for checkout events

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 typed live-shopping 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)
`lsId`	`string`	No	—	Live shopping ID (for autostart)
`offsetY`	`number`	No	`0`	Reduces the height of the component wrapper by `screenHeight - offsetY`
`playerTopOffset`	`number`	No	—	Top offset (px) for the Live Player component elements
`playerBottomOffset`	`number`	No	—	Bottom offset (px) for the Live Player component elements
`vwStyle`	`string`	No	—	Custom CSS injected into the live shopping embed
`enabledPipButton`	`boolean`	No	`true`	Show the PiP button in the live shopping player (`window.vwEnabledPipButton`)
`style`	`StyleProp<ViewStyle>`	No	—	Custom style overrides for the component wrapper
`loggedInUserData`	`{ email?: string; fullName?: string }`	No	—	Logged-in user info passed to the embed
`onEvent`	`(event: OnEventType<'live-shopping'>) => void`	No	—	Callback for live shopping events
`onAddToCart`	`(event: OnEventType<'add-to-cart'>) => void`	No	—	Callback when a product is added to cart
`onCheckout`	`(event: OnEventType<'live-shopping'>) => 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" }}
  lsId="your-live-stream-id"
  environment="production"
  offsetY={50}
  playerTopOffset={44}
  playerBottomOffset={34}
  vwStyle=".vw-player { border-radius: 8px; }"
  style={{ backgroundColor: "#000" }}
  loggedInUserData={{ email: "user@example.com", fullName: "Jane Doe" }}
  onEvent={(event) =>
    console.log("onEvent", event.detail.interactionType, event)
  }
  onAddToCart={(event) => console.log("onAddToCart", event.detail)}
  onCheckout={(event) => console.log("onCheckout", event)}
/>

See the full list of live shopping events: Custom events (Live Shopping)

Picture-in-Picture (PiP)

When a user taps PiP inside the live shopping WebView, the SDK:

Receives a PIP_ENTER message from the embed with the HLS stream URL, lsId, and playback position
Swaps the WebView for a native react-native-video player and enters system PiP
On PiP exit, remounts the WebView with the same lsId so the embed reloads the stream; for recordings, also writes playback position to session storage so the web player can seek on resume
On iOS, automatically calls VwAppMinimizer.minimize() when PiP becomes active (if the host app implements the native module)

Android typically backgrounds the app automatically when PiP starts.

Setup in your app

1. Install peer dependencies

npm install react-native-video
cd ios && pod install && cd ..

2. Render LiveShoppingChannel No extra PiP wiring is needed in JS — just render the component:

import VideowiseSDK from "@videowisehq/videowise-react-native-sdk";

export function LiveShoppingScreen() {
  return (
    <VideowiseSDK.LiveShoppingChannel
      videowiseInfo={{ shop: "storename.myshopify.com" }}
      environment="production"
      onEvent={(event) => console.log(event)}
      onAddToCart={(event) => console.log(event)}
    />
  );
}

Pass lsId to open a specific stream on first load:

<VideowiseSDK.LiveShoppingChannel
  videowiseInfo={{ shop: "storename.myshopify.com" }}
  lsId="your-live-stream-id"
/>

Disable the PiP button if needed (enabled by default):

<VideowiseSDK.LiveShoppingChannel
  videowiseInfo={{ shop: "storename.myshopify.com" }}
  enabledPipButton={false}
/>

3. iOS — Info.plist Add background audio so PiP playback continues when the app is backgrounded:

<key>UIBackgroundModes</key>
<array>
  <string>audio</string>
</array>

4. Android — AndroidManifest.xml Enable PiP on your main activity:

<activity
  android:name=".MainActivity"
  android:supportsPictureInPicture="true"
  ...>

5. Optional — iOS VwAppMinimizer (host app native module) iOS has no public API to programmatically send the app to the background. The SDK calls VwAppMinimizer.minimize() automatically when PiP becomes active on iOS. Implement this native module in your host app (not in the SDK npm package) to enable auto-minimize.

App Store note: the example below uses a private API (UIApplication.suspend). Use only if your team accepts that trade-off.

ios/YourApp/VwAppMinimizer.swift:

import UIKit
import React

@objc(VwAppMinimizer)
class VwAppMinimizer: NSObject {
  @objc static func requiresMainQueueSetup() -> Bool {
    true
  }

  @objc func minimize() {
    DispatchQueue.main.async {
      UIApplication.shared.perform(Selector(("suspend")))
    }
  }
}

ios/YourApp/VwAppMinimizer.m:

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(VwAppMinimizer, NSObject)
RCT_EXTERN_METHOD(minimize)
@end

Register the files in your Xcode project Creating the files is not enough — they must be registered in your app target so Xcode compiles them. You can do this in Xcode or by editing project.pbxproj directly (useful if you manage the iOS project as code). Option A — Xcode UI

Open ios/YourApp.xcworkspace in Xcode
Right-click your app folder (same group as AppDelegate.swift) → Add Files to “YourApp”…
Select VwAppMinimizer.swift and VwAppMinimizer.m
Ensure your app target is checked under Add to targets

Option B — Edit project.pbxproj

Place both files in ios/YourApp/ next to AppDelegate.swift
Open ios/YourApp.xcodeproj/project.pbxproj
Generate four unique IDs (run uuidgen four times, remove dashes, uppercase)
Add entries following the same pattern as AppDelegate.swift:

/* PBXBuildFile — add to PBXBuildFile section */
SWIFT_BUILD_ID /* VwAppMinimizer.swift in Sources */ = {isa = PBXBuildFile; fileRef = SWIFT_FILE_ID /* VwAppMinimizer.swift */; };
OBJC_BUILD_ID /* VwAppMinimizer.m in Sources */ = {isa = PBXBuildFile; fileRef = OBJC_FILE_ID /* VwAppMinimizer.m */; };

/* PBXFileReference — add to PBXFileReference section */
SWIFT_FILE_ID /* VwAppMinimizer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = VwAppMinimizer.swift; path = YourApp/VwAppMinimizer.swift; sourceTree = "<group>"; };
OBJC_FILE_ID /* VwAppMinimizer.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; name = VwAppMinimizer.m; path = YourApp/VwAppMinimizer.m; sourceTree = "<group>"; };

Add SWIFT_FILE_ID and OBJC_FILE_ID to your app’s PBXGroup children array (same group that lists AppDelegate.swift)
Add SWIFT_BUILD_ID and OBJC_BUILD_ID to PBXSourcesBuildPhase → files array (Compile Sources)

Replace YourApp with your iOS app folder name. Use the code blocks above for the file contents and mirror how AppDelegate.swift is registered in your project.pbxproj. If VwAppMinimizer is not registered, the SDK safely skips minimization — PiP still works. 6. Install the SDK in your app and rebuild Install from npm in your React Native project (not a local file: link):

npm install @videowisehq/videowise-react-native-sdk react-native-webview @react-native-async-storage/async-storage react-native-video
cd ios && pod install && cd ..
npx react-native run-ios   # physical iPhone/iPad required for PiP
npx react-native run-android

Testing notes

Platform	Notes
iOS (physical device)	Required for PiP testing
iOS Simulator	PiP does not work — `isPictureInPictureSupported()` returns false
Android	PiP works on supported devices; app usually backgrounds automatically

The floating PiP window always shows system playback controls (play/pause, close). Those cannot be removed by the SDK.

WebView → native PiP protocol

The live shopping embed sends this message when the user requests PiP:

{
  "request": "PIP_ENTER",
  "payload": {
    "lsId": "live-shopping-stream-id",
    "url": "https://your-cdn.example.com/live/stream.m3u8",
    "startTime": 142.5
  }
}

Field	Required	Description
`lsId`	Yes	Used to restore the correct stream when PiP ends
`url`	Yes	HLS (`.m3u8`) live stream URL
`startTime`	No	Playback position in seconds where native PiP should start

Native PiP → WebView resume

When PiP ends, the SDK remounts the WebView with window.lsId set so the embed auto-loads the same stream. For recordings (not live streams), the SDK also writes the native player’s current playback time to session storage:

sessionStorage.getItem("reeview_ls_session_recording_time");
// e.g. '{"time":187.4,"lsId":"live-shopping-stream-id"}'

The embed reads this key on init for recordings only, parses { time, lsId }, and seeks the web player to resume from that position. Live streams do not use this key — they resume at the live edge.

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
`shoppableBottom`	`number`	No	`16` / `20`	Bottom padding (px) for shoppable UI
`shoppableCardListBottom`	`number`	No	`0`	Bottom offset (px) for the shoppable card list
`shoppableListAspectRatio`	`${number}/${number}` \| `"auto"`	No	`"1/1"`	Aspect ratio of product list items
`disableIndependentApiCall`	`boolean`	No	`true`	Disables independent API calls
`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.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}
      shoppableBottom={44}
      shoppableCardListBottom={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
`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>

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
Scattered Videos
Masonry Grid
Grid Gallery
Floating
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
`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, 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}
      shoppableBottom={44}
      shoppableCardListBottom={50}
      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 trackingPixel

VideowiseSDK.trackingPixel is an async function that sends order data to Videowise analytics after a successful checkout. Call it once per completed order, after order confirmation. It is a plain async function and does not need to be rendered inside VideowiseSDK.Provider. It returns Promise<Response | null>. The resolved value is null when the SDK has no stored user identifier, when a required parameter is missing, or when the request throws.

Parameters

trackingPixel(params) takes a single object with the following properties:

Property	Type	Required	Description
`shop`	`string`	Yes	Store domain (e.g. `storename.myshopify.com`)
`orderId`	`number`	Yes	Numeric order ID
`orderTotal`	`number`	Yes	Total order amount
`orderCurrency`	`string`	Yes	ISO currency code (e.g. `USD`)
`orderItems`	`OrderItem[]`	Yes	Array of purchased items (see below)

`orderItems` element (`OrderItem`)

Property	Type	Description
`id`	`string`	Line item ID
`quantity`	`number`	Quantity purchased
`title`	`string \| null`	Line item title
`variant`	`object`	Variant details (see below)
`finalLinePrice`	`object`	Final line price (see below)

variant object

Property	Type	Description
`id`	`string`	Variant ID
`image.src`	`string \| null`	Variant image URL
`price.amount`	`number`	Variant unit price
`price.currencyCode`	`string`	Variant price currency code
`product.id`	`string`	Product ID
`product.title`	`string \| null`	Product title
`product.vendor`	`string \| null`	Product vendor
`product.type`	`string \| null`	Product type
`product.untranslatedTitle`	`string \| null`	Untranslated product title
`product.url`	`string`	Product URL
`sku`	`string \| null`	Variant SKU
`title`	`string`	Variant title
`untranslatedTitle`	`string`	Untranslated variant title

finalLinePrice object

Property	Type	Description
`amount`	`number`	Final line price amount
`currencyCode`	`string`	Final line price currency

Example

import VideowiseSDK from "@vidystar/videowise-react-native-sdk";

await VideowiseSDK.trackingPixel({
  shop: "storename.myshopify.com",
  orderId: 12345,
  orderTotal: 99.99,
  orderCurrency: "USD",
  orderItems: [
    {
      id: "item-1",
      quantity: 1,
      title: "Product Name",
      variant: {
        id: "variant-1",
        image: { src: "https://..." },
        price: { amount: 99.99, currencyCode: "USD" },
        product: {
          id: "prod-1",
          title: "Product Name",
          vendor: "Vendor",
          type: "Type",
          untranslatedTitle: "Product Name",
          url: "https://...",
        },
        sku: "SKU-123",
        title: "Variant",
        untranslatedTitle: "Variant",
      },
      finalLinePrice: { amount: 99.99, currencyCode: "USD" },
    },
  ],
});

​Installation

​SDK

​Shared props

​Videowise Live Shopping Channel

​Props

​videowiseInfo object

​onEvent callback

​onAddToCart callback

​onCheckout callback

​Example

​Picture-in-Picture (PiP)

​Setup in your app

​Testing notes

​WebView → native PiP protocol

​Native PiP → WebView resume

​Videowise VideoFeed

​Props

​videowiseInfo object

​onEvent callback

​onAddToCart callback

​onCheckout callback

​Example

​Videowise Floating

​Props

​videowiseInfo object

​onEvent callback

​onAddToCart callback

​onCheckout callback

​Example

​Videowise Inline

​Available Widget Types

​Props

​videowiseInfo object

​onEvent callback

​onAddToCart callback

​onCheckout callback

​Example

​Videowise trackingPixel

​Parameters

​orderItems element (OrderItem)

​Example

Installation

SDK

Shared props

Videowise Live Shopping Channel

Props

`videowiseInfo` object

`onEvent` callback

`onAddToCart` callback

`onCheckout` callback

Example

Picture-in-Picture (PiP)

Setup in your app

Testing notes

WebView → native PiP protocol

Native PiP → WebView resume

Videowise VideoFeed

Props

`videowiseInfo` object

`onEvent` callback

`onAddToCart` callback

`onCheckout` callback

Example

Videowise Floating

Props

`videowiseInfo` object

`onEvent` callback

`onAddToCart` callback

`onCheckout` callback

Example

Videowise Inline

Available Widget Types

Props

`videowiseInfo` object

`onEvent` callback

`onAddToCart` callback

`onCheckout` callback

Example

Videowise trackingPixel

Parameters

`orderItems` element (`OrderItem`)

Example