Progressive Web App Compatibility (Legacy)

Progressive Web Apps (PWAs) are web apps that make use of modern web capabilities to deliver an app-like experience to users right in their browsers. eCommerce stores built as PWAs are usually comprised of multiple third-party widgets and components such as Yotpo's Reviews, Visual UGC, and Loyalty solutions.  

As the structure of online stores becomes more complex, it’s important to ensure that third-party code doesn’t conflict with the base page code and result in unintended consequences. To solve this issue, shadow DOMs are used to isolate portions of the main DOM, and thereby protect against unintended access and modifications to widget styling.

Yotpo now offers PWA compatible versions of its on-site widgets which allow Yotpo code to run isolated within each component/ shadow DOM.

PWA Compatible Widgets

Currently, Yotpo offers Progressive Web App compatibility for the following Yotpo widgets:

• Reviews Widget
• Reviews Carousel
• Star Rating
• Reviews Tab

We look forward to offering PWA compatibility for additional Yotpo on-site widgets in the future.

Adding PWA Widgets to Your Site

Below you'll find examples of PWA-compatible versions of the corresponding widget codes wrapped in shadow DOM code. 

Reviews Widget

< yotpo - widget - shadow class = "yotpo-widget-shadow" > < /yotpo-widget-shadow> <
 script >
 var loaded = false;
var host = document.querySelector('yotpo-widget-shadow');
var shadowRoot = host.attachShadow({
 mode: 'open'
});
shadowRoot.innerHTML = '<style> @import "https://staticw2.yotpo.com/###YOTPO_APP_KEY###/widget.css" </style>' +
 '<div>' +
 '<div class="yotpo yotpo-main-widget"' +
 '    data-product-id="{{ product.id }}"' +
 '    data-name="{{ product.title | escape }}"' +
 '    data-url="{{ shop.url }}{{ product.url }}"' +
 '    data-image-url="{{ product.featured_image | product_img_url: "large" |replace: ' ? ', ' % 3 F ' | replace: ' & ',' % 26 '}}"' +
 '    data-description="{{ product.description | escape }}"' +
 '></div>' +
 '<div>';
window.onload = function() {
 if (typeof yotpo !== 'undefined') {
  var callback = function() {
   if (!loaded) {
    console.log("Refreshing widgets!");
    yotpo.refreshWidgets(shadowRoot);
    loaded = true;
   }
  }
  if (yotpo.getState() == 'ready') {
   callback();
  } else {
   yotpo.on('ready', callback);
  }
 }
}; <
/script>

Reviews Carousel

< yotpo - widget - shadow class = "yotpo-widget-shadow" > < /yotpo-widget-shadow> <
 script >
 var loaded = false;
var host = document.querySelector('yotpo-widget-shadow');
var shadowRoot = host.attachShadow({
 mode: 'open'
});
shadowRoot.innerHTML = '<style> @import "https://staticw2.yotpo.com/###YOTPO_APP_KEY_HERE###/widget.css" </style>' +
 '<div>' +
 '<div class="yotpo yotpo-reviews-carousel" ' +
 ' data-background-color="transparent" ' +
 ' data-mode="most_recent" ' +
 ' data-type="product" ' +
 ' data-count="3" ' +
 ' data-show-bottomline="1" ' +
 ' data-autoplay-enabled="1" ' +
 ' data-autoplay-speed="100" ' +
 ' data-show-navigation="1"' +
 '></div>' +
 '<div>';
window.onload = function() {
 if (typeof yotpo !== 'undefined') {
  var callback = function() {
   if (!loaded) {
    console.log("Refreshing widgets!");
    yotpo.refreshWidgets(shadowRoot);
    loaded = true;
   }
  }
  if (yotpo.getState() == 'ready') {
   callback();
  } else {
   yotpo.on('ready', callback);
  }
 }
}; <
/script>

Star Rating

< yotpo - widget - shadow class = "yotpo-widget-shadow" > < /yotpo-widget-shadow> <
 script >
 var loaded = false;
var host = document.querySelector('yotpo-widget-shadow');
var shadowRoot = host.attachShadow({
 mode: 'open'
});
shadowRoot.innerHTML = '<style> @import "https://staticw2.yotpo.com/###YOTPO_APP_KEY_HERE###/widget.css" </style>' +
 '<div>' +
 '<div class="yotpo bottomLine"'
'  data-product-id="{{ product.id }}">'
'</div>' +
'<div>';
window.onload = function() {
 if (typeof yotpo !== 'undefined') {
  var callback = function() {
   if (!loaded) {
    console.log("Refreshing widgets!");
    yotpo.refreshWidgets(shadowRoot);
    loaded = true;
   }
  }
  if (yotpo.getState() == 'ready') {
   callback();
  } else {
   yotpo.on('ready', callback);
  }
 }
}; <
/script>

Reviews Tab

< yotpo - widget - shadow class = "yotpo-widget-shadow" > < /yotpo-widget-shadow> <
 script >
 var loaded = false;
var host = document.querySelector('yotpo-widget-shadow');
var shadowRoot = host.attachShadow({
 mode: 'open'
});
shadowRoot.innerHTML = '<style> @import "https://staticw2.yotpo.com/###YOTPO_APP_KEY_HERE###/widget.css" </style>' +
 '<div>' +
 '<div id="yotpo-testimonials-custom-tab">                          </div>' +
 '<div>';
window.onload = function() {
 if (typeof yotpo !== 'undefined') {
  var callback = function() {
   if (!loaded) {
    console.log("Refreshing widgets!");
    yotpo.refreshWidgets(shadowRoot);
    loaded = true;
   }
  }
  if (yotpo.getState() == 'ready') {
   callback();
  } else {
   yotpo.on('ready', callback);
  }
 }
}; <
/script>