Widgets

Please Read Lipscore Widgets are the visible part of your Lipscore services and are usually integrated directly on your site. There is an extensible variety of widgets available and they all serve their specific purpose. Please note:

  • Widgets require the Initializer Script on the page (see below).
  • Widgets usually adapt to their container’s width and height.
  • Most widgets inherit your site’s fonts and link styles for visual consistency.

Async Widget Loading Lipscore widgets normally load using the body onload event. With asynchronous page loading (e.g. infinite scroll, product carousels), widgets may not initialize automatically.

You can manually initialize them using:

lipscore.initWidgets();

"Widgets are slow" – Not Really This is a common misconception. On average, Lipscore widgets load in under 30ms per page view.

Because we load widgets after all other page content (via the onload event), they might appear slow.

Watch this short 3–minute explainer:

Description

Include the following script inside the <head> of every page where Lipscore widgets will appear. This code should not be altered.

  • Update the language code (e.g., /en/) in the URL.
  • Use your actual API key from the Settings → General.
Sample Output

(This script alone does not render visible content.)

Code Structure
<script type="text/javascript">
//<![CDATA[
window.lipscoreInit = function() {
  lipscore.init({
    apiKey: "your api key"
  });
};
(function() {
  var scr = document.createElement('script'); scr.async = 1;
  scr.src = "//static.lipscore.com/assets/no/lipscore-v1.js";
  document.getElementsByTagName('head')[0].appendChild(scr);
})();
//]]>
</script>
Actual Code Sample
<script type="text/javascript">
//<![CDATA[
window.lipscoreInit = function() {
  lipscore.init({
    apiKey: "889c3f3e4b6ac67269261324"
  });
};
(function() {
  var scr = document.createElement('script'); scr.async = 1;
  scr.src = "//static.lipscore.com/assets/no/lipscore-v1.js";
  document.getElementsByTagName('head')[0].appendChild(scr);
})();
//]]>
</script>
SPA Support

For Single Page Applications (SPAs), you must reinitialize Lipscore widgets on page view changes.

HTML method: 
<body onload="script(lipscore.reInitWidgets(true));">
JavaScript method: 
document.onload = lipscore.reInitWidgets(true);
// or
window.onload = lipscore.reInitWidgets(true);

Description This rating widget is the default widget used in product details page. Its size is fixed and it comes in a two different main layouts. It is essential that the rating widget is correctly implemented on the product page - without it, several core Lipscore functionalities will not work as expected. For this reason, we highly recommend implementing it on the product page in all cases. If necessary, or if you have custom widgets, you can hide it using CSS.

Please note:Only one instance of this widget is allowed per page! Product mappings will get messed up if there are multiple instances of this widget on the same page. Additionally, a second instance of the rating widget won't be visible on the page.
If you have multiple review list widgets on the same page and want the rating widget to scroll to a specific one, you should set the ID of that review list in the "data-ls-connected-review-list-id" attribute. By default, the review link will scroll to the first review list with id="lipscore-review-list".
Sample output Option 1:
Option 2:
Code structure 
<div id="lipscore-rating"
*  data-ls-product-name="[ProductName]"
*  data-ls-brand="[BrandName]"
*  data-ls-product-id="[ProductID]"
*  data-ls-product-url="[URL_to_product_details_page]"
 data-ls-readonly="true"
 data-ls-variant-id="[VariantID]"
 data-ls-variant-name="[VariantName]"
 data-ls-sku="[ProductSKU]" 
 data-ls-description="[Product_description-used_for_SEO]"
 data-ls-image-url="[URL_to_product_image]"
 data-ls-price="[Selling_price-used_for_SEO]"
 data-ls-price-currency="[Price_currency-used_for_SEO]"
 data-ls-availability="[Items_in_stock-used_for_SEO]"
(*)data-ls-category="[Product_category-used_for_SEO]"
(*)data-ls-mpn="[Product_MPN-used_for_SEO]"
(*)data-ls-gtin="[Product_GTIN-used_for_SEO]"
(*)data-ls-connected-review-list-id="[ReviewListID]">
</div>
* = Required
(*) = Not technically required but strongly recommended for LS functionalities to function properly: Product attributes
functionality won’t work without category data, while Google will not show ratings and reviews in Google Shopping ads
without GTIN or MPN + Brand or SKU + Brand
Actual code sample 
<div id="lipscore-rating"
  data-ls-product-name="HTC One M8 Gold"
  data-ls-brand="HTC"
  data-ls-product-id="6268A"
  data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
  data-ls-readonly="true"
  data-ls-variant-id="6268A-128"
  data-ls-variant-name="HTC One M8 Gold - 128GB"
  data-ls-sku="6268A128"
  data-ls-description="Greatest phone of 2014"
  data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
  data-ls-price="899"
  data-ls-price-currency="USD"
  data-ls-availability="34"
  data-ls-category="Phones-MobilePhones-HTC"
  data-ls-mpn="D65-HJG-908"
  data-ls-gtin="3234567890126"
  data-ls-connected-review-list-id="lipscore-review-list">
</div>

Description This small rating widget is most commonly used on category pages and product listing pages where multiple products are displayed together in a limited space. It offers two display options, which can be selected in the widget settings: one shows a simple Lipscore star with the average product rating next to it, while the other displays five stars without the average rating. The widget automatically adapts to the height of its container and looks good within a height range of 10-50px.

