Basic Install

This article includes only the required steps for installing each SpeedFlex widget. For more detailed instructions, including optional steps and configuration settings, see SpeedFlex Widgets.

Installing Community Q&A widgets

Steps:

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

This turnToConfig snippet controls all installed Emplifi Ratings & Reviews widgets. It should be placed only once.

CODE

<script>
  var turnToConfig = {
    sku:"YOUR SKU",
    locale: "en_US",
    pageId: "pdp-page",
    qa: {
      // 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 SKU and YOUR SITE KEY with the appropriate values.
To display the Instant Answers widget, add this div element. The widget dynamically inserts content into the element.
CODE
```
<div id="tt-instant-answers-widget"></div>
```
To display the Q&A List widget, add this div element. The widget dynamically inserts content into the element.
Most customers choose to display the Q&A List widget directly below the Instant Answers widget.
CODE
```
<div id="tt-qa-list"></div>
```

Installing Ratings & Reviews widgets

Steps:

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

This turnToConfig snippet controls all installed Emplifi Ratings & Reviews widgets. It should be placed only once.

HTML

<script>
  var turnToConfig = {
    locale: "en_US",
    pageId: "pdp-page",
    sku: "YOUR SKU",
    reviewsList: {
      // 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 SKU and YOUR SITE KEY with the appropriate values.
To display the Reviews Summary widget, add this div element. The widget dynamically inserts content into the element.
HTML
```
<div id="tt-reviews-summary"></div>
```
To display the Review List widget, add this div element. The widget dynamically inserts content into the element.
Most customers choose to display the Review List widget directly below the Reviews Summary widget.
HTML
```
<div id="tt-reviews-list"></div>
```

Adding your landing page

The landing page is a standalone page on your site where shoppers complete Ratings & Reviews submission forms.

Steps:

In Emplifi Ratings & Reviews, click Settings → Manage Site.
Add your landing page to the Landing Page URL field.

To embed the Ratings & Reviews Submission form, add the following high up on your landing page.

CODE

<script>
    var turnToConfig = {
      locale: "en_US",
      pageId: "email-landing-page"
    }
    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 Emplifi.eu customer, change turnto.com to turnto.eu in this snippet.

Replace YOUR SITE KEY with the appropriate value.
To display the Ratings & Reviews Submission form, add this div element to the desired location.
CODE
```
<div id="tt-embedded-submission"></div>
```

Installing Checkout Comments

Installing the Comment Capture widget

The Comment Capture widget asks shoppers "Why did you choose this product?" on the order confirmation page, allowing you to gather positive product sentiment much sooner than what can be collected from traditional Emplifi Ratings & Reviews collection methods.

To install the Comment Capture widget you must first also install the JavaScript Order feed on your order confirmation page.

Steps:

Place the following code into the <head> of your order confirmation page (if you are a TurnTo.eu customer, change turnto.com to turnto.eu before you use this snippet):
This snippet controls both the JavaScript Order feed and the Comment Capture widget, so it should only be placed on your order confirmation page once for both widgets. If you've already added the snippet for the JavaScript Order feed, then skip this step.
CODE
```
<script>
    var turnToConfig = {
        locale: "en_US",
        pageId: "order-confirmation-page"
    };
    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>
```
Replace YOUR SITE KEY with the appropriate value.
If you've chosen the embedded display option for the Comment Capture widget, add this div element. The widget dynamically inserts content into the element.
CODE
```
<div id="tt-comment-capture"></div>
```

Installing the Comments Display widget

Steps:

Place the following code into the <head> of your page (if you are a TurnTo.eu customer, change turnto.com to turnto.eu in this snippet):

The turnToConfig snippet controls all installed Emplifi Ratings & Reviews widgets. It should be placed only once.

CODE

<script>
  var turnToConfig = {
    locale: "en_US",
    pageId: "pdp-page",
    sku: "YOUR SKU",
    chatter: {
      // 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>

Replace YOUR SKU and YOUR SITE KEY with the appropriate values.
To display the Comments Display widget, add this div element. The widget dynamically inserts content into the element.
CODE
```
<div id="tt-chatter-widget"></div>
```

Installing the Top Comment widget

Steps:

Place the following code into the <head> of your page (if you are a TurnTo.eu customer, change turnto.com to turnto.eu in this snippet):

This turnToConfig snippet controls all installed Emplifi Ratings & Reviews widgets. It should be placed only once.

CODE

<script>
    var turnToConfig = {
        locale: "en_US",
        pageId: "pdp-page",
        topComments: {
            // tags: [],
            // 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>

Replace YOUR SITE KEY with the appropriate value.
To display top comments, add one or more div elements. Each element should have a class of tt-top-comment and an attribute called data-ttsku that defines which product content should display. The widget dynamically inserts content into these elements.
CODE
```
<div class="tt-top-comment" data-ttsku="YOUR SKU"></div>
```

Installing Top Comments on a non-PDP

The pageId tells the Emplifi which set of widgets and related configurations to load. If you are implementing the Top Comments widget along with other widgets on your product detail page, leave the pageId value set to "pdp-page". However, you can also load Top Comments on a product listing page or another landing page.

To implement the Top Comments widget on a product listing page or another landing page, update the pageId to the appropriate value, such as "top-comments-page".

Filtering displayed content

tags is an optional property within turnToConfig that constrains the content to a specific tag or set of tags.

To filter displayed content by one or more tag codes, add tags as an array, such as
tags: ['tagcode1','tagcode2'].

Installing the Comments pinboard

Steps:

Place the following code into the <head> of your page (if you are a TurnTo.eu customer, change turnto.com to turnto.eu in this snippet):

CODE

<script>
  var turnToConfig = {
    locale: "en_US",
    pageId: "comments-pinboard-page",
    commentsPinboard: {
      // 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>

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

The Comments pinboard also filters out any product that doesn't have an associated product image.

To filter displayed content:

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'].

Installing the Comments pinboard teaser

Steps:

Place the following code into the <head> of your page (if you are a TurnTo.eu customer, change turnto.com to turnto.eu in this snippet):

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>

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.

To filter displayed content:

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'].

Installing Visual Content

Installing the Gallery Row widget

Steps:

Place the following code into the <head> of your page (If you are a TurnTo.eu customer, change turnto.com to turnto.eu in this snippet):
This turnToConfig snippet controls all installed Emplifi Ratings & Reviews widgets. It should be placed only once.

CODE

<script>
  var turnToConfig = {
    locale: "en_US",
    pageId: "pdp-page",
    gallery: {
      // Add one or more SKUs as an array.
      skus: ['YOUR SKU','ANOTHER SKU (OPTIONAL)','ANOTHER (OPTIONAL)']
    }
  };
  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>

Replace YOUR SKU and YOUR SITE KEY with the appropriate values, and add more SKUs, if needed.
To display the Visual Content Gallery Row widget, add this div element. The widget dynamically inserts content into the element.
CODE
```
<div id="tt-gallery-row"></div>
```

Installing the Visual Content pinboard

Steps:

Place the following code into the <head> of your page (if you are a TurnTo.eu customer, change turnto.com to turnto.eu in this snippet):

CODE

<script>
  var turnToConfig = {
    locale: "en_US",
    pageId: "vc-pinboard-page",
    vcPinboard: {
      // Add SKUs, tags, brands, or any combination.
    }
  };
  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>

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

Displaying the Teaser Widget

To add the Teaser Widget you must install one of the following:

Community Q&A widgets
Ratings & Reviews widgets
Checkout Comments widget

To display the CGC Teaser widget, add this div element. The widget dynamically inserts content into the element.

CODE

<div id="tt-teaser-widget"></div>

Most customers choose to display the Teaser widget near the top of the PDP.