How to customize Predictive Content Recommendation widgets

Predictive Content Recommendation (PCR) application offers two different embeddable widgets which can be used to suggest content to your contacts within your web pages. The embed code of such widgets is provided within the application's Management Console, and can be simply copied and pasted in your pages to make it work. There are some available customization which will allow you to adapt the appearance and the behavior of the widgets. Let's take a look at the available parameters:

 

Adaptive Content Wall

 

Configuration parameters

  • clientId (string, mandatory): the domain name used to access THRON.
  • predictiveContentRecommendation (string, mandatory): Id of the Predictive Content Recommendation app (master).
  • appId (string, mandatory): id of the single recommendation application which you are going to use to access content (you will find the id in the Management tab of the application itself). Using this parameter, the Content WALL will access only those contents which can be accessed by the application.
  • fallback (string, optional): this parameter will allow you to configure the behavior of the recommendation widget when there are no available content to suggest or when the sessions are expired. Available values are:
    • none: no content will be displayed.
    • showContent (default): will display content in descending order of visualizations number (if available) or the latest content published within the folder related to the single recommendation.
  • locales (string, optional): this parameter will allow you to determine the locales that must be set in order to display content. If a content is not defined in the provided locale it will be excluded from the list. Default is "EN".
  • dictionaryLocale (string, optional): this parameter allows you to configure the language to be used by the widget’s interface, you can use language codes included in the ISO639-1 standard. The code must be written with uppercases (e.g. “IT”, “EN”). If no language is set, default will be “EN”.
  • cellGutterX (number, optional): this parameter allows you to configure the distance between the elements of the wall on the x. Default value is 8.
  • cellGutterY (number, optional): this parameter allows you to configure the distance between the elements of the wall on the y. Default value is 8.
  • customCssClass (string, optional): this parameter allows you to configure the suffix to be used by the widget’s CSS classes. By setting this parameter you will be able to include more than one widget in the same page, avoiding names collisions.
  • autoTracking (string, optional): this parameter allows you to decide wether the widget will have to automatically track the impressions and clicks of the content displayed. Default is false.

 

Functions that can be invoked on this widget

modifyItemTemplate (html): this function allows you to edit the HTML code of the widget’s internal elements, so that you will be able to build a custom GUI. The variable is a string including the html code to be used for each element. You may specify dynamic values within the code, they will be applied according to the single content related to the specific cell. Available values are:

  • contentClassWeight
  • contentUrl
  • customCssClass
  • clientId
  • contentThumbSize
  • contentTitlecontentType
  • contentName
  • contentDescription

In order to use one of these values you will have to include it within the HTML string, preceded by the “#:” characters and followed by the “#” character. Here’s an example:

 

var newTemplate = "<div class='THRON-recommendation-wall-item THRON-recommendation-wall-item-selector #: contentClassWeight #' >" +
    '<a class="THRON-item-href" href="#: contentUrl #" >' +
    '<div class="THRON-item-image-container" style="background-image:url(\'#: httpRequest##: clientId #-view.thron.com/api/xcontents/resources/delivery/getThumbnail/#: clientId #/#: contentThumbSize #/#: contentId #?scalemode=auto\');"></div>' +
    '<div class="THRON-item-information">' +
    '<div class="THRON-item-title">' +
    '<span class="title" title="#: contentName #">#: contentName #</span>' +
    '<span class="type-layer">' +
    '<span class="icon #: contentType #"></span></span>' +
    '</div>' +
    '<div class="THRON-item-description">#: contentDescription # </div>' +
    '</div>' +
    '</a>' +
    "</div>";

 

reset: This function can be invoked in order to re-initiate recommendation widget in the form widget.reset(<div>).

 

Graphic customization

The widget has specific conditions to fulfill in terms of graphics and CSS in order to properly perform the resize of its elements. Natively, the widget tries to ensure that the content fill all the available space, widening single elements in width and maintaining proportion, to ensure that no unoccupied space remains. This implies that each single element must be constructed through sizing rules as a percentage, to ensure that internal components are centered, and by enlarging the container they will remain aligned.

 

Events

widget.event.LOAD_COMPLETE: this event is launched once the widget has completed content’s loading.

For information on how to trigger a popup opening and embed THRON Player upon elements' click, please read this article.

 

Horizontal Content List

 

