Skip to main content
Skip table of contents

Install Checkout Comments as a Single-Region Emplifi UGC Customer

Checkout Comments allow you to collect real-time testimonials and sentiment from customers as a widget on your PDP pages.

Once Checkout Comments has been enabled for your account, you can configure your collection and display widgets to start collecting and displaying content in Emplifi UGC. If Checkout Comments has not yet been enabled, please reach out to Emplifi Support or your Customer Success Manager.

The instructions on this page are for Emplifi UGC clients who operate in a single locale or single region. To learn the steps for multi-region or multi-locale clients, see Install Checkout Comments as a Multinational Emplifi UGC Customer.

Set up your Collection widget

We recommend starting with configuring your collection widget before your display widget. 

About the Checkout Comments Collection Widget 

This widget is a popup Lightbox that is shown to the shopper on the order confirmation page, so as not to interfere with the checkout process. It lists the products the shopper just purchased and asks them a customizable question (for example: “Why did you choose this?”). 

Configuration

To configure your collection widget, navigate to Curation --> Checkout Comments and click the blue button on the top right “Set Up Checkout Comments.”

This will load a Lightbox in the center of your screen where you can customize your Checkout Comments Collection Widget with the following:

  • A header for the Lightbox: to introduce the request, add a phrase like,“To help other shoppers make good decisions, please tell us why you chose this.”

  • The main question you want to ask: for shoppers to respond to, like “Why did you choose this?”

  • Colors to configure:

    • Header and question text color

    • Date, time and username text color

    • Pagination arrows and buttons

  • Option to include repeat purchases: If a customer purchases a SKU multiple times over different transactions, we will still solicit a Checkout Comment. When disabled, this means we will only ask for a comment once. (We recommend keeping this toggled on!)

  • Fonts: Currently, Helvetica is your default font. If you’d like to customize your typeface, please reach out to Emplifi Support.

As you choose your settings, you may preview at any time by pressing the “Preview” button in the top right corner of the Lightbox. 

Once you are happy with the way your widget looks, save your settings. You will then be asked if you want to "Publish" your collection widget - this is the action that actually builds the widget for production. We recommend not publishing until you’re confident in your configuration. If you “Publish” too many times in a singular time period - there could be a delay in loading the proper configuration. 

Implement the Collection Widget on your Order Confirmation Page

Next, you will want to implement the widget on your order confirmation page in your e-commerce platform. There are differences between Shopify and Non-Shopify implementations, so please follow instructions accordingly: 

Non-Shopify Users

For non Shopify users you’ll need to configure your Javascript Order Feed to pass us the orders so Emplifi UGC knows what products to include in the Collection Widget (and show the widget on the page). 

  1. Place the following code into the <head> of your order confirmation page, replacing <SITE KEY> with your Site Key (your CSM can share this with you!):

    CODE 
    <script type="text/javascript">
  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/<SITE KEY>/js/turnto.js"
async></script>

    2. Create a JavaScript object that represents the order data to be passed. The code should be placed anywhere below the code placed in step (1). Here's the object syntax with example data:

    CODE 
    <script type="text/javascript">
  TurnToCmd('feed.send', {
    orderId: 56754,
    email: 'email@address.com',
    postalCode: '12312',
    firstName: 'First',
    lastName: 'Last',
    nickName: 'nickName',
    items: [
      {
        title: 'Epic React knit sweater',
        url: 'https://www.site.com/epic-react-knit-sweater-abc75M/AQ0001-001',
        itemImageUrl: 'https://i.site.com/epic-react-knit-sweater-abc75M/AQ0001-001.jpg',
        sku: 'AQ0001-001'
      },
      {
        title: 'Lunar Boot \'18',
        url: 'https://www.site.com/lunar-boot-defG1d/BR0001-001',
        itemImageUrl: 'https://www.site.com/lunar-boot-defG1d/BR0001-001.jpg',
        lineItemId: 'b',
        sku: 'BR0001-001'
      }
    ]
  });
</script>

If there are errors in the JavaScript Order feed or you need further assistance with troubleshooting, please contact customer support.

Shopify Users

