Profile Widget

Document version 4.3.5 [Draft version, work in progress]

Overview

This article describes the integration process of the Publication Profile provided by the Popsell platform. This widget is intended to display ambassadors profiles.

This widget can be displayed in two different ways:

Widget mode:

This mode requires no external integration. The Popsell Community Widget handles it.

Full page mode:

This mode displays the profile widget on a specific URL. You will have to provide an ambassador id in order to display it.

Tag

HTML

<popsell-profile></popsell-profile>

Attributes

attribute	description	mandatory	mandatory
`guest-api-key`	String	Needed to authenticate the requests.	only if no other API key is provided (in this widget or in the session widget)
`user-api-key`	String	Needed to authenticate the requests.	only if no other API key is provided (in this widget or in the session widget)

Parameters

URL parameters to activate the widget (GET method).

name	format	mandatory
idAdvisor	idAdvisor=1	yes

Integration

Page

HTML

<popsell-profile
guest-api-key="guestApiKey"
user-api-key="userApiKey">
</popsell-profile>

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
Click on the social networks in the profile page	navigate	open_social_network	open	JS `{ socialNetwork: "<fb_account \| instagram_account \| youtube_account \| twitter_account>" }`
Contact an advisor from their profile page	navigate	contact_an_advisor	open	JS `undefined`
Add or remove ‘favorite’ from an advisor	interact	button_add_remove_favorite	click	JS `undefined`
Click on ‘posts’ tab	interact	button_see_posts_tab	click	JS `undefined`
Open ‘posts’ tab	navigate	open_posts	open	JS `undefined`
Click on ‘profile’ tab	interact	button_see_profile_tab	click	JS `undefined`
Open ‘profile’ tab	navigate	open_profile	open	JS `undefined`
Like or unlike a post in the ‘posts’ tab	interact	button_like_unlike_post	click	JS `undefined`