Configuration parameters

  • clientId (string, mandatory): the domain name used to access THRON.
  • predictiveContentRecommendation (string, mandatory): the Id of the Predictive Content Recommendation application (master).
  • appId (string, mandatory): the Id of the single recommendation which you are going to use to access content (you will find the id in the Management tab of the application itself). Using this parameter, the Content List will access only those contents which can be accessed by the application.
  • fallback (string, optional): this parameter will allow you to configure the behavior of the recommendation widget when there are no available content to suggest or when the sessions are expired. Available values are:
    • none: no content will be displayed.
    • showContent (default): will display content in descending order of visualizations number (if available) or the latest content published within the folder related to the single recommendation.
  • locales (string, optional): this parameter will allow you to determine the locales that must be set in order to display content. If a content is not defined in the provided locale it will be excluded from the list. Default is "EN".
  • dictionaryLocale (string, optional): this parameter allows you to configure the language to be used by the widget’s interface, you can use language codes included in the ISO639-1 standard. The code must be written with uppercases (e.g. “IT”, “EN”). If no language is set, default will be “EN”. Further information on strings’ translation can be found in the appendix.
  • thumbSize (string, optional): the size of the thumbnail to be extracted. It must be set with the following format: “<width>x<height>” (e.g.: 640x480). Default “150x150”.
  • customCssClass (string, optional) : this parameter allows you to configure the suffix to be used by the widget’s CSS classes, by setting this parameter you will be able to include more than one widget in the same page, avoiding names collisions.
  • minBoxWidth (string, mandatory): this parameter is used to define the minimum content size of each widget’s element, used to allow dynamic resize of the elements. The size to be configured does not consider margin and padding of the single elements; the widget’s logic will consider them in order to execute proper resizing.
  • autoplay (boolean, optional): this parameter allows to enable content list autoplay (automatic scroll) without user's interaction (default: false).
  • speed (number, optional): this parameter allows you to set the scroll speed of the elements (default is 400ms).
  • autoplaySpeed (number, optional): if autoplay is true, this parameter will allow you to set the automatic scroll speed of the elements (default is 3000ms). 
  • slidesToScroll (number, optional): this parameter allows you to set the number of elements to be scrolled; you can not set a number higher than the number of elements displayed by the widget (default value is 1).
  • maxElement (number, optional): this parameter will allow you to set the maximum number of elements within the content list (default and max. is 30).
  • autoTracking (string, optional): this parameter allows you to decide wether the widget will have to automatically track the impressions of the content displayed. Default is false.

 

Functions that can be invoked on this widget

modifyItemTemplate (html): this function allows you to edit the HTML code of the widget’s internal elements, so that you will be able to build a custom GUI. The variable is a string including the html code to be used for each element. You may specify dynamic values within the code, they will be applied according to the single content related to the specific cell. Available values are:

  • contentId
  • customCssClass
  • contentName
  • contentDescription
  • contentUrl
  • contentThumbSize

In order to use one of these values you will have to include it within the HTML string, preceded by the “#:” characters and followed by the “#” character. Here’s an example:

 

var newTemplate = "<div class='THRON-recommendation-list-item'>" +
    '<div class="THRON-item-image-container" style="background-image:url(\'//#: clientId #-view.thron.com/api/xcontents/resources/delivery/getThumbnail/#: clientId #/#: contentThumbSize #/#: contentId #?scalemode=auto\');"></div>' +
    '<div class="THRON-item-information">' +
    '<div class="THRON-item-title">' +
    '<div class="title-value">' +
    '<span class="title" title="#: contentName #">#: contentName #</span>' +
    '</div>' +
    '</div>' +
    '<div class="THRON-item-description">#: contentDescription #</div>' +
    '</div>'

 

reset: This function can be invoked in order to re-initiate recommendation widget in the form widget.reset(<div>).

 

Graphic customization

The widget has specific conditions to fulfill in terms of graphics and CSS in order to properly perform the resize of its elements. Natively, the widget tries to ensure that the content fill all the available space, widening single elements in width and maintaining proportion, to ensure that no unoccupied space remains. This implies that each single element must be constructed through sizing rules as a percentage, to ensure that internal components are centered, and by enlarging the container they will remain aligned.

 

Events

widget.event.LOAD_COMPLETE: this event is launched once the widget has completed content’s loading.

Was this article helpful?
2 out of 2 found this helpful

Have any question?

Open a ticket
Comments