---
title: "WineDirect Remote Widgets"
slug: "winedirect-remote-widgets"
updated: 2024-05-09T21:33:14Z
published: 2024-05-09T21:33:14Z
canonical: "docs.winedirect.com/winedirect-remote-widgets"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.winedirect.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WineDirect Remote Widgets

WineDirect Remote Widgets allow designers to pull 'live' data from a WineDirect-hosted website to a website not hosted with WineDirect. No server-side scripting is required. A common use for Remote Widgets is for shop-only sites. When the main content site is not hosted with WineDirect, adding Remote Widgets helps make the shopping experience seamless for your customers.

## **Enable Remote Widgets**

<font color="#000000" face="Arial"><span style="white-space-collapse: preserve;">To enable Remote Widgets on your website, a script must be installed on the target remote widgets website, and the configuration of your BigCommerce theme must be updated.</span></font>

To initialize the remote widget script on your website, add the following snippet to the head of your website, replacing {{store_hash}} with your store hash.

```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://obundle-winery.mybigcommerce.com/content/vin65remotetools.1.2.js"></script>
<script>
 vin65remote.init('{{store_hash}}');
</script>
```

To update the configuration of your BigCommerce theme, navigate to your store’s “Theme Settings” in Page Builder UI (See page 7). In the section “Wine Direct Remote Modules,” toggle “Enable Remote Modules” on and enter the domain of the non-WineDirect-hosted website (without trailing slashes) as the “Remote Modules Domain.”

## **Login Status**

The Login Status widget shows a visitor to your site if logged in and provides links to log in, log out, and to their profile page.

To enable the Login Status widget the script must be initialized and a target element added to your website. To initialize the script, add the following snippet to the head of your website, replacing {{bigcommerce_domain}} with the domain of your BigCommerce store.

```
<script type="text/javascript">vin65remote.usertools.init('{{bigcommerce_domain}}');</script>
```

To add the target element to your website, place the following snippet where you want the login status to appear:

```
<div v65remotejs="loginWidget"></div>
```

## **Modal Cart**

The Modal Cart widget shows a customer's shopping cart status, including the number of items in their cart, the subtotal, and the drop-down that shows the last item they added.

To enable the Modal Cart widget, the script must be initialized, and a target element must be added to your website.

To initialize the script, add the following snippet to the head of your website, replacing {{store_hash}} with your store hash.

```
<script type="text/javascript">vin65remote.cart.init('{{store_hash}}');</script>
```

Additionally, the Modal Cart can be initialized with an options object.

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| useCartIcon | Boolean | false | Enable the display a cart icon instead of cart status text |
| cartIconUrl | String | “” | URL of an image to be displayed as the cart icon. If no cartIconUrl is provided and useCartIcon is enabled, an empty cart status element will be rendered, allowing custom CSS to set the image. |
| toggleAnimation | “slide” \| “fade” \| “none” | “slide” | Controls the animation style used when displaying the Modal Cart. |
| environment | “local” \| “development” \| “staging” \| “production” | “production” | Development use only. Establishes which server to use. |

The following example shows how to initialize the Modal Cart with options:

```
<script type="text/javascript">

    var options = {

        useCartIcon: false, // use cart icon instead of cart status text

        cartIconUrl: '{{cart_icon_url}}', // url of the icon to use

        // ...other options

    };

vin65remote.cart.init('{{store_hash}}', options);

</script>
```

To add the target element to your website, place the following snippet where you want the Modal Cart to appear:

```
<div v65remotejs="modalCart"></div>
```

## **Add To Cart**

The Add To Cart widget includes the Modal Cart but adds the ability to add items to your cart using the product SKU.

To enable the Add To Cart widget, the script must be initialized, and target elements must be added to your website.

To initialize the script, add the following snipping to the head of your website, replacing {{store_hash}} with your store hash.

```
<script type="text/javascript">vin65remote.product.addToCartForm('{{store_hash}}');</script>
```

To add the target element to your website, place the following snippet where you want the Add to Cart widget to appear, replacing {{product_sku}} with your product SKU.

```actionscript
<div v65remotejs="addToCartForm" productsku="{{product_sku}}" style="width:200px;"></div>
```