React Native SDK

Documentation Index

Fetch the complete documentation index at: https://docs.videowise.com/llms.txt

Use this file to discover all available pages before exploring further.

​

Videowise Live Shopping Channel

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

​

Props

​

videowiseInfo object

​

onEvent callback

• 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

​

onCheckout callback

​

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)}
/>

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

​

Props

​

videowiseInfo object

​

onEvent callback

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

• 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

​

onCheckout callback

​

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

​

Props

​

videowiseInfo object

​

onEvent callback

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

• 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

​

onCheckout callback

​

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

​

Available Widget Types

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

​

Props

​

videowiseInfo object

​

onEvent callback

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

• 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

​

onCheckout callback

​

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>

​

Videowise trackingPixel

​

Parameters

​

orderItems element (OrderItem)

​

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' },
        },
    ],
});