Knowledge Base

Knowledge base

Explore How-To's and learn best practices from our knowledge base.

Install Judge.me in full html pages

Modified on: Thu, 29 Aug, 2019 at 12:00 PM


Using Judge.me in full html pages

Example of apps generating full html pages:

Please follow the steps below to show Judge.me widgets inside a full html page. If you need further support, please contact support@judge.me with the following information: + Which product and page you want to change + Staff account with theme + pages access + the app generating the page

Steps to add Judge.me widget to full html pages

1) add a placeholder div where you want the badge and widget, each with a unique ID.

For example: + badge: <div id='judgeme_badge_palceholder'></div> + widget: <div id='judgeme_widget_palceholder'></div>

2) Find the liquid file generating this page. Most likely this one will containt a buildify slug, such as templates/page.buildify-template.liquid

3) Assign the correct product you want to show the badge/widget for on that page with {% assign product= all_products["producthandle"] %}

4) and add the widget and badge inside a div with display none.

<div style="display:none">

 <div id='judgeme_real_badge' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}'>{{ product.metafields.judgeme.badge }}</div>

 <div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-product-title='{{ product.title | escape }}' data-id='{{ product.id }}'>{{ product.metafields.judgeme.widget }}</div>

</div>

5) write a JS script to move the badge widget to the placeholder place. If it uses the IDs as mentioned above, this script should do the trick.

<script>

document.addEventListener('DOMContentLoaded', function(){

 $('#judgeme_badge_palceholder ').append($('#judgeme_real_badge '));

 $('#judgeme_widget_palceholder ').append($('#judgeme_product_reviews ')); 
}, false);

</script>

6) Depending on the amount of different products you want, you may need to create different liquid page templates.

Note: These steps are just guidance and most likely they will need to be adapted from case to case.



Did you find it helpful? Yes No Still have questions? Talk to us here

Can you please tell us how we can improve this article?

More articles in Installations