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

# Floating

> Floating shoppable video overlay for React Native.

<Note>
  `Inline`, `Floating`, and `VideoFeed` must be wrapped in `<VideowiseSDK.Provider>`. The Provider manages modal video state when a shopper taps a video. [`LiveShoppingChannel`](/sdk/live-shopping-channel) does not use the Provider.
</Note>

```tsx theme={null}
<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

```tsx theme={null}
<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>
```

## Related

* [React Native SDK](/sdk/react-native)
* [VideoFeed](/sdk/video-feed)
* [Inline](/sdk/inline)
* [Widget custom events](/shoppable-videos/custom-events)