Overview

Integrate a whole Popsell environment on your own website. This widget adds an overlay on the right side of the user screen to bring Popsell community and conversational capabilities.

Tag

<popsell-community></popsell-community>
HTML

Attributes

attribute

description

mandatory

width

Set the desired widget max-width (Default: 500)

No

guest-api-key

The guest api key from your Popsell environment. Force the guest-api-key parameter from <popsell-session>

No

user-api-key

The user API key. Force the user-api-key from <popsell-session>

No

picking-landing-url

Set the URL when the user should land when open product picking

(Only on V4)

No

display

Controls the display of the widget (default: true),

The widget is still displayed if a Popsell chat is in progress

No

Parameters

URL parameters to activate the widget (GET method).

Integration

Page

<popsell-community width="450" guestApiKey="<your guest api key here>"></popsell-community>
HTML

Hooks

Events system

Popsell allows you to hook certain parts of the application in order to track user events. For example, when a user clicks on some buttons, you’ll be able to know which button has been clicked and from which context. It is particularly useful if you plan to link systems like Google Analytics.

Available Community tag events

Our tags use the power of web-components and are fully compatible with native Javascript event bus.

In order to hook an event, just plug the listener as you would usually do in a normal Javascript environment.

document.querySelector('popsell-community').addEventListener(<event type>, (event) => {
  //event.detail[0] contains all popsell informations you would need
});
CODE

Hook

Event type

Element

Action

Data

Add a product to the wishlist from the chat

interact

btn_wishlist_chat

addToWishlist

{
  sku: "ABC1234",
  masterId: "XYZ9876"
}
JS

Add a product to the wishlist from the overlay

interact

btn_wishlist_overlay

addToWishlist

{
  sku: "ABC1234",
  masterId: "XYZ9876"
}
JS

Add a product to the wishlist from the zoom product

interact

btn_wishlist_zoom

addToWishlist

{
  sku: "ABC1234",
  masterId: "XYZ9876"
}
JS

Remove a product from the wishlist from the chat

interact

btn_wishlist_chat

removeFromWishlist

{
  sku: "ABC1234",
  masterId: "XYZ9876"
}
JS

Remove a product from the wishlist from the overlay

interact

btn_wishlist_overlay

removeFromWishlist

{
  sku: "ABC1234",
  masterId: "XYZ9876"
}
JS

Remove a product from the wishlist from the zoom product

interact

btn_wishlist_zoom

removeFromWishlist

{
  sku: "ABC1234",
  masterId: "XYZ9876"
}
JS

Get the number of products shared in a conversation

status

get_nbr_products

click

{
  nbr: 1,
  skus: [
    "ABC1234",
    "ABC1235"
  ]
}
JS

Open the product sheet of a product from the zoom product

navigate

open_product_page

open

undefined
JS

Feedback about when the widget is loading

status

popsell_community

load

undefined
JS

Feedback about when the widget is ready

status

popsell_community

ready

undefined
JS

Open the community widget

interact

widget_community_tab

open

{
  hasFavorite: true
}
JS

Open the home page

navigate

home_page

open

undefined
JS

Close the community widget

interact

  • widget_community_tab

  • button_close_tab

close

undefined
JS

Click on “contact an available advisor” button when logged in

interact

button_discuss_with_available_advisor

click

undefined
JS

Click on “contact an available advisor” when not logged in

interact

button_discuss_with_advisor_guest

click

undefined
JS

Searching an available advisor near you

interact

button_search_available_advisor

click

undefined
JS

See more advisors near you

interact

button_see_more_advisors

click

undefined
JS

Open the page that contains the advisors near you

navigate

near_you_page

open

undefined
JS

See an advisor’s profile from the widget home page

navigate

open_advisor_profile_from_home_page

open

undefined
JS

See all your conversations

interact

button_see_more_conversations

click

undefined
JS

See an advisor’s profile from the “search an advisor” page

navigate

open_advisor_profile_from_search_advisor

open

undefined
JS

Start a conversation with an advisor from the “search an advisor” page

interact

button_start_conversation_from_search_advisor

click

undefined
JS

Open your conversation with your favorite advisor

navigate

open_conversation_favorite_advisor

open

undefined
JS

Open one of your recent conversations

navigate

open_recent_conversation

open

undefined
JS

Open zoom products

navigate

open_zoom

open

undefined
JS