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
<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
<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.
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
|
Add a product to the wishlist from the overlay | interact | btn_wishlist_overlay | addToWishlist |
JS
|
Add a product to the wishlist from the zoom product | interact | btn_wishlist_zoom | addToWishlist |
JS
|
Remove a product from the wishlist from the chat | interact | btn_wishlist_chat | removeFromWishlist |
JS
|
Remove a product from the wishlist from the overlay | interact | btn_wishlist_overlay | removeFromWishlist |
JS
|
Remove a product from the wishlist from the zoom product | interact | btn_wishlist_zoom | removeFromWishlist |
JS
|
Get the number of products shared in a conversation | status | get_nbr_products | click |
JS
|
Open the product sheet of a product from the zoom product | navigate | open_product_page | open |
JS
|
Feedback about when the widget is loading | status | popsell_community | load |
JS
|
Feedback about when the widget is ready | status | popsell_community | ready |
JS
|
Open the community widget | interact |
| open |
JS
|
Open the home page | navigate | home_page | open |
JS
|
Define the widget opener | define | popsell_community | defineOpener |
CODE
|
Close the community widget | interact |
| close |
JS
|
Click on “contact an available advisor” button when logged in | interact | button_discuss_with_available_advisor | click |
JS
|
Click on “contact an available advisor” when not logged in | interact | button_discuss_with_advisor_guest | click |
JS
|
Searching an available advisor near you | interact | button_search_available_advisor | click |
JS
|
See more advisors near you | interact | button_see_more_advisors | click |
JS
|
Open the page that contains the advisors near you | navigate | near_you_page | open |
JS
|
See an advisor’s profile from the widget home page | navigate | open_advisor_profile_from_home_page | open |
JS
|
See all your conversations | interact | button_see_more_conversations | click |
JS
|
See an advisor’s profile from the “search an advisor” page | navigate | open_advisor_profile_from_search_advisor | open |
JS
|
Start a conversation with an advisor from the “search an advisor” page | interact | button_start_conversation_from_search_advisor | click |
JS
|
Open your conversation with your favorite advisor | navigate | open_conversation_favorite_advisor | open |
JS
|
Open one of your recent conversations | navigate | open_recent_conversation | open |
JS
|
Open zoom products | navigate | open_zoom | open |
JS
|
Open custom contact link | navigate | authenticated_community_home guest_community_home community_topic_choice | click |
JS
|
Decline term of services | interact | btn_im_decline_tos | close |
JS
|