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. Some things to be aware of:

  • None of the widgets will work without the Initializer Script being present on the page (see below for instructions)
  • All widgets (with a few exceptions) will adapt to the container they are in in terms of width and height.
  • Most of the widgets will inherit the visual styles for fonts/links etc from your site so they should all blend in nicely.

Async widget loading
Normally, Lipscore widgets are loaded using the body onload-event which is a synchronous operation. However, modern web technologies use a high degree of asynchronous loading techniques which may leave Lipscore widgets in an un-initialized state (widgets are not visible). Typical examples are on "endless product pages", when paging product carousels, etc. When this happens widgets needs to be initialized manually and this can be done by triggering the following function:

  • lipscore.initWidgets();
This function will initialize any Lipscore widgets that have not yet been initialized.

"Widgets are slow"
We get this claim a lot, but widget loading is actually incredibly fast. On average, all Lipscore widgets are loaded in less than 30ms per page view but due to the nature of us having to use the body onload-event (which triggers after all other content on the site is loaded) it may appear as if our widgets are casuing issues. We have actually made an explainer video about how Lipscore widget loading works. It's only 3 mins long and will be well worth your time: https://vimeo.com/545927978

Description

Every page that will display content from Lipscore needs to have a piece of HTML/JavaScript code between the two head-tags of your webpage. This code is the same for every page and should not be altered.

Please notice that there are two things you need to change/pay attention to in the following script:
  • Language code in the link to our js-file. Notice in the sample that there is an "/en/" in the url? Available languages are en, no, se, dk, fi, fr, de, br, cz, it, es, pl, nl, ja
  • The API key. This can be found near the top in the Settings General page.
Sample output (the below code by itself does not actually display anything on your website)
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/en/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>

Description Please note: there can only be one instance of this widget per page! Product mappings will get messed up if there are multiple instances of this widget on the same page. This rating widget is the default widget used in product details pages and has two different main layouts and several colors and styles to choose from. This widgets size is fixed.
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-variant-id="[VariantID]"
   data-ls-variant-name="[VariantName]"
   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-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 numbers
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-variant-id="[6268A-128]"
    data-ls-variant-name="[HTC One M8 Gold - 128GB]"
    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-gtin="3234567890126">
</div>

Description Please note: This widget is invisible if there are no ratings for the specified product/service!
This rating widget is most commonly used in “category pages” and lists where multiple products are listed together with limited space available and 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 
<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-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-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 numbers
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-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-gtin="3234567890126">
</span>

Description This widget lists all the reviews you have gotten for a given product and should be placed on the product details page, usually inside a Reviews-tab or something similar. The widget displays 5 reviews at a time with a paging control at the bottom.
Sample output
Code structure 
<div 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-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-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 numbers
Actual code sample 
<div 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-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-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-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-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 numbers
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-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-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-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-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 numbers
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-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-gtin="3234567890126">
</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="[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-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-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 numbers
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-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-gtin="3234567890126">
</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="[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-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-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 numbers
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-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-gtin="3234567890126">
</div>

Description Please note: This widget is still visible even if there are no ratings for the specified product/service! This widget, which is a component of the "Review summary widget" is 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).
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-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-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 numbers
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-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-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 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-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]">
</div>
* = Required
(*) = Not technically required but strongly recomended, Google will not display reviews for products without GTIN
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-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">
</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-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-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
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-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-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-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]">
</span>
* = Required
(*) = Not technically required but strongly recomended, Google will not display reviews for products without GTIN
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-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">
</span>