Product Picking Widget

Overview

This Widget is used to pick a product from a product page in an e-commerce web site, and allows Popsell to use the picked product ID to query additional data for further integration.

This Widget can used as a basic Tag to pick a product reference, or can be used as a complete Widget which embeds your website in an iFrame, displays a picking button and therefore enables a user to browse product pages and pick the products he wants.

Tag

HTML

<popsell-picking></popsell-picking>

Attributes

attribute	description	mandatory
url	The landing page URL to open when starting a product picking	false
productId	The product id used to query your product data informations	false

Parameters

No URL parameters are required to enable this widget.

Integration

This widget enables two modes depending on your parameters. Each mode should be used at least once.

Mode: Product

Place this tag on every page and fill it with your product id or an empty String.

Filling with an empty String or not, communicate to the parent frame to enable / disable the picking CTA button.

HTML

<popsell-picking product-id="<your product id>"></popsell-picking>

Mode: Picking

HTML

<popsell-picking url="<your initial landing url>"></popsell-picking>

The CTA product picking button should automatically appear when a product ID is detected on the page.

Reminder

Do not forget to open your environment to iFrame visualisation with CSP and X-FRAME headers option.