---
title: "Progressive Web App Compatibility"
slug: "progressive-web-app-compatibility"
tags: ["Reviews "]
updated: 2023-07-13T12:34:13Z
published: 2023-07-13T12:34:14Z
canonical: "support.yotpo.com/progressive-web-app-compatibility"
excludeFromSearch: true
excludeFromExternalSearch: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Progressive Web App Compatibility (Legacy)

Products

  
Reviews

###### Supported plans

N/A

###### eCommerce Platform

N/A

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](https://www.yotpo.com/platform/reviews/), [Visual UGC](https://www.yotpo.com/platform/visual-marketing/), and [Loyalty](https://www.yotpo.com/platform/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.

Please note:All Yotpo widgets must reside within the same shadow DOM.

## PWA Compatible Widgets

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

- [**Reviews Widget**](/v1/docs/adding-the-reviews-widget)
- [**Reviews Carousel**](/v1/docs/configuring-and-installing-the-reviews-carousel)
- [**Star Rating**](/v1/docs/adding-the-star-rating)
- [**Reviews Tab**](/v1/docs/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

```markup
< 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

```markup
< 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

```markup
< 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

```markup
< 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>
```

## Related

- [Adding the Reviews Widget (Legacy)](/adding-the-reviews-widget-legacy.md)
- [Adding the Star Rating (Legacy)](/adding-the-star-rating-legacy.md)