The Web Ratings
Code Examples

Vanilla JavaScript

Copy-paste examples for plain HTML/JS projects

Complete examples using plain HTML and JavaScript—no frameworks, no build tools. Just copy, paste, and customize.

Basic Example

Minimal setup with a single button:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feedback Example</title>
  
  <!-- Load TheWebRatings widget -->
  <script src="https://cdn.thewebratings.com/twr.min.js"></script>
</head>
<body>
  <button id="feedback-btn">⭐ Leave a Review</button>

  <script>
    // Initialize widget
    TheWebRatings.init({
      apiKey: 'your-api-key-here',
      debug: true
    });

    // Handle button click
    document.getElementById('feedback-btn').addEventListener('click', () => {
      // Replace with actual user data
      const userEmail = '[email protected]';
      const userName = 'John Doe';
      
      TheWebRatings.open(userEmail, userName);
    });
  </script>
</body>
</html>

Dynamic User Data

Get user info from your authentication system:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dynamic User Example</title>
  <script src="https://cdn.thewebratings.com/twr.min.js"></script>
</head>
<body>
  <button onclick="openFeedback()">Leave a Review</button>

  <script>
    // Initialize widget
    TheWebRatings.init({
      apiKey: 'your-api-key-here'
    });

    // Get current user from your auth system
    function getCurrentUser() {
      // Example: From localStorage
      const user = JSON.parse(localStorage.getItem('user'));
      return user;
      
      // Or from a global variable
      // return window.currentUser;
      
      // Or from your auth service
      // return AuthService.getCurrentUser();
    }

    function openFeedback() {
      const user = getCurrentUser();
      
      if (!user) {
        alert('Please log in to leave a review');
        return;
      }
      
      TheWebRatings.open(user.email, user.name);
    }
  </script>
</body>
</html>

With Event Handlers

Track submissions and show custom messages:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Events Example</title>
  <script src="https://cdn.thewebratings.com/twr.min.js"></script>
  
  <style>
    #notification {
      display: none;
      position: fixed;
      top: 20px;
      right: 20px;
      background: #10b981;
      color: white;
      padding: 16px 24px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      z-index: 10000;
    }
    #notification.show {
      display: block;
    }
  </style>
</head>
<body>
  <button onclick="openFeedback()">Leave a Review</button>
  
  <!-- Custom notification -->
  <div id="notification"></div>

  <script>
    // Initialize widget
    TheWebRatings.init({
      apiKey: 'your-api-key-here'
    });

    // Listen for successful submission
    TheWebRatings.on('rating:submitted', (data) => {
      const rating = data.rating;
      showNotification(`Thank you for your ${rating}-star rating! 🎉`);
      if (typeof gtag !== 'undefined') {
        gtag('event', 'review_submitted', { rating, rating_id: data.ratingId });
      }
      if (rating === 5) grantReward();
    });

    function openFeedback() {
      const user = getCurrentUser();
      TheWebRatings.open(user.email, user.name);
    }

    function showNotification(message, type = 'success') {
      const notification = document.getElementById('notification');
      notification.textContent = message;
      notification.style.background = type === 'error' ? '#ef4444' : '#10b981';
      notification.classList.add('show');
      
      setTimeout(() => {
        notification.classList.remove('show');
      }, 4000);
    }

    function grantReward() {
      // Example: Show discount code
      alert('🎉 Thank you! Here\'s a 10% discount code: THANKS10');
      
      // Or make API call to your backend
      // fetch('/api/rewards/grant', {
      //   method: 'POST',
      //   body: JSON.stringify({ userId: user.id })
      // });
    }

    function getCurrentUser() {
      // Your auth logic here
      return {
        email: '[email protected]',
        name: 'John Doe'
      };
    }
  </script>
</body>
</html>

Multiple Review Buttons

Different buttons for different contexts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Multiple Buttons Example</title>
  <script src="https://cdn.thewebratings.com/twr.min.js"></script>
