Skip to main content
Skip table of contents

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.

1st 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’);
});

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.