Please note: This widget will be invisible if there are no ratings for the specified product or service. Additionally, it supports multiple instances on the same page.
Sample output Option 1:
Option 2:
Code structure 
<span class="lipscore-rating-small"
*  data-ls-product-name="[ProductName]"
*  data-ls-brand="[BrandName]"
*  data-ls-product-id="[ProductID]"
*  data-ls-product-url="[URL_to_product_details_page]"
 data-ls-variant-id="[VariantID]"
 data-ls-variant-name="[VariantName]"
 data-ls-sku="[ProductSKU]"
 data-ls-description="[Product_description-used_for_SEO]"
 data-ls-image-url="[URL_to_product_image]"
 data-ls-price="[Selling_price-used_for_SEO]"
 data-ls-price-currency="[Price_currency-used_for_SEO]"
 data-ls-availability="[Items_in_stock-used_for_SEO]"
(*)data-ls-category="[Product_category-used_for_SEO]"
(*)data-ls-mpn="[Product_MPN-used_for_SEO]"
(*)data-ls-gtin="[Product_GTIN-used_for_SEO]">
</span>
* = Required
(*) = Not technically required but strongly recommended for LS functionalities to function properly: Product attributes
functionality won’t work without category data, while Google will not show ratings and reviews in Google Shopping ads
without GTIN or MPN + Brand or SKU + Brand
Actual code sample 
<span class="lipscore-rating-small"
  data-ls-product-name="HTC One M8 Gold"
  data-ls-brand="HTC"
  data-ls-product-id="6268A"
  data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
  data-ls-variant-id="6268A-128"
  data-ls-variant-name="HTC One M8 Gold - 128GB"
  data-ls-sku="6268A128"
  data-ls-description="Greatest phone of 2014"
  data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
  data-ls-price="899"
  data-ls-price-currency="USD"
  data-ls-availability="34"
  data-ls-category="Phones-MobilePhones-HTC"
  data-ls-mpn="D65-HJG-908"
  data-ls-gtin="3234567890126">
</span>

Description The review list widget displays all reviews received for a specific product and should be placed on the product details page, usually inside a "Reviews" tab or similar section. By default, it includes a ratings and reviews summary, filtering options, and shows five reviews at a time with pagination controls at the bottom. It can also be extended with additional product and customer attributes. Additionally, this widget generates structured data, which is essential for stars visibility in Google organic search results. For this reason, we highly recommend implementing it on the product page in all cases. If necessary, or if you have custom widgets, you can hide it using CSS.

Please note:By default, the attribute distribution widget is not included in the review list widget, as it is an additional feature provided by Lipscore.
If you need multiple instances of this widget on the same page, you must assign unique IDs to each review list. To have the rating widget scroll to a specific review list, add the "data-ls-connected-review-list-id" attribute to the rating widget, using the ID of the corresponding review list. Additionally, if the widget is hidden in the tab or modal, auto scrolling from review link won't work correctly. In this case, you should add additional script to the review link that will open the tab and scroll to the review list widget.
Sample output
Code structure 
<div class="lipscore-review-list"
 id="lipscore-review-list"
*  data-ls-product-name="[ProductName]"
*  data-ls-brand="[BrandName]"
*  data-ls-product-id="[ProductID]"
*  data-ls-product-url="[URL_to_product_details_page]"
 data-ls-variant-id="[VariantID]"
 data-ls-variant-name="[VariantName]"
 data-ls-sku="[ProductSKU]" 
 data-ls-description="[Product_description-used_for_SEO]"
 data-ls-image-url="[URL_to_product_image]"
 data-ls-price="[Selling_price-used_for_SEO]"
 data-ls-price-currency="[Price_currency-used_for_SEO]"
 data-ls-availability="[Items_in_stock-used_for_SEO]"
(*)data-ls-category="[Product_category-used_for_SEO]"
(*)data-ls-mpn="[Product_MPN-used_for_SEO]"
(*)data-ls-gtin="[Product_GTIN-used_for_SEO]"
 data-ls-page-size="[Number_of_reviews_that_are_displayed_per_page]">
</div>
* = Required
(*) = Not technically required but strongly recommended for LS functionalities to function properly: Product attributes
functionality won’t work without category data, while Google will not show ratings and reviews in Google Shopping ads
without GTIN or MPN + Brand or SKU + Brand
Actual code sample 
<div class="lipscore-review-list"
  id="lipscore-review-list"
  data-ls-product-name="HTC One M8 Gold"
  data-ls-brand="HTC"
  data-ls-product-id="6268A"
  data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
  data-ls-variant-id="6268A-128"
  data-ls-variant-name="HTC One M8 Gold - 128GB"
  data-ls-sku="6268A128"
  data-ls-description="Greatest phone of 2014"
  data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
  data-ls-price="899"
  data-ls-price-currency="USD"
  data-ls-availability="34"
  data-ls-category="Phones-MobilePhones-HTC"
  data-ls-mpn="D65-HJG-908"
  data-ls-gtin="3234567890126"
  data-ls-page-size="5">
</div>

