Publication Widget v3
Document Version 3.1.20
The v3 Publication Widget (formely named “Meta blog” widget) is compatible with both v3 and v4 Popsell instances.
META BLOG: WIDGET INTEGRATION GUIDE
This document describes the integration process of the "Meta blog" widget generated by the Popsell platform. This widget is intended to display Popsell contents on an external website (product pages, landing pages, etc.) and enable some interactions.
Render preview
Screenshot 1 - Metablog Widget in "page" mode
Screenshot 2 - Metablog Widget in "slider" mode
Prerequisites
The use of this widget is subject to certain prerequisites to be able to be integrated.
- Have a POPSELL environment installed: Please contact the Popsell team to install your custom environment (support@popsell.com).
- To display the ambassador's posts, you must have an API key to authenticate the requests as this one. If you do not have one or if you wish to provide a list of public posts, you will need a guest API key (limited features).
If you do not meet the above requirements, you will not be able to use the widget properly. If you need assistance with the validation of the prerequisites, you can contact our tech team at the following address: tech@popsell.com.
How it works
The "Metablog" is a widget that allows you to embed the various contents created on a Popsell platform, in the form of a collection of smart items.
The widget is developed as a jQuery UI plugin. No dependency management is required, and its installation is as simple as possible.
Customization of the widget is possible by simply overlaying the generated CSS, all classes are named so as not to impact the rest of your application.
Get started
The latest library version is available here: https://popsell.com/popsell-widgets/posts-slider-view/js/jquery.popsell.widgetPostsSliderView.js
<div id="popsell-widget-posts-slider-view"></div>
<script src = " https://popsell.com/popsell-widgets/posts-slider-view/js/jquery.popsell.widgetPostsSliderView.js">
</script>
<script type="text/javascript">
function popsellWidgetPostsSliderViewLoaded() {
$(document).popsellWidgetPostsSliderView({
mode: 'page',
use_example_data : true,
metablog_container: ‘#popsell-widget-posts-slider-view’
});
}
</script>
The code below should allow you to display the equivalent of this screenshot (see Screenshot 1 - Metablog in "page" mode).
Parameters
metablog_container
Description | This parameter is required to display the metablog. It permits to specify an css selector to an id of div element to integrate the metablog. |
Default | null |
Values | CSS selector |
Additional information | If not defined, the metablog will not be displayed. |
mode
Description | This parameter allows you to choose whether you want to display the posts as a page (see "Screenshot 1 Metablog in "page" mode") or as a slider (see "Screenshot 2 Metablog in "slider" mode"). | |
Default | Slider | |
Values | page | Enable “page” mode |
slider | Enable “slider” mode |
api_key
Description | This parameter is required to authenticate the call made to retrieve the different posts. You can provide a user API key or a guest API key. |
Default | Required |
Values | Use of a user API key: Enables to identify a specific user within the widget, if user specific content or actions are to be displayed. This user API key can be retrieved by calling another API (please refer to our API guide). Using a guest API key: Allows you to display public posts in the widget, without any user specific features. |
api_path
Description | Allows to define a different API url than the one defined by default |
Default | //popsell.com/api |
Values | URL to a valid Popsell API |
Additional information | In most case, this option should not be used |
library_path
Description | Allow to define a custom path to access to the widget library |
Default | //popsell.com |
Values | URL to a Popsell instance |
Additional information | In most case, this option should not be used |
load_css
Description | Automatically load the default css attached to the widgets | |
Default | True | |
Values | True | Load css auto. |
False | Do not load css auto. |
locale
Description | Locale use in the widget |
Default | Fr-FR |
Values | Locale format “xx-XX” |
log_active
Description | Allows to display logs to facilitate the debugging of the widget | |
Default | False | |
Values | True | Enable log |
False | Disable log |
use_example_data
Description | Allows you to load example data without using an API. This option is useful for easy testing and setting up. | |
Default | False | |
Values | True | Use example_data |
False | Use api |
use_point_of_sale_color_as_post_bg
Description | This option permit to define if the post background need be set according to the point of sale color or not | |
Default | False | |
Values | True | The background will be defined with the point of sale color when exists |
False | The background will not be defined with the point of sale color |
brand
Description | Allows you to define custom colors |
Default |
CODE
|
Values | Object respecting structure below |
Additional information | The "primary_color" attribute is mainly used for elements to be highlighted. The "secondary_color" attribute is mainly used for the background. |
translates
Description | Allows you to customize the static texts of the widget |
Default |
CODE
|
Values | Object respecting structure below |
id_point_of_sale
Description | Allow to filter displayed posts by an id_point_of_sale |
Default | false |
Values | A valid id_point_of_sale from your side (This id is defined by a webservice) |
display_post_likes
Description | This option permit to define if user can like the post or not. In thise case, a thumbs up will be display in the top right corner and in the zoom view. | |
Default | true | |
Values | True | Show thumbs-up button |
False | Hide thumbs-up button |
display_comments
Description | This option permit to define if the post comments are display in the post details view or not. | |
Default | False | |
Values | True | Show post comments |
False | Hide post comments |
display_levels
Description | This option permit to define if the user’s level badges should be displayed or not | |
Default | False | |
Values | True | Show level badges |
False | Hide level badges |
load_more
Description | This option allows the user to load more than 20 posts by making infinite scroll in slider mode and by appending a “View more” button at the end of the page view. | |
Default | False | |
Values | True | Load more enabled |
False | Load more disabled |
posts
Description | Object representing the post configuration | |
Default |
CODE
| |
Attributes | Nb | Number of post displayed |
use_cache
Description | Define if the posts returns are cached or not. The cache lifetime is defined to 15 minutes. | |
Default | true | |
Values | true | Cache enabled |
false | Cache disabled |
redirect_on_comment
Description | If enabled, display a fake input at bottom of comments that redirect user to post view to make a comment. | |
Default | false | |
Values | true | Display the comment input and redirect |
false | Hide the comment input |
Methods
changeMode
Description | Allow to change on fly the mode used to display the posts | ||
Parameters | mode | page | Switch to page mode |
slider | Switch to slider mode | ||
Additional Information | When several calls are made in too short a time, the last mode requested is taken into account. | ||
Example |
CODE
|
openPostDetailsWindow
Description | Permit to display the post details in a zoom mode by specifying a post id | |
Parameters | post_id | A valid post id to fetch and display in a “zoom” view |
Callback (optional) | A call-back function called after zoom view initialization. 1st param: the status (Boolean) giving success of the zoom initialization. | |
Example |
CODE
|