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.

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

​Setting up videowiseInfo

​Minimum implementation

​Populating videowiseInfo correctly

​Full structure for window.videowiseInfo

​Handling add to cart

​Custom event: videowiseProductAddToCart

​Hydrogen-specific notes

Setting up `videowiseInfo`

Minimum implementation

Populating `videowiseInfo` correctly

Full structure for `window.videowiseInfo`

Handling add to cart

Custom event: `videowiseProductAddToCart`

Hydrogen-specific notes