Description This widget displays the number of reviews for a given product, without any attributes or styling whatsoever. It's a plain number and most commonly used in a "Reviews" tab indicating the number of reviews of a product before the customer clicks the tab to read the actual reviews
Sample output 21
Code structure 
<span class="lipscore-review-count"
*  data-ls-product-name="[ProductName]"
*  data-ls-brand="[BrandName]"
*  data-ls-product-id="[ProductID]"
*  data-ls-product-url="[URL_to_product_details_page]"
 data-ls-variant-id="[VariantID]"
 data-ls-variant-name="[VariantName]"
 data-ls-sku="[ProductSKU]" 
 data-ls-description="[Product_description-used_for_SEO]"
 data-ls-image-url="[URL_to_product_image]"
 data-ls-price="[Selling_price-used_for_SEO]"
 data-ls-price-currency="[Price_currency-used_for_SEO]"
 data-ls-availability="[Items_in_stock-used_for_SEO]"
(*)data-ls-category="[Product_category-used_for_SEO]"
(*)data-ls-mpn="[Product_MPN-used_for_SEO]"
(*)data-ls-gtin="[Product_GTIN-used_for_SEO]">
</span>
* = Required
(*) = Not technically required but strongly recommended for LS functionalities to function properly: Product attributes
functionality won’t work without category data, while Google will not show ratings and reviews in Google Shopping ads
without GTIN or MPN + Brand or SKU + Brand
Actual code sample 
<span class="lipscore-review-count"
  data-ls-product-name="HTC One M8 Gold"
  data-ls-brand="HTC"
  data-ls-product-id="6268A"
  data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
  data-ls-variant-id="6268A-128"
  data-ls-variant-name="HTC One M8 Gold - 128GB"
  data-ls-sku="6268A128"
  data-ls-description="Greatest phone of 2014"
  data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
  data-ls-price="899"
  data-ls-price-currency="USD"
  data-ls-availability="34"
  data-ls-category="Phones-MobilePhones-HTC"
  data-ls-mpn="D65-HJG-908"
  data-ls-gtin="3234567890126">
</span>

Description The testimonial widget displays product reviews that has been marked as testimonials, either manually in the Reviews page in the backend, or by automatically marking all 5 star reviews as testimonials. The widget will display one single random review from the 10 latest reviews marked as testimonials for the given product.
Sample output
Code structure 
<div class="lipscore-testimonial"
*  data-ls-product-name="[ProductName]"
*  data-ls-brand="[BrandName]"
*  data-ls-product-id="[ProductID]"
*  data-ls-product-url="[URL_to_product_details_page]"
 data-ls-variant-id="[VariantID]"
 data-ls-variant-name="[VariantName]"
 data-ls-sku="[ProductSKU]"
 data-ls-description="[Product_description-used_for_SEO]"
 data-ls-image-url="[URL_to_product_image]"
 data-ls-price="[Selling_price-used_for_SEO]"
 data-ls-price-currency="[Price_currency-used_for_SEO]"
 data-ls-availability="[Items_in_stock-used_for_SEO]"
(*)data-ls-category="[Product_category-used_for_SEO]"
(*)data-ls-mpn="[Product_MPN-used_for_SEO]"
(*)data-ls-gtin="[Product_GTIN-used_for_SEO]">
</div>
* = Required
(*) = Not technically required but strongly recommended for LS functionalities to function properly: Product attributes
functionality won’t work without category data, while Google will not show ratings and reviews in Google Shopping ads
without GTIN or MPN + Brand or SKU + Brand
Actual code sample 
<div class="lipscore-testimonial"
  data-ls-product-name="HTC One M8 Gold"
  data-ls-brand="HTC"
  data-ls-product-id="6268A"
  data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
  data-ls-variant-id="6268A-128"
  data-ls-variant-name="HTC One M8 Gold - 128GB"
  data-ls-sku="6268A128"
  data-ls-description="Greatest phone of 2014"
  data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
  data-ls-price="899"
  data-ls-price-currency="USD"
  data-ls-availability="34"
  data-ls-category="Phones-MobilePhones-HTC"
  data-ls-mpn="D65-HJG-908"
  data-ls-gtin="3234567890126">
</div>

Description This review summary widget is part of the “Review List widget” placed on the top of the list (enable/disable in review list widget settings), but it can also be used as a standalone widget. It is a combination of the widgets “Rating distribution”, “Big rating” and “Attribute distribution”.
Please note:By default, the attribute distribution widget is not included in the review summary widget, as it is an additional feature provided by Lipscore.
Sample output
Code structure 
<div class="lipscore-review-summary"
  *  data-ls-product-name="[ProductName]"
  *  data-ls-brand="[BrandName]"
  *  data-ls-product-id="[ProductID]"
  *  data-ls-product-url="[URL_to_product_details_page]"
   data-ls-variant-id="[VariantID]"
   data-ls-variant-name="[VariantName]"
   data-ls-sku="[ProductSKU]"
   data-ls-description="[Product_description-used_for_SEO]"
   data-ls-image-url="[URL_to_product_image]"
   data-ls-price="[Selling_price-used_for_SEO]"
   data-ls-price-currency="[Price_currency-used_for_SEO]"
   data-ls-availability="[Items_in_stock-used_for_SEO]"
  (*)data-ls-category="[Product_category-used_for_SEO]"
  (*)data-ls-mpn="[Product_MPN-used_for_SEO]"
  (*)data-ls-gtin="[Product_GTIN-used_for_SEO]">
  </div>
  * = Required
  (*) = Not technically required but strongly recommended for LS functionalities to function properly: Product attributes
