How to Add a Feedback Button in HTML

Step 1: Install

npm i smart-feedback

Step 2: Initialize

import { setupFeedback } from 'smart-feedback';

(async function(){
  const fw = await setupFeedback({
    projectId: 'your-project-id',
    apiBase: 'https://www.retour.tech',
    attrs: { label: 'Feedback', color: '#4F46E5' }
  });
  
  document.getElementById('feedbackBtn')
    ?.addEventListener('click', () => fw.open());
})();

Step 3: Add Button

<button id="feedbackBtn">Feedback</button>

✅ Done! Your feedback button is live.

HTML

<button id="feedbackBtn" onclick="openFeedbackModal()">
  Feedback
</button>

<div id="feedbackModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeFeedbackModal()">&times;</span>
    <h2>Send Feedback</h2>
    <form id="feedbackForm">
      <textarea id="feedbackText" placeholder="Your feedback..."></textarea>
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

CSS

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #1e293b;
  margin: 15% auto;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
}

JavaScript

function openFeedbackModal() {
  document.getElementById('feedbackModal').style.display = 'block';
}

function closeFeedbackModal() {
  document.getElementById('feedbackModal').style.display = 'none';
}

document.getElementById('feedbackForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const feedback = document.getElementById('feedbackText').value;
  
  await fetch('/api/feedback', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ feedback })
  });
  
  closeFeedbackModal();
  alert('Thanks for your feedback!');
});

'use client';
import { useState } from 'react';

export function FeedbackButton() {
  const [isOpen, setIsOpen] = useState(false);
  const [feedback, setFeedback] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('/api/feedback', {
      method: 'POST',
      body: JSON.stringify({ feedback })
    });
    setIsOpen(false);
    setFeedback('');
  };

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Feedback
      </button>
      
      {isOpen && (
        <div className="modal">
          <form onSubmit={handleSubmit}>
            <textarea 
              value={feedback}
              onChange={(e) => setFeedback(e.target.value)}
              placeholder="Your feedback..."
            />
            <button type="submit">Submit</button>
          </form>
        </div>
      )}
    </>
  );
}