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

CODE

<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 `"theme": { primary_color: '#ffd58e', secondary_color: 'rgb(128, 128, 128)' }`
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 `translates: { post_category_top: 'Classement', comments: 'Commentaires', discover_top: 'Découvrez le TOP 3 de la semaine !', post_category_quiz: 'QUIZ', translate_btn_see_more : "Voir plus" }`
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 `posts : { nb : 10 },`
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 `widget.popsellWidgetPostsSliderView('changeMode', 'slider');`

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. 1^st param: the status (Boolean) giving success of the zoom initialization.
Example	CODE `widget.popsellWidgetPostsSliderView('openPostDetailsWindow', 3518, function(status) { $("#example-loader").hide(); if (status) console.log(‘Displayed’); else console.log(‘Not displayed’); });`