functionality won’t work without category data, while Google will not show ratings and reviews in Google Shopping ads
without GTIN or MPN + Brand or SKU + Brand
Actual code sample 
<div class="lipscore-review-summary"
    data-ls-product-name="HTC One M8 Gold"
    data-ls-brand="HTC"
    data-ls-product-id="6268A"
    data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
    data-ls-variant-id="6268A-128"
    data-ls-variant-name="HTC One M8 Gold - 128GB"
    data-ls-sku="6268A128"
    data-ls-description="Greatest phone of 2014"
    data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
    data-ls-price="899"
    data-ls-price-currency="USD"
    data-ls-availability="34"
    data-ls-category="Phones-MobilePhones-HTC"
    data-ls-mpn="D65-HJG-908"
    data-ls-gtin="3234567890126">
  </div>

Description This rating distribution widget, which is a component of the "Review summary widget" is most commonly used in “product pages” where it effectively presents a visual representation of rating distribution. Its dimensions are determined by font and button sizes, which can be easily customized through the Theme Settings (CSS).

Please note: Implemented apart from the "Review summary widget", it may not be connected to the review list widget, and the filtering functionality may not work correctly. Additionally, this widget is still visible even if there are no ratings for the specified product/service!
Sample output
Code structure 
<div class="lipscore-rating-distribution"
*  data-ls-product-name="[ProductName]"
*  data-ls-brand="[BrandName]"
*  data-ls-product-id="[ProductID]"
*  data-ls-product-url="[URL_to_product_details_page]"
 data-ls-variant-id="[VariantID]"
 data-ls-variant-name="[VariantName]"
 data-ls-sku="[ProductSKU]"
 data-ls-description="[Product_description-used_for_SEO]"
 data-ls-image-url="[URL_to_product_image]"
 data-ls-price="[Selling_price-used_for_SEO]"
 data-ls-price-currency="[Price_currency-used_for_SEO]"
 data-ls-availability="[Items_in_stock-used_for_SEO]"
(*)data-ls-category="[Product_category-used_for_SEO]"
(*)data-ls-mpn="[Product_MPN-used_for_SEO]"
(*)data-ls-gtin="[Product_GTIN-used_for_SEO]"
 data-ls-readonly="true">
</div>
* = Required
(*) = Not technically required but strongly recommended for LS functionalities to function properly: Product attributes
functionality won’t work without category data, while Google will not show ratings and reviews in Google Shopping ads
without GTIN or MPN + Brand or SKU + Brand
Actual code sample 
<div class="lipscore-rating-distribution"
  data-ls-product-name="HTC One M8 Gold"
  data-ls-brand="HTC"
  data-ls-product-id="6268A"
  data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
  data-ls-variant-id="6268A-128"
  data-ls-variant-name="HTC One M8 Gold - 128GB"
  data-ls-sku="6268A128"
  data-ls-description="Greatest phone of 2014"
  data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
  data-ls-price="899"
  data-ls-price-currency="USD"
  data-ls-availability="34"
  data-ls-category="Phones-MobilePhones-HTC"
  data-ls-mpn="D65-HJG-908"
  data-ls-gtin="3234567890126">
</div>

Description This big rating widget, which is a component of the "Review summary widget" is most commonly used in “product pages” where it effectively presents a large visual representation of a product's rating. Its dimensions are determined by font and star sizes, which can be easily customized through the Theme Settings (CSS).

Please note: This widget is still visible even if there are no ratings for the specified product/service!
Sample output
Code structure 
<div class="lipscore-rating-big"
*  data-ls-product-name="[ProductName]"
*  data-ls-brand="[BrandName]"
*  data-ls-product-id="[ProductID]"
*  data-ls-product-url="[URL_to_product_details_page]"
 data-ls-variant-id="[VariantID]"
 data-ls-variant-name="[VariantName]"
 data-ls-sku="[ProductSKU]"
 data-ls-description="[Product_description-used_for_SEO]"
 data-ls-image-url="[URL_to_product_image]"
 data-ls-price="[Selling_price-used_for_SEO]"
 data-ls-price-currency="[Price_currency-used_for_SEO]"
 data-ls-availability="[Items_in_stock-used_for_SEO]"
(*)data-ls-category="[Product_category-used_for_SEO]"
(*)data-ls-mpn="[Product_MPN-used_for_SEO]"
(*)data-ls-gtin="[Product_GTIN-used_for_SEO]"
 data-ls-readonly="true">
</div>
* = Required
(*) = Not technically required but strongly recommended for LS functionalities to function properly: Product attributes
functionality won’t work without category data, while Google will not show ratings and reviews in Google Shopping ads
without GTIN or MPN + Brand or SKU + Brand
Actual code sample 
<div class="lipscore-rating-big"
  data-ls-product-name="HTC One M8 Gold"
  data-ls-brand="HTC"
  data-ls-product-id="6268A"
  data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
  data-ls-variant-id="6268A-128"
  data-ls-variant-name="HTC One M8 Gold - 128GB"
  data-ls-sku="6268A128"
  data-ls-description="Greatest phone of 2014"
  data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
  data-ls-price="899"
  data-ls-price-currency="USD"
  data-ls-availability="34"
  data-ls-category="Phones-MobilePhones-HTC"
  data-ls-mpn="D65-HJG-908"
  data-ls-gtin="3234567890126">
</div>

Description This widget is an additional feature provided by Lipscore. When active, it becomes a component of the "Review summary widget" and most commonly used in “product pages” to illustrate a product's attributes on a weighted scale influenced by customer reviews. Its dimensions are determined by font and button sizes, which can be easily customized through the Theme Settings (CSS).

