Warning: This document is in work in progress state. Popsell is currently re-building its entire widgets architecture. Everything related in this document is subject to complete changes.
This document describes the integration process of the Popsell Metablog Widget. The Popsell Metablog Widget is intended to display content from Popsell on an external website, and enable some interactions.
The Popsell Metablog Widget need some requirements to be able to be integrated:
1- A Popsell environment
If you don’t have a Popsell Environment yet, please contact the Popsell Team to obtain your custom environment : email@example.com
2- An API Key from Popsell to authenticate requests
In order to display ambassador’s posts, you must possess an API key to authenticate requests. If you don’t have an API key yet, or if your need to provide a list of public posts, a guest API key which include limited features is required.
3- Widget options enabled in your Popsell environment
The widget need the option “Enable external widgets” to be checked in your Popsell environment to be allowed to execute itself.
Make sure to fill the requirements before going to the next step. If you need assistance with the validation of the prerequisites, contact our tech team at the following address: firstname.lastname@example.org
How it works
Our conviction is that your customers will drive your commerce in the future. Popsell is an innovative solution to engage your customers and employees with your brand, enabling to build a new C2C sales channel.
With Popsell, each customer becomes a new point of sale!
The Popsell Metablog Widget allows you to embed various contents created on a Popsell Platform, in a form of a collection of smart items. The widget is developed as a jQuery UI plugin or Vue.js plugin. No dependency management is required, and its installation remains simple.
It is possible to customize the widget by passing a list of options. (See options)
NPM is the only installation provided for now.
npm i --save @popsell/popsell-metablog
If you own a Vue.js environment, you can simply import and use the
<popsell-metablog /> component.
<popsell-metablog :api-url="<your api url>" :api-key="<your api key>" mode="stack" :limit="8" :invite-meet-community="true" :display-load-more="false" :display-comments="true" :display-likes="true" :internal-behavior="true" />
jQuery integration // NEED CHECK UP
The Popsell Metablog Widget can also be used in along side with jQuery.
Type & default value
Generate an API key in the Popsell Manager under “Configuration > API” menu
By default, configured on global the Popsell API endpoint. This can be changed to specify another instance of the Popsell API or a specific domain.
Define the width in pixels of the metablog cells.
Represent the radio (width / height) used to draw cells.
String [slider, stack]
Display mode of the widget
The slider mode is an horizontal fixed height display with a carousel.
Stack mode is a masonry pattern
Should the likes count be displayed
Should the comments be displayed
Should the invite to join the community be displayed. This button is located on a post detail.
Limit the amount of posts loaded and displayed in batch.
Should the load more posts button be displayed
Only in stack mode
String [zoom, redirect]
Define the action when opening a post from the Popsell Metablog Widget.
The ‘zoom’ mode opens a modal box integrated in the page containing the post details.
The ‘redirect’ mode redirect the user to a new page with the post detail, in accordance of
This is used to build the redirect URL associated with a post detail.
Filter the results.
Only one filter is intended to be used
The filter needs to be written in this form:
Existing filters :
Define the default CTA behavior. If setup to false, the button opens up the page in the same browser tab.
If setup to true, the button opens up the page in a new tab.
Remove jQuery in favor of VanillaJS