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

<popsell-profile></popsell-profile>
HTML

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

<popsell-profile
guest-api-key="guestApiKey"
user-api-key="userApiKey">
</popsell-profile>
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

Click on the social networks in the profile page

navigate

open_social_network

open

{
  socialNetwork: "<fb_account | instagram_account | youtube_account | twitter_account>"
}
JS

Contact an advisor from their profile page

navigate

contact_an_advisor

open

undefined
JS

Add or remove ‘favorite’ from an advisor

interact

button_add_remove_favorite

click

undefined
JS

Click on ‘posts’ tab

interact

button_see_posts_tab

click

undefined
JS

Open ‘posts’ tab

navigate

open_posts

open

undefined
JS

Click on ‘profile’ tab

interact

button_see_profile_tab

click

undefined
JS

Open ‘profile’ tab

navigate

open_profille

open

undefined
JS

Like or unlike a post in the ‘posts’ tab

interact

button_like_unlike_post

click

undefined
JS