Please note: This widget is still visible even if there are no ratings for the specified product/service! Additionally, it is assigned per category in Lipscore account, so the correct category data in other widgets is essential for this widget to function properly.
Sample output
Code structure 
<div class="lipscore-attributes-distribution"
*  data-ls-product-name="[ProductName]"
*  data-ls-brand="[BrandName]"
*  data-ls-product-id="[ProductID]"
*  data-ls-product-url="[URL_to_product_details_page]"
 data-ls-variant-id="[VariantID]"
 data-ls-variant-name="[VariantName]"
 data-ls-sku="[ProductSKU]"
 data-ls-description="[Product_description-used_for_SEO]"
 data-ls-image-url="[URL_to_product_image]"
 data-ls-price="[Selling_price-used_for_SEO]"
 data-ls-price-currency="[Price_currency-used_for_SEO]"
 data-ls-availability="[Items_in_stock-used_for_SEO]"
(*)data-ls-category="[Product_category-used_for_SEO]"
(*)data-ls-mpn="[Product_MPN-used_for_SEO]"
(*)data-ls-gtin="[Product_GTIN-used_for_SEO]"
 data-ls-readonly="true">
</div>
* = Required
(*) = Not technically required but strongly recommended for LS functionalities to function properly: Product attributes
functionality won’t work without category data, while Google will not show ratings and reviews in Google Shopping ads
without GTIN or MPN + Brand or SKU + Brand
Actual code sample 
<div class="lipscore-attributes-distribution"
  data-ls-product-name="HTC One M8 Gold"
  data-ls-brand="HTC"
  data-ls-product-id="6268A"
  data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
  data-ls-variant-id="6268A-128"
  data-ls-variant-name="HTC One M8 Gold - 128GB"
  data-ls-sku="6268A128"
  data-ls-description="Greatest phone of 2014"
  data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
  data-ls-price="899"
  data-ls-price-currency="USD"
  data-ls-availability="34"
  data-ls-category="Phones-MobilePhones-HTC"
  data-ls-mpn="D65-HJG-908"
  data-ls-gtin="3234567890126">
</div>

Description This widget lists all the service reviews you have. The widget displays 5 reviews at a time with a paging control at the bottom (change the data-ls-page-size attribute to have more reviews per page).
Sample output
Code structure 
<div id="lipscore-service-review-list"></div>
Actual code sample 
<div id="lipscore-service-review-list"></div>

Description The service reviews badge displays the average rating your business / service has recieved and when the badge is clicked a modal window opens where all the service reviews are displayed.
Sample output
When the badge is clicked the following modal window opens:
Code structure 
<div class="lipscore-service-review-badge-starred"
    data-ls-widget-height="[Widget height in px|%]"
    data-ls-widget-width="[Widget width in px|%]">
</div>
Actual code sample 
<div class="lipscore-service-review-badge-starred"
    data-ls-widget-height="100px"
    data-ls-widget-width="100px">
</div>

Description The small service reviews badge short displays the average rating your business / service has recieved and when the badge is clicked a modal window opens where all the service reviews are displayed.
Sample output

1. All borders

Default

2. Separator border only

Need to specify lipscore-no-border modifier class

3. No borders

Need to specify lipscore-no-border and lipscore-no-separator modifier classes



When the badge is clicked the following modal window opens:
Code structure 
<div class="lipscore-service-review-badge-small-short [lipscore-no-border, lipscore-no-separator]"
    data-ls-widget-height="[Widget height in px|%]"
    data-ls-widget-width="[Widget width in px|%]">
</div>
Actual code sample #1 
<div class="lipscore-service-review-badge-small-short"
    data-ls-widget-height="45px"
    data-ls-widget-width="300px">
</div>
Actual code sample #2 
<div class="lipscore-service-review-badge-small-short lipscore-no-border"
    data-ls-widget-height="45px"
    data-ls-widget-width="300px">
</div>
Actual code sample #3 
<div class="lipscore-service-review-badge-small-short lipscore-no-border lipscore-no-separator"
    data-ls-widget-height="45px"
    data-ls-widget-width="300px">
</div>

Description The small service reviews badge long displays the average rating your business / service has recieved and when the badge is clicked a modal window opens where all the service reviews are displayed.
Sample output

1. All borders

Default

2. Separator border only

Need to specify lipscore-no-border modifier class

3. No borders

Need to specify lipscore-no-border and lipscore-no-separator modifier classes



When the badge is clicked the following modal window opens:
Code structure 
<div class="lipscore-service-review-badge-small-long"
    data-ls-widget-height="[Widget height in px|%]"
    data-ls-widget-width="[Widget width in px|%]">
</div>
Actual code sample #1 
<div class="lipscore-service-review-badge-small-long"
    data-ls-widget-height="35px"
    data-ls-widget-width="350px">
</div>
Actual code sample #2 
<div class="lipscore-service-review-badge-small-long lipscore-no-border"
    data-ls-widget-height="35px"
    data-ls-widget-width="350px">
</div>
Actual code sample #3 
<div class="lipscore-service-review-badge-small-long lipscore-no-border lipscore-no-separator"
    data-ls-widget-height="35px"
    data-ls-widget-width="350px">
</div>

Description The sticky service reviews badge displays the average rating your business / service has recieved and when the badge is clicked a modal window opens where all the service reviews are displayed.
Sample output It appears on the right side of the screen:


