mirror of
https://github.com/psviderski/uncloud.git
synced 2026-08-28 12:03:33 +00:00
website: send Hub early access form submission to posthog
This commit is contained in:
Pasha Sviderski
@@ -32,6 +32,8 @@
|
||||
content="Uncloud Hub will add a dashboard, metrics, logs, and alerts to the Uncloud clusters you already run. Skip the weekend of wiring Prometheus, Loki, and Grafana. Join the early access list.">
|
||||
<meta name="twitter:image" content="https://uncloud.run/images/logo-wide.png">
|
||||
<meta name="twitter:image:alt" content="Uncloud Hub - Observability for self-hosted apps">
|
||||
|
||||
<script src="./js/posthog.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body class="font-inter antialiased bg-white text-zinc-900 tracking-tight">
|
||||
@@ -205,8 +207,7 @@
|
||||
class="group block relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
|
||||
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span
|
||||
x-data="counter(390)" x-text="counterValue">390</span>+</h4>
|
||||
<p class="text-zinc-500 transition-colors group-hover:text-zinc-800">Discord
|
||||
members</p>
|
||||
<p class="text-zinc-500 transition-colors group-hover:text-zinc-800">Fans on Discord</p>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
@@ -819,7 +820,7 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form action="/fill-form" method="POST">
|
||||
<form id="hub-early-access-form">
|
||||
<div class="mb-4">
|
||||
<label for="hub-email" class="block text-sm font-medium text-zinc-300 mb-1.5">Your
|
||||
email</label>
|
||||
@@ -836,12 +837,39 @@
|
||||
placeholder="e.g. searchable logs across all my services, or alerts when something goes down..."
|
||||
class="form-textarea w-full bg-white border-zinc-700 rounded-lg px-4 py-3 text-sm text-zinc-900 resize-none"></textarea>
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="btn text-zinc-900 bg-white hover:bg-zinc-100 w-full shadow font-semibold">
|
||||
<!-- Disabled until PostHog which processes the submissions is loaded. -->
|
||||
<button type="submit" disabled
|
||||
class="btn text-zinc-900 bg-white hover:bg-zinc-100 w-full shadow font-semibold disabled:opacity-70">
|
||||
Request early access
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Error shown below the form when submissions can't be sent, e.g. PostHog can't be loaded. -->
|
||||
<p id="hub-form-error" class="hidden text-center text-sm text-red-400 mt-4">
|
||||
Sorry, the form isn't working. It may be blocked by a browser extension.<br>
|
||||
Please email
|
||||
<a href="mailto:pasha@uncloud.run"
|
||||
class="underline hover:text-red-300 transition">pasha@uncloud.run</a>
|
||||
or message @psviderski on
|
||||
<a href="https://uncloud.run/discord" target="_blank" rel="noopener"
|
||||
class="underline hover:text-red-300 transition">Discord</a>
|
||||
instead.
|
||||
</p>
|
||||
|
||||
<!-- Success message shown in place of the form after submission. -->
|
||||
<div id="hub-form-success" class="hidden text-center bg-zinc-800 rounded-lg px-6 py-8">
|
||||
<p class="text-lg font-semibold text-white">You're on the list!</p>
|
||||
<p class="text-zinc-400 mt-2">
|
||||
We'll email you an invite as Hub becomes usable. Thanks for helping shape it.
|
||||
</p>
|
||||
<p class="text-zinc-400 mt-2">
|
||||
Meanwhile,
|
||||
<a href="https://uncloud.run/discord" target="_blank" rel="noopener"
|
||||
class="underline text-zinc-300 hover:text-white transition">join our Discord</a>
|
||||
to follow the development and chat about what you'd like Hub to do.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-sm text-zinc-500 mt-6">
|
||||
Uncloud updates only, no spam. Or email
|
||||
<a href="mailto:pasha@uncloud.run"
|
||||
@@ -1085,7 +1113,48 @@
|
||||
this.observer && this.observer.disconnect()
|
||||
},
|
||||
}))
|
||||
})
|
||||
});
|
||||
|
||||
// Send early access form submissions to PostHog and show an inline success message.
|
||||
const form = document.getElementById('hub-early-access-form');
|
||||
const formSuccess = document.getElementById('hub-form-success');
|
||||
const formError = document.getElementById('hub-form-error');
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
|
||||
// The submit button starts disabled and is enabled once PostHog is ready to accept submissions.
|
||||
// If it doesn't load in time, show an error but keep polling in case it loads late.
|
||||
const posthogDeadline = Date.now() + 5000;
|
||||
(function enableFormWhenPostHogLoads() {
|
||||
if (window.posthog && window.posthog.__loaded) {
|
||||
submitButton.disabled = false;
|
||||
formError.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
if (Date.now() > posthogDeadline) {
|
||||
formError.classList.remove('hidden');
|
||||
}
|
||||
setTimeout(enableFormWhenPostHogLoads, 200);
|
||||
})();
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
const email = form.elements.email.value.trim();
|
||||
if (!email) return;
|
||||
try {
|
||||
// Key the person by email so the early access list shows up under People in PostHog.
|
||||
posthog.identify(email, {email: email});
|
||||
posthog.capture('hub_early_access_requested', {
|
||||
email: email,
|
||||
message: form.elements.message.value.trim(),
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Failed to send the form:', err);
|
||||
formError.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
form.classList.add('hidden');
|
||||
formSuccess.classList.remove('hidden');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user