Skip to main content
Skip table of contents

Install Checkout Comments as a Multinational 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 have been enabled for your account, you can configure your collection and display widgets in Emplifi UGC to start collecting and displaying content. 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 multiple regions or locales. To learn how to install checkout comments if you are a single-region or have a single locale, see Install Checkout Comments as a Single-Region Emplifi UGC Customer.

Set up your Collection widget

We recommend 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 per SKU. (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. 

For a multinational client using Checkout Comments, this lightbox will showcase all the locales that are available to be customized. In the Message Configuration dialog, you can customize the messaging to show for each locale. Customizing all locales is not required, just make sure the messages are what you want for each locale for which you will collect comments. All widgets build at the same time for all locales, but you can have a phased rollout by placing the embed codes in your e-commerce environment at different times for different locales.

Once you are happy with the way your widget looks, save your settings. The final page of the lightbox gives you an overview of the customizations you made and asks if you want to "Publish" your collection widget - this is the action that builds the widget for production. We recommend not publishing until you’re confident in your configuration. If you “Publish” multiple times in a short period, there could be a delay in loading the proper configuration. If you see an error message about “Publishing” too many times in rapid succession, please wait 30 minutes and “Publish” again.

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 order information. Emplifi UGC uses that information to include products in the Collection Widget and to show the widget on the Order Confirmation 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",
    regions: ["10004"]
    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>

^Note that locale should be one of the locales for which you plan to implement and regions should be the IDs of one or more of the regions you have set up in Emplifi UGC. You can get the IDs and names of each of your regions from Emplifi UGC Support or your Customer Success Manager.

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

If your account has multiple regions, contact your customer success manager or the Emplifi Customer Center to obtain your region IDs.

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 Processing” 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.

    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: If there are fewer than this number of comments, the widget will not be displayed.

  • 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 the display widget at any time by pressing the “Preview” button in the top right corner of the Lightbox. 

For a multinational client using Checkout Comments, this lightbox will showcase all the locales that are available to be customized. In the Message Configuration dialog, you can customize the messaging to show for each locale. Customizing all locales is not required, just make sure the messages are what you want for each locale for which you will be displaying comments. All widgets build at the same time for all locales, but you can have a phased rollout by placing the embed codes in your e-commerce environment at different times for different locales.

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 builds the widget for production. We recommend not publishing until you’re confident in your configuration. If you “Publish” multiple times in a short period, there could be a delay in loading the proper configuration. If you see an error message about "Publishing" too many times in rapid succession, please wait 30 minutes 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: {
       displayLocales: ["en_US", "fr_FR"]
       // 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. The locale determines which language and text to use for the display widget title.

  4. The displayLocales setting determines which comments to display, i.e., in the above example only comments collected with the en_US and fr_FR locales will be shown.

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