On mobile it appears on the bottom of the screen:


When the badge is clicked the following sliding panel opens:
Actual code sample 
<div id="lipscore-service-review-badge-sticky" class="lipscore-service-review-badge-sticky"></div>

Description The testimonial banner displays service reviews that has been marked as testimonials, either manually in the Reviews page in the backend, or by automatically marking all 5 star reviews as testimonials. The widget will display and rotate 4 of the latest 10 reviews marked as testimonials for the given product.
Sample output
Modal:
Code structure 
<div class="lipscore-service-review-testimonial"
    data-ls-widget-height="[Widget height in px|%]"
    data-ls-widget-width="[Widget width in px|%]">
</div>
Actual code sample 
<div class="lipscore-service-review-testimonial"
    data-ls-widget-height="150px"
    data-ls-widget-width="100%">
</div>

Description The testimonial widget displays service reviews that has been marked as testimonials, either manually in the Reviews page in the backend, or by automatically marking all 5 star reviews as testimonials.
Sample output
Code structure 
<div class="lipscore-testimonial"
*  data-ls-product-name="Service reviews"
*  data-ls-product-id="service_review"
*  data-ls-product-url="[URL_to_your_site]">
</div>
* = Required
(*) = Not technically required but strongly recomended, Google will not display reviews for products without GTIN
Actual code sample 
<div class="lipscore-testimonial"
    data-ls-product-name="Service reviews"
    data-ls-product-id="service_review"
    data-ls-product-url="http://mysite.com">
</div>

Description Please note: This widget is still visible even if there are no ratings for the specified product/service! This rating widget, which is a component of the "Review summary widget" is most commonly used in “product pages” where it effectively presents a visual representation of rating distribution. Its dimensions are determined by font and button sizes, which can be easily customized through the Theme Settings (CSS).
Sample output
Code structure 
<div class="lipscore-rating-distribution"
*  data-ls-product-name="Service reviews"
*  data-ls-product-id="service_review"
*  data-ls-product-url="http://mysite.com">
</div>
* = Required
Actual code sample 
<div class="lipscore-rating-distribution"
    data-ls-product-name="Service reviews"
    data-ls-product-id="service_review"
    data-ls-product-url="http://mysite.com">
</div>

Description Please note: This widget is still visible even if there are no ratings for the specified product/service! This rating widget, which is a component of the "Review summary widget" is most commonly used in “product pages” where it effectively presents a large visual representation of a product's rating. Its dimensions are determined by font and button sizes, which can be easily customized through the Theme Settings (CSS).
Sample output
Code structure 
<div class="lipscore-rating-big"
*  data-ls-product-name="Service reviews"
*  data-ls-product-id="service_review"
*  data-ls-product-url="http://mysite.com">
</div>
* = Required
Actual code sample 
<div class="lipscore-rating-big"
    data-ls-product-name="Service reviews"
    data-ls-product-id="service_review"
    data-ls-product-url="http://mysite.com">
</div>

Description
These widgets will display ratings and reviews based on the values of the SourceID and ParentSourceID from the Invitations. A SourceID is typically the ID of a physical store or an office for example, while the ParentSourceID typically refers to an Area or Region. If no source/parent source is provided an aggregate of all service reviews will be displayed. 
If a ParentSourceID is provided, any values in the SourceID will be ignored. Both parameters support multiple values (separated by semicolon) and the widget will display an aggregate of the provided sources. 

Description This widget lists all the service reviews you have. The widget displays 5 reviews at a time with a paging control at the bottom (change the data-ls-page-size attribute to have more reviews per page).
Sample output
Code structure 
<div id="lipscore-service-review-list"
    data-ls-source-id="[Id of the purchase source]"
    data-ls-parent-source-id="[Id of the purchase parent source]">
</div>
Actual code sample 
<div id="lipscore-service-review-list"
    data-ls-source-id="store_22"
    data-ls-parent-source-id="oslo_region">
</div>

Description Please note: This widget is invisible if there are no ratings for the specified source!
This rating widget is most commonly used on a store/office overview. It comes in two different varieties that can be chosen in the settings in your Lipscore Dashboard. One will display a simple Lipscore star with the average rating of the product next to it, and the other version displays 5 stars with an indication of the average rating. The widget adapts to the height of the container it is in and it will look good in heights ranging from 10-50px.
Sample output Option 1:
Option 2:
Code structure 
<div class="lipscore-service-rating-small"
    data-ls-source-id="[Id of the purchase source]"
    data-ls-parent-source-id="[Id of the purchase parent source]">
</div>
Actual code sample 
<div class="lipscore-service-rating-small"
    data-ls-source-id="store_22"
    data-ls-parent-source-id="oslo_region">
</div>

Description The service reviews badge displays the average rating your business / service has recieved and when the badge is clicked a modal window opens where all the service reviews are displayed.
Sample output
When the badge is clicked the following modal window opens:
Code structure 
<div class="lipscore-service-review-badge-starred"
    data-ls-widget-height="[Widget height in px|%]"
    data-ls-widget-width="[Widget width in px|%]"
    data-ls-source-id="[Id of the purchase source]"
    data-ls-parent-source-id="[Id of the purchase parent source]">
</div>
Actual code sample 
<div class="lipscore-service-review-badge-starred"
    data-ls-widget-height="100px"
    data-ls-widget-width="100px"
    data-ls-source-id="store_22"
    data-ls-parent-source-id="oslo_region">
