> ## 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.
# Working with custom platforms
> Learn how to integrate Videowise on non-Shopify platforms, headless Shopify, and custom storefronts.
Integrating Videowise on custom platforms has two parts:
1. **Script initialization** — adding Videowise scripts to your website
2. **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 `` tag:
```html theme={null}
```
### 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`
```ts theme={null}
{
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**
### 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:
```js theme={null}
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`:
```js theme={null}
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`.
### 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:
```js theme={null}
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`:
```js theme={null}
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`.