HTML/JavaScript Integration

Integrate Premonize with vanilla HTML and JavaScript.

Embed Method (Simplest)

The easiest way to add Premonize to any website:

<!-- Waitlist Widget -->
<div id="launchkit-waitlist"></div>
<script src="https://yourproject.premonize.com/api/waitlist/embed/yourproject"></script>

Custom Form

Build a fully custom form with vanilla JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Join Our Waitlist</title>
  <style>
    .waitlist-form {
      max-width: 400px;
      margin: 2rem auto;
      padding: 2rem;
      font-family: system-ui, sans-serif;
    }

    .waitlist-form input {
      width: 100%;
      padding: 0.75rem;
      margin-bottom: 1rem;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 1rem;
    }

    .waitlist-form button {
      width: 100%;
      padding: 0.75rem;
      background: #2563eb;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
    }

    .waitlist-form button:hover {
      background: #1d4ed8;
    }

    .waitlist-form button:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }

    .success {
      text-align: center;
      padding: 2rem;
      background: #f0fdf4;
      border-radius: 12px;
    }

    .error {
      color: #dc2626;
      margin-top: 0.5rem;
    }
  </style>
</head>
<body>

<div class="waitlist-form" id="waitlist-container">
  <h2>Join the Waitlist</h2>
  <form id="waitlist-form">
    <input type="email" id="email" placeholder="Enter your email" required>
    <input type="text" id="name" placeholder="Your name (optional)">
    <button type="submit" id="submit-btn">Join Waitlist</button>
    <p class="error" id="error-message" style="display: none;"></p>
  </form>
</div>

<script>
const API_URL = 'https://yourproject.premonize.com/api/waitlist/submit';

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

  const email = document.getElementById('email').value;
  const name = document.getElementById('name').value;
  const button = document.getElementById('submit-btn');
  const errorEl = document.getElementById('error-message');

  // Get referral code from URL
  const urlParams = new URLSearchParams(window.location.search);
  const referralCode = urlParams.get('ref');

  button.disabled = true;
  button.textContent = 'Joining...';
  errorEl.style.display = 'none';

  try {
    const response = await fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email,
        name: name || undefined,
        referral_code: referralCode || undefined,
      }),
    });

    const data = await response.json();

    if (!response.ok) {
      throw new Error(data.message || 'Something went wrong');
    }

    // Show success message
    document.getElementById('waitlist-container').innerHTML = `
      <div class="success">
        <h2>You're on the list!</h2>
        <p>Your position: #${data.position}</p>
        <p>Share your link to move up:</p>
        <input
          type="text"
          value="${data.share_url}"
          readonly
          onclick="this.select()"
          style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;"
        >
      </div>
    `;
  } catch (error) {
    errorEl.textContent = error.message;
    errorEl.style.display = 'block';
    button.disabled = false;
    button.textContent = 'Join Waitlist';
  }
});
</script>

</body>
</html>

Fetch API Example

// Fetch changelog posts
async function getChangelog() {
  const response = await fetch(
    'https://yourproject.premonize.com/api/changelog/posts/yourproject'
  );
  const data = await response.json();
  return data.posts;
}

// Display posts
getChangelog().then(posts => {
  const container = document.getElementById('changelog');

  posts.forEach(post => {
    container.innerHTML += `
      <article>
        <span class="badge ${post.type}">${post.type}</span>
        <h3>${post.title}</h3>
        <div>${post.content}</div>
      </article>
    `;
  });
});

CORS is enabled for all Premonize API endpoints, allowing requests from any domain.

Was this page helpful?

Your feedback helps us improve our documentation

Thank you for your feedback!

Your input helps us create better documentation for everyone

Vue.js