feedback-widget.html

<!-- _includes/feedback-widget.html -->
<div id="sticky-feedback-widget">
  <!-- Sticky button with star SVG icon -->
  <button id="sticky-rating-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" role="presentation" aria-hidden="true">
      <path fill="currentColor" d="M7.538 1.11a.5.5 0 0 1 .924 0l1.537 3.696a.5.5 0 0 0 .421.306l3.99.32a.5.5 0 0 1 .285.878l-3.04 2.604a.5.5 0 0 0-.16.496l.928 3.893a.5.5 0 0 1-.747.542L8.261 11.76a.5.5 0 0 0-.522 0l-3.415 2.086a.5.5 0 0 1-.747-.542l.928-3.893a.5.5 0 0 0-.16-.496L1.304 6.31a.5.5 0 0 1 .285-.878l3.99-.32A.5.5 0 0 0 6 4.806L7.538 1.11Z"></path>
    </svg>
    Rate This Page
  </button>

  <!-- Feedback overlay -->
  <div id="feedback-overlay">
    <div id="feedback-window">
      <span id="feedback-close-btn">&times;</span>

      <div id="star-container">
        <div id="star-rating">
          <span class="star" data-value="1">★</span>
          <span class="star" data-value="2">★</span>
          <span class="star" data-value="3">★</span>
          <span class="star" data-value="4">★</span>
          <span class="star" data-value="5">★</span>
        </div>
      </div>

      <div id="step1" class="feedback-step active">
        <p>Please select a star rating above.</p>
      </div>

      <div id="step2" class="feedback-step">
        <h3 id="feedback-heading">Tell us about your experience</h3>
        <textarea id="comments" placeholder="Tell us about your experience"></textarea>
        <input type="email" id="email" placeholder="Email Address (Optional)" />
        <button id="screenshot-btn">Show us a screenshot</button>
        <input type="file" id="screenshot" accept="image/*" />
        <button id="submit-btn">Send</button>
      </div>

      <div id="step3" class="feedback-step">
        <h3>Thank you for your feedback!</h3>
        <p>Your input helps us improve our documentation.</p>
        <hr>
        <h4>Explore More Documentation:</h4>
        <ul id="doc-links">
          <li><a href="https://www.cockroachlabs.com/docs/" target="_blank">CockroachDB Docs</a></li>
          <li><a href="https://university.cockroachlabs.com/" target="_blank">Cockroach University</a></li>
          <li><a href="https://forum.cockroachlabs.com/" target="_blank">Community Forums</a></li>
          <li><a href="https://support.cockroachlabs.com/" target="_blank">CockroachDB Support</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Styles -->
<style>
  #sticky-feedback-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    z-index: 9999;
  }

  #sticky-rating-btn {
    position: fixed;
    bottom: 120px;
    right: 20px;
    background-color: rgba(76, 14, 255, 0.05);
    color: #4C0EFF;
    border: 1.5px solid #4C0EFF;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 12px; /* font size reduced from 14px */
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px; /* gap reduced from 6px */
    backdrop-filter: blur(4px);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  #sticky-rating-btn svg {
    color: #4C0EFF;
  }

  #sticky-rating-btn:hover {
    background-color: rgba(76, 14, 255, 0.1);
    box-shadow: 0 2px 6px rgba(76, 14, 255, 0.2);
  }

  #feedback-overlay {
    display: none;
    position: fixed;
    bottom: 160px;
    right: 20px;
    width: 320px; /* width reduced from 420px */
    max-width: 90%;
    z-index: 10000;
  }

  #feedback-window {
    position: relative;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    padding: 24px;
    max-height: 90vh;
    overflow-y: auto;
  }

  #feedback-close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 24px;
    cursor: pointer;
    color: #666;
  }

  #feedback-close-btn:hover {
    color: #333;
  }

  #star-container {
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  #star-rating {
    margin: 8px 0;
  }

  .star {
    font-size: 24px; /* star size reduced from 30px */
    color: #ccc;
    cursor: pointer;
    margin: 0 4px;
    transition: transform 0.25s ease, color 0.25s ease;
  }

  .star.hover, .star.selected {
    color: #FFD700;
    transform: scale(1.3);
  }

  .feedback-step {
    display: none;
    text-align: center;
  }

  .feedback-step.active {
    display: block;
  }

  textarea, input[type="email"] {
    width: 100%;
    padding: 10px;
    margin: 12px 0;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 12px; /* font size reduced from 14px */
    box-sizing: border-box;
  }

  textarea {
    min-height: 100px;
    resize: vertical;
  }

  #screenshot {
    display: none;
  }

  #screenshot-btn, #submit-btn {
    background-color: #4C0EFF;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 12px; /* font size reduced from 14px */
    cursor: pointer;
    margin-top: 10px;
    display: block;
  }

  #submit-btn {
    margin-top: 16px;
    width: 100%;
  }

  #screenshot-btn:hover, #submit-btn:hover {
    background-color: #3a0ccc;
  }

  #doc-links {
    list-style-type: none;
    padding: 0;
    margin-top: 16px;
    text-align: left;
  }

  #doc-links li {
    margin: 8px 0;
  }

  #doc-links a {
    text-decoration: none;
    color: #4C0EFF;
    font-weight: 500;
  }

  #doc-links a:hover {
    text-decoration: underline;
  }

  #feedback-window h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px; /* font size reduced from 18px */
    color: #333;
  }

  #feedback-window h4 {
    margin-bottom: 8px;
    font-size: 14px; /* font size reduced from 16px */
    color: #333;
  }

  #feedback-window hr {
    border: 0;
    height: 1px;
    background-color: #eee;
    margin: 16px 0;
  }
