Installing Instant Feedback
You will need to swap out our %placeholders% with the actual variables your system uses for the highlighted values and replace the GTM ID with the correct one for your site.
Without Product Information.
Below is an example only:
On website HTML (developer)
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'FIRST_NAME': 'John',
'LAST_NAME': 'Doe',
'EMAIL': 'johnd@gmail.com',
'ORDER_DATE': '2021-06-01 12:00:00',
'ORDER_ID': '12345'
});
</script>
<!-- Google Tag Manager -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ID');</script>
<!-- End Google Tag Manager -->
On Google Tag Manager
– Create a Custom URL Tag
<div class="stjr-instant-feedback"></div><script>document.querySelector("body").addEventListener("STJR.instantFeedbackWidgetLoaded",function(){STJR.setConfig({language:'en',user:{first_name:{{FIRST_NAME}},last_name:{{LAST_NAME}},email:{{EMAIL}}},order_date:{{ORDER_DATE}},order_id:{{ORDER_ID}}})});</script>
<script>(function(d,s,id,c){var js,rC=[],uRC=[],r=0;Array.from(document.querySelectorAll('[class*="stjr-"]')).forEach(function(r){rC=rC.concat(Array.from(r.classList).filter(function(cl){return /^stjr-/.test(cl);}))});uRC=Array.from(new Set(rC));t=d.getElementsByTagName(s)[0];js=d.createElement(s);js.id=id;js.src='https://www.sitejabber.com/js/v2/{CLIENT-ID}/widgets.js'+(uRC.length ? '?widget-classes=' + uRC.join("|") : '?widget-classes=stjr-base')+'';js.onload=js.onreadystatechange=function(){if(!r&&(!this.readyState||this.readyState[0]=='c')){r=1;c();}};t.parentNode.insertBefore(js,t);}(document,'script','sj-widget',function(){}));</script>Please replace {CLIENT-ID} with the Client ID in your dashboard here.
– Create a Data Layer Variables
EMAIL, FIRST_NAME, LAST_NAME, ORDER_DATE, ORDER_ID
With Product Information.
Below is an example only:
On website HTML (developer)
<script>
var products=[];
{FOREACH PRODUCT}
products.push({
brand:'PRODUCT_BRAND',
images:'PRODUCT_IMAGE_URL',
price:'PRODUCT_PRICE',
product_link:'PRODUCT_URL',
sku:'PRODUCT_SKU',
title:'PRODUCT_TITLE'
});
{/FOREACH}
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'FIRST_NAME': 'John',
'LAST_NAME': 'Doe',
'EMAIL': 'johnd@gmail.com',
'ORDER_DATE': '2021-06-01 12:00:00',
'ORDER_ID': '12345',
'PRODUCTS': products
});
</script>
<!-- Google Tag Manager -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ID');</script>
<!-- End Google Tag Manager -->
On Google Tag Manager
– Create a custom HTML tag
<div class="stjr-instant-feedback"></div><script>document.querySelector("body").addEventListener("STJR.instantFeedbackWidgetLoaded",function(){STJR.setConfig({language:'en',user:{first_name:{{FIRST_NAME}},last_name:{{LAST_NAME}},email:{{EMAIL}}},products:{{PRODUCTS}},order_date:{{ORDER_DATE}},order_id:{{ORDER_ID}}})});</script>
<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/{CLIENT-ID}/widgets.js'+(uRC.length ? '?widget-classes=' + uRC.join("|") : '?widget-classes=stjr-base')+'';js.onload=js.onreadystatechange=function(){if(!r&&(!this.readyState||this.readyState[0]=='c')){r=1;c();}};t.parentNode.insertBefore(js,t);}(document,'script','sj-widget',function(){}));</script>
– Create Data Layer Variables
EMAIL, FIRST_NAME, LAST_NAME, ORDER_DATE, ORDER_ID, PRODUCTS