> For the complete documentation index, see [llms.txt](https://popin.gitbook.io/popin-developer-hub/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://popin.gitbook.io/popin-developer-hub/integration-guide/web-integration.md).

# Web integration

## Popin Video Shopping Integration Guide

### Overview

This guide provides a comprehensive overview of how to integrate **Popin Video Shopping** into your eCommerce website. It includes details on installing the widget, triggering calls, syncing products, and recording sales, ensuring your support agents can engage with users through live video sessions seamlessly.

***

### Brand Panel Access

Your brand’s Popin dashboard is accessible at:

👉 [https://dashboard.popin.to](https://dashboard.popin.to/)

Log in using the credentials provided by the Popin team.

***

### Installation

To enable Popin Video Shopping on your site, embed the widget script on **all pages** where customers should be able to initiate video calls.

#### Script Example

```html
<script>
let popIn = document.createElement('script')
popIn.setAttribute('src', 'https://widget01.popin.to/js/widget.js')
document.body.appendChild(popIn)
popIn.onload = () => {
  popInWidgetInit({
    token: "123456", // Replace with your actual token
    mode: "hidden",  // Optional: hide the widget icon
    captured: {      // Optional: pre-fill for logged-in users
      name: "John Doe",
      mobile: "9876543210",
      email: "john@lorem.com"
    }
  });
}
</script>
```

> 💡 Tip: Use `"mode": "hidden"` to initialize the widget without displaying the default floating icon. This is useful if you plan to trigger the widget manually.

***

### API Methods

#### 1. `Popin('sale', { orderId, amount })`

Use this method to **record a sale** and attribute it to the connected agent.

**Parameters**

| Name    | Required | Type    | Description                                 |
| ------- | -------- | ------- | ------------------------------------------- |
| orderId | Yes      | string  | Unique order identifier for internal use    |
| amount  | Yes      | integer | Transaction amount in **paise** (INR × 100) |

**Example**

```js
Popin('sale', { orderId: 'ORD123', amount: 49900 })
```

***

#### 2. `Popin('group', { groupId })`

Route calls to a specific **agent group**.

**Parameters**

| Name    | Required | Type   | Description                       |
| ------- | -------- | ------ | --------------------------------- |
| groupId | Yes      | number | ID of the agent group to route to |

**Example**

```js
Popin('group', { groupId: 4 })
```

Alternatively, use it within a button to open the widget with group routing:

```html
<button onclick="Popin('open', { groupId: 4 })">Connect with Stylist</button>
```

***

#### 3. `Popin('open', { groupId })`

Programmatically **open the Popin widget**.

**Parameters**

| Name    | Required | Type   | Description                     |
| ------- | -------- | ------ | ------------------------------- |
| groupId | No       | number | Group ID to route connection to |

**Example**

```js
Popin('open', { groupId: 4 })
```

***

#### 4. `Popin('close')`

Closes the currently open Popin widget.

**Example**

```js
Popin('close')
```

***

### Sync Products with Popin

To allow agents to view and share product details during calls, you need to **sync your product catalog** with Popin.

#### Endpoint

`POST https://widget01.popin.to/api/v1/products`

#### Headers

```
Content-Type: application/json
```

#### Payload Structure

```json
{
  "token": "51", 
  "products": [
    {
      "name": "Cool Bangle",
      "url": "https://mysite.com/product/cool-bangle",
      "price": 4500,
      "image": "https://mysite.com/images/cool-bangle.jpg"
    },
    {
      "name": "Cool Ring",
      "url": "https://mysite.com/product/cool-ring",
      "price": 1500,
      "image": "https://mysite.com/images/cool-ring.jpg"
    }
  ]
}
```

#### Field Descriptions

| Field | Required | Type    | Description                      |
| ----- | -------- | ------- | -------------------------------- |
| token | Yes      | string  | Your Popin project token         |
| name  | Yes      | string  | Name of the product              |
| url   | Yes      | string  | Product page URL                 |
| price | Yes      | integer | Product price in **paise**       |
| image | Yes      | string  | Direct link to the product image |

***

### Best Practices

* **Load the widget on all product and category pages** where customer interaction is likely.
* **Pre-fill customer data** for logged-in users using the `captured` parameter.
* **Trigger the widget programmatically** when integrated with product CTA buttons or checkout flows.

***

For advanced support and use-case customization, contact your Popin account manager or refer to the developer documentation in your brand panel.