Installing Product Widgets – Sitejabberhelp

Product JSON

First, you’ll need to add product information to your product pages in JSON format.

<script id="ProductJson-product-template" type="application/json">{... JSON FORMAT WITH PRODUCT INFORMATION ...}</script>

Examples:

Single product

With required fields

<script id="ProductJson-product-template" type="application/json">
	{
		"id": "0001",
		"sku": "prod-1",
		"title": "Product one",
		"description": "Product descriptions",
		"price": "12",
		"product_link": "https://yoursite.com/products/product-one",
		"images": ["https://yoursite.com/img/product.jpg"]
	}
</script>

With recommended fields

<script id="ProductJson-product-template" type="application/json">
	{
		"id": "0001",
		"sku": "prod-1",
		"title": "Product one",
		"description": "Product descriptions",
		"price": "12",
		"gtin": "G-GRLRDKPPT3LCH",
		"mpn": "MN01234",
		"brand": "Product maker",
		"product_link": "https://yoursite.com/products/product-one",
		"images": ["https://yoursite.com/img/product.jpg"]
	}
</script>

Product with multiple variants

<script id="ProductJson-product-template" type="application/json">
	{
		"id": 3929,
		"title": "Magical Cubby House",
		"description": "About productsMagical Cubby House",
		"brand": "Lifespan Kids",
		"type": "Cubby House",
		"gtin": "G-GRLRDKPPT3LCH",
		"mpn": "MN01234",
		"tags": "Ages 2-6, Cubby Houses",
		"price": 199,
		"variants": [{
				"id": 392923,
				"sku": "sku-magical-cubby-house-green",
				"title": "Magical Cubby House | Green",
				"price": 199,
				"images": ["https://yoursite.com/img/magical-cubby-house-green.jpg"],
				"product_link": "https://yoursite.com/products/magical-cubby-house?variant=392923"
			},
			{
				"id": 392924,
				"sku": "sku-magical-cubby-house-blue",
				"title": "Magical Cubby House | Blue",
				"price": 249,
				"images": ["https://yoursite.com/img/magical-cubby-house-blue.jpg"],
				"product_link": "https://yoursite.com/products/magical-cubby-house?variant=392924"
			}
		]
	}
</script>

Next, you’ll install the product widgets.

Script Loader

The script loader can be added anywhere on the page but we recommend that the script tag be added in the footer area of the site and only one instance to avoid performance lags and comply with recommendations by performance audit tools like Google page speed test.

<script>(function(d,s,id,c){var js,rC=[],uRC=[],r=0;Array.from(document.querySelectorAll('[class*="stjr-"]')).forEach(r=>{rC=[...rC,...Array.from(r.classList).filter((cl)=>{return /^stjr-/.test(cl);})]});uRC=[...new Set(rC)];t=d.getElementsByTagName(s)[0];js=d.createElement(s);js.id=id;js.src='https://www.sitejabber.com/js/v2/

Please replace “CLIENT-ID” with your the Client ID available in your business dashboard here.

Product Rating Widget

Add the code snippet below where you’d like the rating widget to appear. This is typically placed directly below the product title or product price. Replace {PRODUCT_ID} with the actual product id.

<div class="stjr-product-rating" data-product-id="{PRODUCT_ID}"></div>

Product Reviews Widget

This widget displays reviews and is typically placed below the item description or towards the bottom portion of the product page. Replace {PRODUCT_ID} with the actual product id.

<div class="stjr-product-review-page" data-product-id="{PRODUCT_ID}"></div>