ProofRated Widget Playground

Test and customize the ProofRated review widget for your website

Widget Configuration

<div data-proofrated="demo-entity"></div>
<script src="https://embed.proofrated.com/widget.js" async></script>

Platform Examples

Shopify (Liquid)

<div data-proofrated="{{ product.id }}"></div>
<script src="https://embed.proofrated.com/widget.js" async></script>

WordPress/WooCommerce (PHP)

<div data-proofrated="<?php echo get_the_ID(); ?>"></div>
<script src="https://embed.proofrated.com/widget.js" async></script>

React/Next.js (JSX)

<div data-proofrated={`product-${product.id}`}></div>
<script src="https://embed.proofrated.com/widget.js" async></script>

Live Preview

This is how the widget will appear on your website:

Integration Steps:

  1. Copy the generated HTML code above
  2. Paste it into your website where you want reviews to appear
  3. Replace the entity ID with your product/service identifier
  4. The widget will automatically load and display your reviews

🔗 Entity ID Mapping

The entity ID should uniquely identify what's being reviewed:

  • Product: Use product ID or SKU
  • Service: Use service name or category
  • Business: Use business name or location
  • Course: Use course ID or title
`; try { await navigator.clipboard.writeText(htmlCode); copyButton.textContent = 'Copied!'; copyButton.style.background = '#10b981'; setTimeout(() => { copyButton.textContent = 'Copy Code'; copyButton.style.background = ''; }, 2000); } catch (err) { console.error('Failed to copy:', err); } }); form.addEventListener('submit', (e) => { e.preventDefault(); updateWidget(); }); // Update on input changes [entityIdInput, themeSelect, limitInput].forEach(input => { input.addEventListener('change', updateWidget); input.addEventListener('input', updateWidget); }); // Initialize widget on page load document.addEventListener('DOMContentLoaded', () => { updateWidget(); });