How to add widget to HTML pages or page-builders

We have liquid HTML snippets which can be added to a page to add the widget

1. Product Page

Product page has 2 elements:

a. The block which displays the reviews

<!-- Zegsu Reviews App -->
<link rel="stylesheet" class="zegsu-review-review-css" href="https://zegsu.com/dist/css/reviews/reviews.css?version=2">
<link rel="stylesheet" class="zegsu-review-grid-css" href="https://zegsu.com/dist/css/reviews/grid.css?version=2">
<div class="zegsu-reviews" data-token="0" data-shop="{{shop.permanent_domain}}" data-zegsu-review-product-id="{{product.id}}"></div>
<script class="zegsu-review-snippet-js">var zegsu_rich_snippet_{{product.id}} = { "@context": "http://schema.org/", "@type": "Product", "name": {{ product.title | json }}, "url": {{ shop.url | append: product.url | json }}, {%- if product.featured_media -%} {%- assign media_size = product.featured_media.preview_image.width | append: "x" -%} "image": [ {{ product.featured_media | img_url: media_size | prepend: "https:" | json }} ], {%- endif -%} "description": {{ product.description | strip_html | json }}, "brand": { "@type": "Thing", "name": {{ product.vendor | json }} }, "offers": [ {%- for variant in product.variants -%} { "@type" : "Offer", {%- if variant.sku != blank -%} "sku": {{ variant.sku | json }}, {%- endif -%} "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}", "price" : {{ variant.price | divided_by: 100.00 | json }}, "priceCurrency" : {{ cart.currency.iso_code | json }}, "url" : {{ shop.url | append: variant.url | json }} }{% unless forloop.last %},{% endunless %} {%- endfor -%} ] }</script> <script class="zegsu-review-widget-js" async defer src="https://zegsu.com/dist/js/reviews/review-widget.js"></script> <script class="zegsu-review-js" async defer src="https://zegsu.com/shopify/reviews/shop-reviews?token=0&shop={{shop.permanent_domain}}&productId={{product.id}}&page=1"></script>
b. Stars on the product title
<div class="zegsu-reviews-header-stars"></div>

2. Collection Widget - which renders stars on a grid of products on a collection page

a. Script for the widget - once per page
<!-- Zegsu Reviews App -->
<link rel="stylesheet" class="zegsu-review-review-css" href="https://zegsu.com/dist/css/reviews/reviews.css?version=1.0.7">
<script class="zegsu-review-js" async defer src='https://zegsu.com/shopify/reviews/collection-widget?v=2&shop={{shop.permanent_domain}}&productIds[]={{ collection.products | map: "id" | join: "&productIds[]="}}'></script>
b. marker on cards where stars should appear
<div class="zegsu-reviews-collection-marker" data-product-id="{{product.id}}"></div>