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

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

<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: "[e-mail]"
    }
  });
}
</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

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

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

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

<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

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

---

4. Popin('close')

Closes the currently open Popin widget.

Example

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

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