Navigate to your Shopify app and follow the following steps:

  1. From the Shopify Admin, click “Settings” in the lower left corner

  2. Click “Checkout”

  3. Scroll down to the “Order Status page” section.

  4. Enter this code in the “Additional scripts” box:
    (info) Uncomment the locale property (remove the forward-slashes //). If your locale is not "en_US", update the property to match your locale. If you are unsure about your locale, consult your Emplifi Customer Success Manager. If your account has multiple regions, see this step inInstall Checkout Comments as a Multinational Emplifi UGC Customer.

    CODE 
    {% if first_time_accessed %}
<script>
  var orderData = {
    // locale: "en_US",
    // regions: ["####", "####]],
    orderId: "{{ order.id }}",
    email: "{{ order.customer.email }}",
    postalCode: "{{ order.shipping_address.zip }}",
    firstName: "{{ order.customer.first_name }}",
    lastName: "{{ order.customer.last_name }}",
    items: [
      {% for item in order.line_items %}
        {
          title: "{{ item.title }}",
          url: "https://{{ shop.domain }}{{ item.url }}",
          itemImageUrl: "{{ item | img_url: '100x100' }}",
          price: "{{ item.original_price | divided_by: 100.0 }}",
          sku: "{{ item.sku }}",
          variant_id: "{{ item.variant_id }}",
          product_id: "{{ item.product_id }}"
        },
      {% endfor %}
    ]
  }
</script>
<script src="https://shopify.pixlee.com/api/comments/capture?shopify_domain={{ shop.domain }}" async></script>
{% endif %}

  5. Click “Save” at the bottom of the page.

You are now collecting content from your customers and will see it in your moderation dashboard.

Display a widget showcasing collected Checkout Comments on your PDP page

Once you are collecting content you can now display that content on your PDPs. 

About the Checkout Comments Display Widget 

This widget lives on your product detail pages and showcases SKU-specific Checkout Comments that are approved in moderation. This widget is valuable for two reasons: 

  1. Showcasing additional social proofing to drive purchase

  2. Given the volume of content that’s constantly posting to your site, there is incredible SEO value.

Configuration

To configure your Display Widget, go to the Publish Center in Emplifi UGC and you will see an icon on the right side that says “Checkout Comments.” 

This will load a Lightbox in the center of your screen where you can customize your Checkout Comments Display Widget:

  • Title: For example, “Why I chose this”

  • Sort Order: There are two options: By recency or by highest word count

  • Minimum Comments: This is the minimum number of comments that will be displayed in your widget

  • Comments per page: This is the number of comments that will display per page before paginating (we recommend 6).

  • Comment Background Color: Comments are automatically listed in white font so we recommend a contrasting color.

  • Font: Currently, Helvetica is your default font. If you’d like to customize your typeface, please reach out to Emplifi Support.

As you choose your settings, you may preview at any time by pressing the “Preview” button in the top right corner of the Lightbox. 

Similar to the process for your Collection Widget, once you are happy with the way your widget looks, save your settings. You will then be asked if you want to "Publish" your collection widget - this is the action that actually builds the widget for production. We recommend not publishing until you’re confident in your configuration. If you “Publish” too many times in a singular time period - there could be a delay in loading the proper configuration. If you seen an error message about "Publishing" too many times in rapid succession, please wait 30 min and publish again. 

Implement the Display Widget on your PDPs

Next, you will implement the widget on your PDPs in your e-commerce platform. The code is the same whether you use Shopify or not, but we have provided Shopify-specific instructions below as well. 

To install the Comments Display widget:

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

    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>

     

  2. Replace YOUR SKU and YOUR SITE KEY(in bold above) with the appropriate values. If you don't know YOUR SITE KEY, please contact support. 

  3. 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>

Shopify

Follow the steps below on where to place the above code in Shopify.

  1. From the Shopify Admin, click “Online Store”

  2. Click “Themes” and click into the theme you’d like to edit

  3. On the left side panel, towards the bottom, click “Theme Actions”  

  4. Click “Edit Code”

  5. Search for the file where you want to embed the code. This would likely be a PDP page, with a template named something similar to "product.liquid".

  6. Add the code that's been provided above to the appropriate location within the template. This will vary depending on where you'd like to place the content.

Do you have feedback or more questions? You can contact us through our Emplifi Customer Center.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close