</div>

Description The small service reviews badge short displays the average rating your business / service has recieved and when the badge is clicked a modal window opens where all the service reviews are displayed.
Sample output

1. All borders

Default

2. Separator border only

Need to specify lipscore-no-border modifier class

3. No borders

Need to specify lipscore-no-border and lipscore-no-separator modifier classes



When the badge is clicked the following modal window opens:
Code structure 
<div class="lipscore-service-review-badge-small-short [lipscore-no-border, lipscore-no-separator]"
    data-ls-widget-height="[Widget height in px|%]"
    data-ls-widget-width="[Widget width in px|%]"
    data-ls-source-id="[Id of the purchase source]"
    data-ls-parent-source-id="[Id of the purchase parent source]">
</div>
Actual code sample #1 
<div class="lipscore-service-review-badge-small-short"
    data-ls-widget-height="45px"
    data-ls-widget-width="300px"
    data-ls-source-id="store_22"
    data-ls-parent-source-id="oslo_region">
</div>
Actual code sample #2 
<div class="lipscore-service-review-badge-small-short lipscore-no-border"
    data-ls-widget-height="45px"
    data-ls-widget-width="300px"
    data-ls-source-id="store_22"
    data-ls-parent-source-id="oslo_region">
</div>
Actual code sample #3 
<div class="lipscore-service-review-badge-small-short lipscore-no-border lipscore-no-separator"
    data-ls-widget-height="45px"
    data-ls-widget-width="300px"
    data-ls-source-id="store_22"
    data-ls-parent-source-id="oslo_region">
</div>

Description The small service reviews badge long displays the average rating your business / service has recieved and when the badge is clicked a modal window opens where all the service reviews are displayed.
Sample output

1. All borders

Default

2. Separator border only

Need to specify lipscore-no-border modifier class

3. No borders

Need to specify lipscore-no-border and lipscore-no-separator modifier classes



When the badge is clicked the following modal window opens:
Code structure 
<div class="lipscore-service-review-badge-small-long"
    data-ls-widget-height="[Widget height in px|%]"
    data-ls-widget-width="[Widget width in px|%]"
    data-ls-source-id="[Id of the purchase source]"
    data-ls-parent-source-id="[Id of the purchase parent source]">
</div>
Actual code sample #1 
<div class="lipscore-service-review-badge-small-long"
    data-ls-widget-height="35px"
    data-ls-widget-width="350px"
    data-ls-source-id="store_22"
    data-ls-parent-source-id="oslo_region">
</div>
Actual code sample #2 
<div class="lipscore-service-review-badge-small-long lipscore-no-border"
    data-ls-widget-height="35px"
    data-ls-widget-width="350px"
    data-ls-source-id="store_22"
    data-ls-parent-source-id="oslo_region">
</div>
Actual code sample #3 
<div class="lipscore-service-review-badge-small-long lipscore-no-border lipscore-no-separator"
    data-ls-widget-height="35px"
    data-ls-widget-width="350px"
    data-ls-source-id="store_22"
    data-ls-parent-source-id="oslo_region">
</div>

Description The testimonial banner displays service reviews that has been marked as testimonials, either manually in the Reviews page in the backend, or by automatically marking all 5 star reviews as testimonials. The widget will display and rotate 4 of the latest 10 reviews marked as testimonials for the given product.
Sample output
Modal:
Code structure 
<div class="lipscore-service-review-testimonial"
    data-ls-widget-height="[Widget height in px|%]"
    data-ls-widget-width="[Widget width in px|%]"
    data-ls-source-id="[Id of the purchase source]"
    data-ls-parent-source-id="[Id of the purchase parent source]">
</div>
Actual code sample 
<div class="lipscore-service-review-testimonial"
    data-ls-widget-height="150px"
    data-ls-widget-width="100%"
    data-ls-source-id="store_22"
    data-ls-parent-source-id="oslo_region">
</div>

Description The testimonial widget displays service reviews that has been marked as testimonials, either manually in the Reviews page in the backend, or by automatically marking all 5 star reviews as testimonials.
Sample output
Code structure 
<div class="lipscore-testimonial"
*  data-ls-product-name="Service reviews"
*  data-ls-product-id="service_review"
*  data-ls-product-url="[URL_to_your_site]"
   data-ls-source-id="[Id of the purchase source]"
   data-ls-parent-source-id="[Id of the purchase parent source]">
</div>
* = Required
(*) = Not technically required but strongly recomended, Google will not display reviews for products without GTIN
Actual code sample 
<div class="lipscore-testimonial"
    data-ls-product-name="Service reviews"
    data-ls-product-id="service_review"
    data-ls-product-url="http://mysite.com"
    data-ls-source-id="store_22"
    data-ls-parent-source-id="oslo_region">
</div>

Description This is the form where users writes their question of the product. Users must log in using one of the social logins before being allowed to submit the question.
Sample output

Collapsed:


Expanded (expands automatically by clicking inside the text box):


Logged in:
Code structure 
<div id="lipscore-question-post"
*  data-ls-product-name="[ProductName]"
*  data-ls-brand="[BrandName]"
*  data-ls-product-id="[ProductID]"
*  data-ls-product-url="[URL_to_product_details_page]"
   data-ls-variant-id="[VariantID]"
   data-ls-variant-name="[VariantName]"
   data-ls-sku="[ProductSKU]"
   data-ls-description="Product_description-used_for_SEO"
   data-ls-image-url="[URL_to_product_image]"
   data-ls-price="[Selling_price-used_for_SEO]"
   data-ls-price-currency="[Price_currency-used_for_SEO]"
   data-ls-availability="[Items_in_stock-used_for_SEO]"
