Step 1 - Prepare a placeholder

A placeholder is a div or other element which defines the location of the widget on the page. Usually it will be something similar to this html snippet located in your pages.

<div id='barilliance_widget0'></div>

Multiple placeholders can be added to the same page with different ids.


  •  It is not always necessary to prapare a placeholder since the widget can be located after, before or inside existing elements in your page.
  • If needed - Barilliance can add a placeholder 

Step 2 - Create rule and select page type

  • Create a recommendations widget rule and select your favorite default template.
  • Go to the rule segment and select the relevant page type

Step 3- Define widget general settings and layout

Set title

On the General Settings tab select the default title text, color and font. This title will be optionally changed depending on the specific recommendations shown to the user.

Select the placeholder id

  • Select the id of the element defined in step 1 which contains the widget on the page.
  • Select where to show the widget - before, after or inside the element.

Layout and Border

  • Click layout and border tab
  • Select whether you would like to use a slider or not
  • Set the desired border for the widget items
  • If necessary, change the number of items to show in different screen sizes. This is usually adjusted after the widget design is completed and tested on various screen sizes.

Step 4 - Widget items definition

Click the widget Item tab. This is where you define the look and feel of the widget.
Each part of the widget item is called a section for example the title, image and price are different sections.

  • To change the order of sections drag and drop them by the 6 dots handle icon
  • To define a section click the section bar on the left. and edit the section settings
  • For information about data sources and data manipulation read below
  • To add a section use the Add section button

Step 5 - Check the widget layout using the preview tab

Changes applied to the widget are visible in real time on the preview section. Change the preview window size to see how the widget behaves in different screen sizes.
You may want to adjust the widget settings to optimize the look for all screen sizes.

Step 6 - Define the Recommendations engine algorithm

Click the recommendations engine tab.

  • Select select the page type and widget slot number - this is used to connect the widget to the right recommendations data.

NOTE: Currently the settings of the recommendations engine from the user interface is experimental. Please select  "Use the default Settings" option in Recommendation Engine Settings and don't change any recommedations engine settings as these settings have no effect. (the site setup defaults are used).

Step 7 - Preview the rule on different devices

  • Click the preview rule icon to see the rule on your website*
  • Use the preview rule url on different devices and screen sizes to test the widget thoroughly.

Step 8 - Make the widget rule live

To make the widget show to all users, activate the widget rule on the campaigns list.

Step 9 - Changing a live widget with drafts

Once a widget is live, you may want to change it without creating a new rule (Since a new rule will lose the continuity of the statistics in the dashboard).

To change a live widget follow these steps:

  • Create a draft from the live rule using the save as draft button. 
  • Edit the draft
  • Preview and test the draft
  • Once you're ready to replace the live version with the draft, click publish on the draft and it will replace the live widget

Data Sources


Did this answer your question?