</style>

<!-- Script -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const stickyBtn = document.getElementById('sticky-rating-btn');
    const feedbackOverlay = document.getElementById('feedback-overlay');
    const feedbackWindow = document.getElementById('feedback-window');
    const closeBtn = document.getElementById('feedback-close-btn');
    const step1 = document.getElementById('step1');
    const step2 = document.getElementById('step2');
    const step3 = document.getElementById('step3');
    const stars = document.querySelectorAll('.star');
    const feedbackHeading = document.getElementById('feedback-heading');
    const commentsField = document.getElementById('comments');
    const emailField = document.getElementById('email');
    const screenshotBtn = document.getElementById('screenshot-btn');
    const screenshotField = document.getElementById('screenshot');
    const submitBtn = document.getElementById('submit-btn');
    let currentRating = 0;

    function resetWidget() {
      currentRating = 0;
      stars.forEach(s => s.classList.remove('selected', 'hover'));
      commentsField.value = '';
      emailField.value = '';
      screenshotField.value = '';
      step1.classList.add('active');
      step2.classList.remove('active');
      step3.classList.remove('active');
      feedbackHeading.textContent = 'Tell us about your experience';
      commentsField.placeholder = 'Tell us about your experience';
      screenshotBtn.textContent = 'Show us a screenshot';
    }

    stickyBtn.addEventListener('click', () => {
      resetWidget();
      feedbackOverlay.style.display = 'block';
    });

    closeBtn.addEventListener('click', () => {
      feedbackOverlay.style.display = 'none';
    });

    stars.forEach(star => {
      star.addEventListener('mouseover', () => {
        const val = parseInt(star.getAttribute('data-value'), 10);
        stars.forEach(s => s.classList.toggle('hover', parseInt(s.getAttribute('data-value'), 10) <= val));
      });
      star.addEventListener('mouseout', () => {
        stars.forEach(s => s.classList.remove('hover'));
      });
      star.addEventListener('click', () => {
        currentRating = parseInt(star.getAttribute('data-value'), 10);
        stars.forEach(s => s.classList.toggle('selected', parseInt(s.getAttribute('data-value'), 10) <= currentRating));
        step1.classList.remove('active');
        step2.classList.add('active');
        if (currentRating <= 2) {
          feedbackHeading.textContent = 'Tell us how we can improve';
          commentsField.placeholder = 'Tell us how we can improve';
          screenshotBtn.textContent = 'Show us where the problem is';
        } else {
          feedbackHeading.textContent = 'Tell us more about your experience';
          commentsField.placeholder = 'Tell us more about your experience';
          screenshotBtn.textContent = 'Show us a screenshot';
        }
      });
    });

    screenshotBtn.addEventListener('click', () => {
      screenshotField.click();
    });

    submitBtn.addEventListener('click', () => {
      step2.classList.remove('active');
      step3.classList.add('active');
    });

    feedbackWindow.addEventListener('click', (e) => {
      e.stopPropagation();
    });
  });
</script>