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: "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

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.

PreviousHow to Get StartedNextIntegrating PopinAndroidSDK for Video Calls

Last updated