</head>
<body>
  <nav>
    <button onclick="openFeedback('header')">Feedback</button>
  </nav>

  <main>
    <h1>Product Page</h1>
    <button onclick="openFeedback('product')">Rate this Product</button>
  </main>

  <footer>
    <button onclick="openFeedback('footer')">How are we doing?</button>
  </footer>

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

    // Track where feedback was triggered from
    TheWebRatings.on('modal:opened', (data) => {
      // Log to analytics
      console.log('Feedback opened from:', data.trigger);
    });

    function openFeedback(location) {
      const user = getCurrentUser();
      
      // Track which button was clicked
      if (typeof gtag !== 'undefined') {
        gtag('event', 'review_button_clicked', {
          location: location
        });
      }
      
      TheWebRatings.open(user.email, user.name);
    }

    function getCurrentUser() {
      return {
        email: '[email protected]',
        name: 'John Doe'
      };
    }
  </script>
</body>
</html>

Conditional Review Prompt

Only show feedback button after certain actions:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Conditional Review Prompt</title>
  <script src="https://cdn.thewebratings.com/twr.min.js"></script>
  
  <style>
    #feedback-btn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #3b82f6;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    #feedback-btn:hover {
      background: #2563eb;
    }
  </style>
</head>
<body>
  <h1>Complete these tasks:</h1>
  <ul>
    <li><input type="checkbox" onchange="checkCompletion()"> Task 1</li>
    <li><input type="checkbox" onchange="checkCompletion()"> Task 2</li>
    <li><input type="checkbox" onchange="checkCompletion()"> Task 3</li>
  </ul>

  <!-- Floating feedback button (hidden initially) -->
  <button id="feedback-btn" onclick="openFeedback()">
    ⭐ How was your experience?
  </button>

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

    function checkCompletion() {
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      const allChecked = Array.from(checkboxes).every(cb => cb.checked);
      
      if (allChecked) {
        // All tasks complete - show feedback button
        document.getElementById('feedback-btn').style.display = 'block';
      }
    }

    function openFeedback() {
      const user = getCurrentUser();
      TheWebRatings.open(user.email, user.name);
    }

    function getCurrentUser() {
      return {
        email: '[email protected]',
        name: 'John Doe'
      };
    }
  </script>
</body>
</html>

Loading State

Show loading indicator during initialization:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Loading State Example</title>
  <script src="https://cdn.thewebratings.com/twr.min.js"></script>
  
  <style>
    #feedback-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .loading {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #fff;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <button id="feedback-btn" disabled>
    <span class="loading"></span> Loading...
  </button>

  <script>
    // Initialize widget
    TheWebRatings.init({
      apiKey: 'your-api-key-here'
    });

    // Enable button when ready
    TheWebRatings.on('init:complete', () => {
      const btn = document.getElementById('feedback-btn');
      btn.disabled = false;
      btn.innerHTML = '⭐ Leave a Review';
      btn.onclick = openFeedback;
    });

    function openFeedback() {
      const user = getCurrentUser();
      TheWebRatings.open(user.email, user.name);
    }

    function getCurrentUser() {
      return {
        email: '[email protected]',
        name: 'John Doe'
      };
    }
  </script>
</body>
</html>

Integration with Google Analytics

Track review events in Google Analytics:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Analytics Integration</title>
  
  <!-- Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  </script>
  
  <!-- TheWebRatings -->
  <script src="https://cdn.thewebratings.com/twr.min.js"></script>
</head>
<body>
  <button onclick="openFeedback()">Leave a Review</button>

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

    // Track modal opens
    TheWebRatings.on('modal:opened', () => {
      gtag('event', 'review_modal_opened');
    });

    // Track submissions
    TheWebRatings.on('rating:submitted', (data) => {
      gtag('event', 'review_submitted', { rating: data.rating, rating_id: data.ratingId });
      gtag('event', 'rating', {
        event_category: 'Reviews',
        event_label: `${data.rating} stars`,
        value: data.rating
      });
    });

    // Track modal closure
    TheWebRatings.on('widget:closed', (data) => {
      gtag('event', 'review_modal_closed', {
        reason: data.reason,
        submitted: data.rating > 0
      });
    });

    function openFeedback() {
      const user = getCurrentUser();
      TheWebRatings.open(user.email, user.name);
    }

    function getCurrentUser() {
      return {
        email: '[email protected]',
        name: 'John Doe'
      };
    }
  </script>
</body>
</html>

Next Steps

Need help? Join our Discord or email [email protected]

On this page

Basic ExampleDynamic User DataWith Event HandlersMultiple Review ButtonsConditional Review PromptLoading StateIntegration with Google AnalyticsNext Steps