Working with custom platforms

Integrating Videowise on custom platforms has two parts:

Script initialization — adding Videowise scripts to your website
Widget locations — setting where you want widgets to appear

This guide covers script setup via window.videowiseInfo, and how to handle add-to-cart on headless or custom storefronts. For Shopify Online Store, the Videowise app injects scripts for you — skip to custom events or widget re-rendering only if you need them.

Use window.videowiseInfo on all non-Shopify platforms (SFCC, Magento, WooCommerce) and on headless Shopify.

Setting up `videowiseInfo`

Minimum implementation

To add scripts to your website, insert the following code before the closing </head> tag:

<script>
  var SKIP_CART = true;
  var FORCE_DOMAIN = true;
  var videowiseInfo = {
    cartType: 'shopify', // possible values: magento, sfcc, shopify, other
    shop: 'shop-name.myshopify.com',
    currency: 'USD',
    currencyRate: '1',
    pid: 'the_product_id',
    locale: 'en',
    route: '/',
  };
</script>

<link rel="dns-prefetch" href="https://assets.videowise.com/" />
<link rel="dns-prefetch" href="https://cdn2.videowise.com/" />
<link rel="dns-prefetch" href="https://api-cdn.videowise.com/" />
<link rel="dns-prefetch" href="https://images.videowise.com/" />
<link rel="dns-prefetch" href="https://cdn.videowise.com/" />
<link
  rel="stylesheet"
  as="style"
  onload="this.onload=null;this.rel='stylesheet'"
  href="https://assets.videowise.com/style.css.gz"
  id="videowise-style-css"
/>
<script
  defer=""
  src="https://assets.videowise.com/vendors.js.gz"
  id="videowise-vendors-js"
></script>
<script
  defer=""
  src="https://assets.videowise.com/client.js.gz"
  id="videowise-client-js"
></script>

Populating `videowiseInfo` correctly

Field	Notes
`shop`	Must be set to the correct `myshopify.com` domain
`pid`	Product ID when rendering a product page; `null` or `''` on non-product pages
`locale`	Current locale the customer is navigating
`route`	Equivalent to `window.Shopify.routes.root` when available. For a URL like `myshopify.com/en`, use `"/en/"`; otherwise fall back to `"/"`

Full structure for `window.videowiseInfo`

{
  addToCartUrl: string;
  cartURL: string;
  checkoutURL: string;
  currency: string;
  currencyRate: string;
  cartType: '' | 'shopify' | 'magento' | 'sfcc' | 'tapcart' | 'other';
  host: string;
  locale: string;
  pid: string;
  productDetailsURL: string;
  siteID: string;
  withLiveStream: boolean;
  route: string;
}

Handling add to cart

In most headless setups, add-to-cart is handled by custom logic — not only adding the item, but also opening a cart drawer, showing notifications, or updating UI. Because of this variability, Videowise does not perform the add-to-cart action directly. Instead, Videowise emits custom browser events that your application can listen for and handle with your own logic. The full widget event list is in Custom events. To enable this, set Buy button behaviour to Virtual cart in: Widget → Player design → Buy button

Buy button behaviour set to Virtual cart

Custom event: `videowiseProductAddToCart`

When a user clicks Add to Cart inside the Videowise widget, a videowiseProductAddToCart event is dispatched. Product details are available on event.detail:

variantId — the Shopify variant ID
qty — the selected quantity

Listen for the event and run your own add-to-cart logic:

window.addEventListener('videowiseProductAddToCart', (event) => {
  const { variantId, qty } = event.detail || {};

  if (variantId && qty) {
    // Add product to cart
    addToCart(variantId, qty);

    // Trigger additional UI actions (e.g. open cart drawer)
    openCartDrawer();
  }
});

To close the Videowise player after a custom add-to-cart action, dispatch videowiseTriggerPlayerClose:

window.addEventListener('videowiseProductAddToCart', (event) => {
  const { variantId, qty } = event.detail || {};

  if (variantId && qty) {
    addToCart(variantId, qty);
    openCartDrawer();

    // Close the Videowise player
    window.dispatchEvent(new CustomEvent('videowiseTriggerPlayerClose'));
  }
});

Hydrogen-specific notes

Before rendering, set pid on window.videowiseInfo to the product ID.
When navigating away from a product page, set pid to null.
After client-side navigation, re-render widgets with initVideowise / initVideowiseBulk.

Live shopping channel on custom platforms

The live shopping channel uses the same shop identity (window.videowiseInfo.shop / window.Shopify.shop). Add the channel embed script and either the monolith container or modular section mounts:

<script src="https://assets.videowise.com/videowise-live-streaming-channel-embed.js"></script>
<!-- monolith -->
<div id="videowise_stream_channel"></div>

Or split the page into sections with your own HTML between mounts. See Live channel page layout.

Shoppable videos overview
Widget re-rendering — call initVideowise / initVideowiseBulk after client-side navigation
Widget custom events — including videowiseProductAddToCart
Live shopping
Order tracking
Cookies
React Native SDK

​Setting up videowiseInfo

​Minimum implementation

​Populating videowiseInfo correctly

​Full structure for window.videowiseInfo

​Handling add to cart

​Custom event: videowiseProductAddToCart

​Hydrogen-specific notes

​Live shopping channel on custom platforms

​Related

Setting up `videowiseInfo`

Minimum implementation

Populating `videowiseInfo` correctly

Full structure for `window.videowiseInfo`

Handling add to cart

Custom event: `videowiseProductAddToCart`

Hydrogen-specific notes

Live shopping channel on custom platforms

Related