Pullreque.st

Headless CDN

Best for: Vanilla JavaScript, static sites, or custom frameworks

Pros

  • ✅ No build step required
  • ✅ Framework agnostic
  • ✅ Full control over HTML/CSS

Usage

<script src="https://pullreque.st/cdn/button.js"></script>

<!-- Your custom UI -->
<form id="feedback-form">
  <textarea id="message" placeholder="Your feedback..."></textarea>
  <input type="email" id="email" placeholder="Email (optional)" />
  <button type="submit">Send</button>
</form>

<script>
  const client = PullrequeStButton.createFeedbackClient({
    projectKey: 'prj_pk_YOUR_KEY'
  })

  document.getElementById('feedback-form').addEventListener('submit', async (e) => {
    e.preventDefault()

    const message = document.getElementById('message').value
    const email = document.getElementById('email').value

    try {
      await client.submit({
        message,
        userEmail: email || undefined,
        meta: { source: 'contact-form' }
      })
      alert('Feedback submitted!')
    } catch (error) {
      alert('Error: ' + error.message)
    }
  })
</script>

Example: Custom HTML Form

<!DOCTYPE html>
<html>
<head>
  <title>Feedback Form</title>
  <style>
    .feedback-form {
      max-width: 500px;
      margin: 50px auto;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }
    .feedback-form textarea {
      width: 100%;
      min-height: 100px;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .feedback-form button {
      background: #000;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .feedback-form button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div class="feedback-form">
    <h2>Send Us Feedback</h2>
    <form id="feedback-form">
      <textarea id="message" placeholder="Your feedback..." required></textarea>
      <input type="email" id="email" placeholder="Email (optional)" />
      <button type="submit" id="submit-btn">Send Feedback</button>
    </form>
    <div id="status"></div>
  </div>

  <script src="https://pullreque.st/cdn/button.js"></script>
  <script>
    const client = PullrequeStButton.createFeedbackClient({
      projectKey: 'prj_pk_YOUR_KEY'
    })

    const form = document.getElementById('feedback-form')
    const submitBtn = document.getElementById('submit-btn')
    const status = document.getElementById('status')

    form.addEventListener('submit', async (e) => {
      e.preventDefault()

      const message = document.getElementById('message').value
      const email = document.getElementById('email').value

      submitBtn.disabled = true
      submitBtn.textContent = 'Sending...'
      status.textContent = ''

      try {
        await client.submit({
          message,
          userEmail: email || undefined,
          meta: {
            page: window.location.pathname,
            timestamp: new Date().toISOString()
          }
        })

        status.textContent = 'Thank you for your feedback!'
        status.style.color = 'green'
        form.reset()
      } catch (error) {
        status.textContent = 'Error: ' + error.message
        status.style.color = 'red'
      } finally {
        submitBtn.disabled = false
        submitBtn.textContent = 'Send Feedback'
      }
    })
  </script>
</body>
</html>

Next Steps