Vanilla JS Example

asdasdad

<!DOCTYPE html>
<html>
<head>
  <title>Waiting list Sample App</title>
  <meta charset="UTF-8" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body class="font-serif relative w-full h-full">
  <div class="container mx-auto w-6/12">
    <h1 class="mt-10 mb-1 text-center text-6xl">Sample</h1>
    <h1 class="mt-1 mb-10 text-center text-6xl">Landing Page</h1>
    <form class="flex justify-center" onsubmit="return submit(event)">
      <input id="user-email" class="input" type="email" placeholder="user@example.com">
      <submit onclick="submit(event)" class="ml-3 button is-dark">Sign Up</submit>
      <a class="font-size-ms text-muted" id="referral_link_url"></>
    </form>
  </div>
      <h2 class="mt-10 mb-1 text-center text-2xl has-background-black	has-text-white-bis" id="success"></h2>
      <h2 class="mt-10 mb-1 text-center text-2xl has-text-danger" id="error"></h2>
    <script src="src/index.js"></script>
</body>
</html>

html {
  background-color: #e8feff;
	background-attachment: fixed;
	background-size: cover;
}

function submit(e) {
    e.preventDefault();
    // fetch values from the frontend
    var apiKey = "YOUR_API_KEY";
    apiKey = "6d28c006a821419b8386585b74a72a92"
    var email = document.getElementById('user-email').value; // user email
    var current_url = document.URL; // current url
    var payload = {
      email: email,
      url: current_url
    }
  
    $.ajax({
        method: 'POST',
        url: `https://api.waitinglist.app/register?apiKey=${apiKey}`,
        data: JSON.stringify(payload),
        dataType: 'json',
        contentType: 'application/json',
        success: function(resp) {
            $('#success').html(`Referral code is - ${resp.data.referralCode}`)
          },
        error: function(error) {
            $('#error').html(`Error message is - ${error.responseJSON.message}`)
        }
    });
};

You can find the working example here.