Comments Pinboard Teaser

The Emplifi Ratings & Reviews Checkout Comments Pinboard Teaser widget offers a content-rich user experience on category or product listing pages. It showcases the latest Checkout Comments for one or more active SKUs, brands, content tags, and product categories.

Content within the widget is organized by product. Up to two Checkout Comments display underneath a product photo and title that link to your product detail page. The widget renders comments for as many eligible products as can fit within the viewport width.

In order for the widget to display there must be at least four products with images that have four posted comments each. To be included, products must have a valid product photo specified in the Catalog Feed. Products appear in the order of the most recently commented-on product that has at least four posted comments.

The Pinboard Teaser also features an optional promo box with promotional text and a button with customizable text and URL target. Use this feature to promote your Comments Pinboard page.

Installing the Comments pinboard teaser

Steps:

Place the following code into the <head> of your page:

CODE

<script>
    var turnToConfig {
      locale:"en_US",
      pageId:"comments-pinboard-teaser-page",
      commentsPinboardTeaser: {
        // skus: [],
        // tags: [],
        // brands: [],
        // onFinish: function(){}
      }
    };

window.TurnToCmd=window.TurnToCmd||function(){(TurnToCmd.q=TurnToCmd.q||[]).push(arguments)};
  </script>
  <script src="https://widgets.turnto.com/v5/widgets/YOUR SITE KEY/js/turnto.js" async></script>

If you are a TurnTo.eu customer, change turnto.com to turnto.eu in this snippet.

Replace YOUR SITE KEY with the appropriate value.
To display the Comments pinboard teaser, add this div element. The widget dynamically inserts content into the element.
CODE
```
<div id="tt-comments-pinboard-teaser-widget"></div>
```

Filtering displayed content

skus, tags, and brands are optional properties within turnToConfig that constrain the content displayed to specific SKUs, product categories, brands, or tags. You can enter any combination of SKUs, product categories, brands, or tags. Each property is optional.

Steps:

Add one or more one or more SKUs or categories as an array, such as skus: ['category1','sku1','sku2'].
Add one or more tags as an array, such as tags: ['tagcode1','tagcode2'].
Add one or more brands as an array, such as brands: ['brand1'].

Configuration options

These optional settings are not managed within the Emplifi Ratings & Reviews installation code. Contact Emplifi Support to enable, disable, or adjust these settings.

Option	Default setting	Description
variant div IDs	tt-comments-pinboard-teaser-widget	You can specify a different div ID, if necessary.
activeOnly	true	If true will only return content for active products.
includeSyndicated	false	Whether syndicated comments should display within widget.
maxDaysOld	30	The maximum days old a comment can be and still appear in the product box. A value of `-1` means all comments should be included, regardless of age.
promoButtonUrl	null	The URL to go to when clicking the promo box button. This setting is required in order for the promo box to display.
promoPlacement	see description	If the `promoButtonURL` is not empty, this config option determines the placement of the promo box. Placement is configurable by viewport width: viewport width <= 600px Options: top (default) bottom 600px+ Options: left (default) right
spacing	8px	Padding between each box in the widget. Can be configured by viewport width, if desired.
titleMaxLength	40	The maximum length of the product title, after which displays an ellipsis (...)
hoverTitleMaxLength	65	The maximum length of the product title which displays on mouse hover, after which displays an ellipsis (...)
showReviewStars	false	On image hover, display review stars (if available) below product title.
commentMaxLength	115	The maximum length of text characters to display. Ends with ellipsis (...)
userNameMaxLength	255	The maximum length of the user’s name, after which displays an ellipsis (...)