Recently Viewed Items (Edit Toolbar)

The Recently Viewed Items Edit Toolbar in BlueConic adds a selector icon to the toolbar of the content editor. Click on the icon to insert a list of recently viewed items at the place of the cursor. This list will automatically be populated by the Recently Viewed Items listener.

Adding the list

To insert a list of recently viewed items, open the editor of a content dialogue and select "Recently Viewed Items List" from the "Insert object" list:

How do I use BlueConic CDP to display a list of articles or content items or products a customer viewed recently?

This will add a placeholder list to the content editor:

How do I show a list of products or articles a customer viewed recently?

Select the list and edit it, or double click the list and it will open a configuration popup with two tabs for configuring the recently viewed items list and the CSS styling of the list.

Recently viewed items list

How do I display a recently viewed items list in the BlueConic customer data platform?

Fetch from Profile Property (required)
Select the profile property that holds the recently viewed items. This the same profile property that is configured in the Recently Viewed Items listener.
Amount of items in the list (required)
Enter the maximum number of items you want to de displayed in the list.

Styling

How do I show a list of items my customers viewed recently?

Custom CSS URL
Optionally enter the URL to load custom CSS from. The CSS from the URL is loaded before the Custom CSS Code.
Custom CSS Code

Optionally enter custom CSS to style the list. This CSS will overrule CSS loaded from the URL. The HTML of the list will look like this:

<ul class="bcRecentItems">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

So to style the list you will want to prefix your CSS rules with ul.bcRecentItems

As an example, the CSS below would allow you to style the list as a comma separated list:

ul.bcRecentItems {display: inline; list-style: none; padding-left: 0;}
ul.bcRecentItems li {display: inline;}
ul.bcRecentItems li:after {content: ", ";}
ul.bcRecentItems li:last-child:after {content: "";}

Which could look like this to the visitor:

Can I use CSS to create a list of items viewed recently in BlueConic?