Simple HTML

Step 1: Add the Script

Add the script to your authenticated pages (dashboard, member area, admin panel) — not your public-facing HTML:

<head>
  <script src="https://cdn.thewebratings.com/twr.min.js"></script>
</head>

Authenticated pages only

The widget auto-prompts users to leave a review. If you add it to your public website, anonymous visitors will see the review prompt. Initialize only where users are logged in.

Step 2: Initialize and Create User

Initialize the widget once on page load in your authenticated area. The recommended pattern is init → open(email, name), letting the widget handle user lookup, creation, and OTP when required.

<script>
  (function () {
    if (!window.TheWebRatings || typeof TheWebRatings.init !== 'function') {
      console.error('TheWebRatings script not loaded. Check the <script src=\"https://cdn.thewebratings.com/twr.min.js\"> tag.');
      return;
    }

    TheWebRatings.init({
      apiKey: 'your-api-key',
      debug: true,
      features: {
        offline: true,
        retry: true,
        analytics: false
      }
    });
  })();
</script>

<button onclick="TheWebRatings.open('[email protected]', 'John Doe')">Leave a Review</button>

Complete Example

This example represents an authenticated page (e.g., a user dashboard), not a public page:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Dashboard - My App</title>
  <script src="https://cdn.thewebratings.com/twr.min.js"></script>
</head>
<body>
  <h1>Welcome back!</h1>
  <button onclick="TheWebRatings.open('[email protected]', 'John Doe')">Leave a Review</button>

  <script>
    (function () {
      if (!window.TheWebRatings || typeof TheWebRatings.init !== 'function') {
        console.error('TheWebRatings script not loaded. Check the <script src=\"https://cdn.thewebratings.com/twr.min.js\"> tag.');
        return;
      }

      TheWebRatings.init({
        apiKey: 'your-api-key'
      });
    })();
  </script>
</body>
</html>

Event Handling

Listen to events for custom behavior:

TheWebRatings.on('rating:submitted', (e) => {
  console.log('Submitted rating:', e.rating, 'ID:', e.ratingId);
});

TheWebRatings.on('widget:closed', (data) => {
  console.log('Widget closed:', data);
});

Configuration Options

apiKey (required): Your TheWebRatings API key
debug: Enable debug logging
features: Enable/disable specific features (offline, retry, analytics)