> For the complete documentation index, see [llms.txt](https://help.checkoutchamp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.checkoutchamp.com/crm/plugins/email-service-providers/yotpo/reviews.md).

# Reviews

### 1. Review Placement on Product Detail Pages

#### Review Widget

<figure><img src="/files/LjIOLrkEj7iHoSBQybgT" alt=""><figcaption></figcaption></figure>

Add the following HTML element where you'd like reviews to appear

```html
<div id="yotpo-widget-container">Yotpo Reviews</div>
```

{% hint style="warning" %}
This requires the Widget and Stars Script below.
{% endhint %}

#### Stars Rating

<figure><img src="/files/lhwbSTTGplKJMTTPk6vd" alt=""><figcaption></figcaption></figure>

Add the following HTML element where you'd like stars to appear

```html
<div class="yotpo bottomLine">Yotpo Stars</div>
```

{% hint style="warning" %}
This requires the Widget and Stars Script below.
{% endhint %}

### 2. Storefront Product Detail Pages (COMING SOON)

To add the Yotpo widget and stars:

1. **Navigate to a Product Page**
2. **Open the Product Settings Tab**
3. **Place the full script in the “Code” section** for the product detail page
   * This supports both the widget and star rating

#### **Placement Notes**

* The code section renders elements at the bottom of the page.
* To place reviews and stars dynamically within the layout:
  * Use a reserved metafield like `storefront-detail-1`, `storefront-detail-2`, ..., `storefront-detail-9`
  * These will appear as **"Detail (#)"** options in the Page Layout editor

### 3. Yotpo Widget and Stars Script

Place the following script on your Product Detail Page:

{% hint style="warning" %}
Be sure to update the app key. The first line of the script should look like

const yotpoAppKey = 'xxxxxxxxxxxxxxxxxxxxxx'
{% endhint %}

<pre class="language-html"><code class="lang-html"><strong>&#x3C;script>
</strong>  const yotpoAppKey = '{{ APP KEY }}';

  function getProductFromSession() {
    const sessionProductRaw = sessionStorage.getItem("ccProduct");
    if (sessionProductRaw) {
      try {
        return JSON.parse(sessionProductRaw);
      } catch (err) {
        console.warn("Failed to parse ccProduct:", err);
      }
    }
    return null;
  }

  function getProductFromFallback() {
    const currentItem = sessionStorage.getItem("currentItem");
    if (!currentItem || !window.pageData?.selectedCampaign?.products) {
      return null;
    }

    const [campaignProductId] = currentItem.split(".");
    return pageData.selectedCampaign.products.find(
      (p) => p.campaignProductId == campaignProductId
    ) || null;
  }

  function buildYotpoWidget(product) {
    const container = document.getElementById("yotpo-widget-container");
    if (!container || !product) {
      return;
    }

    const currency = window.pageData?.selectedCampaign?.currency || "USD";

    container.innerHTML = "";

    const widget = document.createElement("div");
    widget.className = "yotpo yotpo-main-widget";
    widget.id = "cc-id-dLCT1UskDWeD";
    widget.setAttribute("data-product-id", product.externalProductId);
    widget.setAttribute("data-price", product.variants ? product.variants[0].price : product.price);
    widget.setAttribute("data-currency", currency);
    widget.setAttribute("data-name", product.productName);
    widget.setAttribute("data-url", window.location.href);
    widget.setAttribute("data-image-url", product.imageUrl);

    container.appendChild(widget);

    const reviewStars = document.querySelector(".yotpo.bottomLine");
    if (reviewStars) {
      reviewStars.setAttribute("data-yotpo-product-id", product.externalProductId);
    }
  }

  function loadYotpoScript(appKey) {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.src = `//staticw2.yotpo.com/${appKey}/widget.js`;
    const firstScript = document.getElementsByTagName("script")[0];
    firstScript.parentNode.insertBefore(script, firstScript);
  }

  const immediateProduct = getProductFromSession();
  // Initiate For Storefront
  if (immediateProduct) {
    buildYotpoWidget(immediateProduct);
    loadYotpoScript(yotpoAppKey);
  } else {
    window.onload = function () {
      const fallbackProduct = getProductFromFallback();
      if (!fallbackProduct) {
        return;
      }

      buildYotpoWidget(fallbackProduct);
      loadYotpoScript(yotpoAppKey);
    };
  }
&#x3C;/script>
</code></pre>

### 4. Yotpo Conversion Tracking (optional)

Place the following script on your **Thank You page** or **Upsell confirmation page** to enable conversion tracking:

```html
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const yotpoAppKey = '{{ APP KEY }}';

    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.src = `//staticw2.yotpo.com/${yotpoAppKey}/widget.js`;
    document.head.appendChild(script);

    const orderDataRaw = sessionStorage.getItem("orderData");
    if (orderDataRaw) {
      try {
        const orderData = JSON.parse(orderDataRaw);
        if (orderData?.orderId && orderData?.totalAmount && orderData?.currencyCode) {
          window.yotpoTrackConversionData = {
            orderId: String(orderData.orderId),
            orderAmount: String(orderData.totalAmount),
            orderCurrency: String(orderData.currencyCode)
          };
        }
      } catch (err) {
        console.warn("Invalid orderData in sessionStorage:", err);
      }
    }
  });
</script>
```

{% hint style="warning" %}
Be sure to update the app key. The first line of the script should look like\
const yotpoAppKey = 'xxxxxxxxxxxxxxxxxxxxxx'
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.checkoutchamp.com/crm/plugins/email-service-providers/yotpo/reviews.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.