Community Widget

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.

Also refer to the specifications of the Community Widget available here:

Widget home page: Community Widget | Home page components
Widget customer journey: Conversations | Visitor journey

Tag

HTML

<popsell-community></popsell-community>

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

HTML

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

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.

CODE

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

Hook	Event type	Element	Action	Data
Add a product to the wishlist from the chat	interact	btn_wishlist_chat	addToWishlist	JS `{ sku: "ABC1234", masterId: "XYZ9876" }`
Add a product to the wishlist from the overlay	interact	btn_wishlist_overlay	addToWishlist	JS `{ sku: "ABC1234", masterId: "XYZ9876" }`
Add a product to the wishlist from the zoom product	interact	btn_wishlist_zoom	addToWishlist	JS `{ sku: "ABC1234", masterId: "XYZ9876" }`
Remove a product from the wishlist from the chat	interact	btn_wishlist_chat	removeFromWishlist	JS `{ sku: "ABC1234", masterId: "XYZ9876" }`
Remove a product from the wishlist from the overlay	interact	btn_wishlist_overlay	removeFromWishlist	JS `{ sku: "ABC1234", masterId: "XYZ9876" }`
Remove a product from the wishlist from the zoom product	interact	btn_wishlist_zoom	removeFromWishlist	JS `{ sku: "ABC1234", masterId: "XYZ9876" }`
Get the number of products shared in a conversation	status	get_nbr_products	click	JS `{ nbr: 1, skus: [ "ABC1234", "ABC1235" ] }`
Open the product sheet of a product from the zoom product	navigate	open_product_page	open	JS `undefined`
Feedback about when the widget is loading	status	popsell_community	load	JS `undefined`
Feedback about when the widget is ready	status	popsell_community	ready	JS `undefined`
Open the community widget	interact	widget_community_tab widget_community_button_opener mail_source_button	open	JS `{ hasFavorite: true }`
Open the home page	navigate	home_page	open	JS `undefined`
Define the widget opener	define	popsell_community	defineOpener	CODE `{ displayMode: <right_tab\|down_button> }`
Close the community widget	interact	widget_community_tab widget_community_button_opener button_close_tab	close	JS `undefined`
Click on “contact an available advisor” button when logged in	interact	button_discuss_with_available_advisor	click	JS `undefined`
Click on “contact an available advisor” when not logged in	interact	button_discuss_with_advisor_guest	click	JS `undefined`
Searching an available advisor near you	interact	button_search_available_advisor	click	JS `undefined`
See more advisors near you	interact	button_see_more_advisors	click	JS `undefined`
Open the page that contains the advisors near you	navigate	near_you_page	open	JS `undefined`
See an advisor’s profile from the widget home page	navigate	open_advisor_profile_from_home_page	open	JS `{ id: 12345 }`
See all your conversations	interact	button_see_more_conversations	click	JS `undefined`
See an advisor’s profile from the “search an advisor” page	navigate	open_advisor_profile_from_search_advisor	open	JS `{ id: 12345 }`
Start a conversation with an advisor from the “search an advisor” page	interact	button_start_conversation_from_search_advisor	click	JS `undefined`
Open your conversation with your favorite advisor	navigate	open_conversation_favorite_advisor	open	JS `undefined`
Open one of your recent conversations	navigate	open_recent_conversation	open	JS `undefined`
Open zoom products	navigate	open_zoom	open	JS `undefined`
Open custom contact link	navigate	authenticated_community_home guest_community_home community_topic_choice	click	JS `undefined`
Decline term of services	interact	btn_im_decline_tos	close	JS `undefined`