Widgets

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.

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
  • 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>                                

The add invitations-widget (also known as the purchase widget) is a critical element in order to get ratings and reviews, and what it does is to trigger an invitation (usually by email) to your customers a number of days after a purchase/event asking them to rate and review the product/service. Adding these invitations is essential to getting any response regardless of what type of feedback you are looking for.

Please note; if you have integrated with one of our apps (i.e. the Magento app) the Invitation Widget is not necessary.

Description This widget is invisible for the customers and could be placed on the “thank you”-page after a purchase, a confirmation page after a signup, etc. It inserts the information provided in to the Lipscore backend where we will trigger the invitation after a configurable number of days. Some things to be aware of:
  • If you want to map several products with the same invitation you need one full code block for each item
  • Customers will only get an invitation for the same product/service once (within 60 days)
  • The properties in the Code Structure that are marked with an asterisk ( * ) are mandatory
Sample output (the below code by itself does not actually display anything on your website)
Code structure
<div class="lipscore-purchase" 
*   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-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-email="[Email_address_of_customer]"
**  data-ls-phone="[Mobile_phone_number_of_customer]"
*   data-ls-name="[Full_name_of_customer]"
    data-ls-internal-order-id="Order_internal_ID_in_your_webshop"
    data-ls-internal-customer-id="Customer_internal_ID_in_your_webshop"
    data-ls-internal-attr-1="Internal_attribute_from_your_webshop_1"
    data-ls-internal-attr-2="Internal_attribute_from_your_webshop_2"
    data-ls-internal-attr-3="Internal_attribute_from_your_webshop_3"
    data-ls-internal-attr-4="Internal_attribute_from_your_webshop_4"
    data-ls-internal-attr-5="Internal_attribute_from_your_webshop_5">
</div>
* = Required
(*) = Not technically required but strongly recomended, Google will not display reviews for products without GTIN
** = Either phone or email is required
    
Actual code sample
<div class="lipscore-purchase"
    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-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-email="john@mysite.com" 
    data-ls-phone="+4712345678" 
    data-ls-name="John M Olsson" 
    data-ls-internal-order-id="778203"
    data-ls-internal-customer-id="84021"
    data-ls-internal-attr-1="Attribute 1"
    data-ls-internal-attr-2="Attribute 2"
    data-ls-internal-attr-3="Attribute 3"
    data-ls-internal-attr-4="Attribute 4"
    data-ls-internal-attr-5="Attribute 5">
</div>

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-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 recomended, Google will not display reviews for products without GTIN
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-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-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 recomended, Google will not display reviews for products without GTIN
    
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-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 rating slider is similar to the “small rating widget” option 2 but with this widget the customer can add their own rating.
Sample output Option 1:
Option 2:
Code structure
<span class="lipscore-rating-slider"
*  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-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 recomended, Google will not display reviews for products without GTIN
Actual code sample
<span class="lipscore-rating-slider"
    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-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 is the form where users writes their review of the product. It supports uploading images and YouTube-videos, but users must log in using one of the social logins before being allowed to submit the review. Please note that all reviews are published immediately, except reviews with links/images/videos, they will have to be manually approved in the Moderation tab in the back end first (due to possibility of spam/etc).
Sample output

Collapsed:


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


Logged in:

Code structure
<div id="lipscore-review-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-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 recomended, Google will not display reviews for products without GTIN
Actual code sample
<div id="lipscore-review-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-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 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-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 recomended, Google will not display reviews for products without GTIN
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-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-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 recomended, Google will not display reviews for products without GTIN
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-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-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 recomended, Google will not display reviews for products without GTIN
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-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 is the form where users writes their service review. It supports uploading images and YouTube-videos, but users must log in using one of the social logins before being allowed to submit the review. Please note that all reviews are published immediately, except reviews with links/images/videos, they will have to be manually approved in the Moderation tab in the back end first (due to possibility of spam/etc).
Sample output

Collapsed:


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


Logged in:

Code structure
<div id="lipscore-review-post"
*  data-ls-product-name="Service reviews"
*  data-ls-product-id="service_review"
*  data-ls-product-type="service"
*  data-ls-product-url="[URL_to_home_page]">
</div>
* = Required
(*) = Not technically required but strongly recomended, Google will not display reviews for products without GTIN
Actual code sample
<div id="lipscore-review-post"
    data-ls-product-name="Service reviews"
    data-ls-product-id="service_review"
    data-ls-product-type="service"
    data-ls-product-url="http://mysite.com">
</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 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-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-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-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-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-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-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>