(*)data-ls-mpn="[Product_MPN-used_for_SEO]"
(*)data-ls-gtin="[Product_GTIN-used_for_SEO]"
   data-ls-category="[Product_category-used_for_SEO]">
</div>
* = Required
(*) = Not technically required but strongly recomended, Google will not display reviews for products without GTIN or MPN + Brand
Actual code sample 
<div id="lipscore-question-post"
    data-ls-product-name="HTC One M8 Gold"
    data-ls-brand="HTC"
    data-ls-product-id="6268A"
    data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
    data-ls-variant-id="6268A-128"
    data-ls-variant-name="HTC One M8 Gold - 128GB"
    data-ls-sku="6268A128"
    data-ls-description="Greatest phone of 2014"
    data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
    data-ls-price="899"
    data-ls-price-currency="USD"
    data-ls-availability="34"
    data-ls-mpn="D65-HJG-908"
    data-ls-gtin="3234567890126"
    data-ls-category="Phones-MobilePhones-HTC">
</div>

Description This widget lists all the questions you have gotten for a given product and should be placed on the product details page, usually inside a Questions-tab or something similar. The widget displays 5 questions at a time with a paging control at the bottom.
Sample output
Code structure 
<div id="lipscore-question-list"
*  data-ls-product-name="[ProductName]"
*  data-ls-brand="[BrandName]"
*  data-ls-product-id="[ProductID]"
*  data-ls-product-url="[URL_to_product_details_page]"
   data-ls-variant-id="[VariantID]"
   data-ls-variant-name="[VariantName]"
   data-ls-sku="[ProductSKU]"
   data-ls-description="Product_description-used_for_SEO"
   data-ls-image-url="[URL_to_product_image]"
   data-ls-price="[Selling_price-used_for_SEO]"
   data-ls-price-currency="[Price_currency-used_for_SEO]"
   data-ls-availability="[Items_in_stock-used_for_SEO]"
   data-ls-category="[Product_category-used_for_SEO]"
(*)data-ls-mpn="[Product_MPN-used_for_SEO]"
(*)data-ls-gtin="[Product_GTIN-used_for_SEO]"
   data-ls-page-size="[Number_of_questions_that_are_displayed_per_page]">
</div>
* = Required
(*) = Not technically required but strongly recomended, Google will not display reviews for products without GTIN or MPN + Brand
Actual code sample 
<div id="lipscore-question-list"
    data-ls-product-name="HTC One M8 Gold"
    data-ls-brand="HTC"
    data-ls-product-id="6268A"
    data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
    data-ls-variant-id="6268A-128"
    data-ls-variant-name="HTC One M8 Gold - 128GB"
    data-ls-sku="6268A128"
    data-ls-description="Greatest phone of 2014"
    data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
    data-ls-price="899"
    data-ls-price-currency="USD"
    data-ls-availability="34"
    data-ls-category="Phones-MobilePhones-HTC"
    data-ls-mpn="D65-HJG-908"
    data-ls-gtin="3234567890126"
    data-ls-page-size="5">
</div>

Description This widget displays the number of questions for a given product, without any attributes or styling whatsoever. It's a plain number and most commonly used in a Questions-tab indicating the number of questions of a product before the customer clicks the tab to read the actual questions
Sample output 21
Code structure 
<span class="lipscore-question-count"
*  data-ls-product-name="[ProductName]"
*  data-ls-brand="[BrandName]"
*  data-ls-product-id="[ProductID]"
*  data-ls-product-url="[URL_to_product_details_page]"
   data-ls-variant-id="[VariantID]"
   data-ls-variant-name="[VariantName]"
   data-ls-sku="[ProductSKU]"
   data-ls-description="Product_description-used_for_SEO"
   data-ls-image-url="[URL_to_product_image]"
   data-ls-price="[Selling_price-used_for_SEO]"
   data-ls-price-currency="[Price_currency-used_for_SEO]"
   data-ls-availability="[Items_in_stock-used_for_SEO]"
(*)data-ls-mpn="[Product_MPN-used_for_SEO]"
(*)data-ls-gtin="[Product_GTIN-used_for_SEO]"
   data-ls-category="[Product_category-used_for_SEO]">
</span>
* = Required
(*) = Not technically required but strongly recomended, Google will not display reviews for products without GTIN or MPN + Brand
Actual code sample 
<span class="lipscore-question-count"
    data-ls-product-name="HTC One M8 Gold"
    data-ls-brand="HTC"
    data-ls-product-id="6268A"
    data-ls-product-url="http://mysite.com/products/htc-m8/6268A"
    data-ls-variant-id="6268A-128"
    data-ls-variant-name="HTC One M8 Gold - 128GB"
    data-ls-sku="6268A128"
    data-ls-description="Greatest phone of 2014"
    data-ls-image-url="http://mysite.com/assets/htc-m8_6268A.png"
    data-ls-price="899"
    data-ls-price-currency="USD"
    data-ls-availability="34"
    data-ls-mpn="D65-HJG-908"
    data-ls-gtin="3234567890126"
    data-ls-category="Phones-MobilePhones-HTC">
</span>