# HushV Integrations — Go Live Guide

> You only need to change **3 values** to go live. Everything else is already wired.
> No code knowledge needed — just copy-paste your links.

**Files you will touch (only these):**

- [`hushv-site/js/main.js`](hushv-site/js/main.js:1) — the `CONFIG` object at the very top (3 values)
- [`hushv-site/index.html`](hushv-site/index.html:1) — only if you change your domain or enable GA4 (optional)

---

## TL;DR — The 3 Values

| # | What | Where to paste | Example |
|---|------|----------------|---------|
| **1** | **Gumroad product URLs** ($29 + $39) | [`hushv-site/js/main.js`](hushv-site/js/main.js:5) → `CONFIG.gumroadSingleUrl` + `CONFIG.gumroadBundleUrl` | `https://gumroad.com/l/your-product` |
| **2** | **Email endpoint** (Hush Letter) | [`hushv-site/js/main.js`](hushv-site/js/main.js:15) → `CONFIG.emailEndpoint` | `https://formspree.io/f/xqkrxxxx` |
| **3** | **Analytics domain** (Plausible) | [`hushv-site/js/main.js`](hushv-site/js/main.js:22) → `CONFIG.plausibleDomain` + [`hushv-site/index.html`](hushv-site/index.html:32) → `data-domain` | `hushv.com` |

> **That's it.** Change those 3, deploy, and you are sales-ready. Everything below is step-by-step for each.

---

## 1) Gumroad Checkout — $29 Single + $39 Bundle

**What is already wired:**

- Gumroad overlay script is loaded in [`hushv-site/index.html`](hushv-site/index.html:504): [`<script>`](hushv-site/index.html:504) → `https://gumroad.com/js/gumroad.js`
- Both pricing buttons have `gumroad-button` class so they open **in-page overlay** (no redirect):
  - Single: [`hushv-site/index.html`](hushv-site/index.html:339) → [`<a id="checkoutSingle">`](hushv-site/index.html:339)
  - Bundle: [`hushv-site/index.html`](hushv-site/index.html:365) → [`<a id="checkoutBundle">`](hushv-site/index.html:365)
- Click tracking fires `hushv_checkout_click` via [`track()`](hushv-site/js/main.js:35) in [`hushv-site/js/main.js`](hushv-site/js/main.js:65)

**Steps for non-technical founder:**

1. Create your products on Gumroad (or duplicate one):
   - Product 1: Hush Vault Single — set price **$29**
   - Product 2: Hush Vault Bundle — set price **$39**
2. Copy each product's **permalink** — it looks like `https://gumroad.com/l/hush-vault-deep-sleep` or `https://yourname.gumroad.com/l/xxxxx`
3. Open [`hushv-site/js/main.js`](hushv-site/js/main.js:1) — at the top you will see:
   ```js
   const CONFIG = {
     gumroadSingleUrl: "https://gumroad.com/l/hush-vault-deep-sleep",
     gumroadBundleUrl: "https://gumroad.com/l/hush-vault-bundle",
   ```
4. Replace those two URLs with your real Gumroad links. Save.
5. Done — the buttons in [`hushv-site/index.html`](hushv-site/index.html:339) auto-update from `CONFIG`. No need to edit HTML.

**How to test:**

- Click “Get the Vault — $29” → should open Gumroad overlay (dark modal), not a new tab.
- If you see a redirect instead, check that `https://gumroad.com/js/gumroad.js` is still in [`hushv-site/index.html`](hushv-site/index.html:504) and buttons still have `gumroad-button` class.

**LemonSqueezy alternative (commented, ready):**

- In [`hushv-site/index.html`](hushv-site/index.html:368) there is a commented LemonSqueezy button + script:
  ```html
  <!-- <a href="https://hushv.lemonsqueezy.com/buy/REPLACE_WITH_ID" class="lemonsqueezy-button" ...> -->
  <!-- <script src="https://assets.lemonsqueezy.com/lemon.js" defer></script> -->
  ```
- To switch: uncomment those lines, comment out the Gumroad buttons, and update `CONFIG` to your LemonSqueezy URLs. The overlay logic for LemonSqueezy is already stubbed in [`hushv-site/js/main.js`](hushv-site/js/main.js:85) (search `LemonSqueezy`).

---

## 2) Email Capture — Hush Letter Form

**What is already wired:**

- Form: [`hushv-site/index.html`](hushv-site/index.html:395) → [`<form id="hushLetterForm">`](hushv-site/index.html:395)
- Logic: [`hushv-site/js/main.js`](hushv-site/js/main.js:115) → provider-agnostic [`fetch()`](hushv-site/js/main.js:165) POST with validation, honeypot, success/error UI, and `localStorage` fallback
- Single swap point: [`hushv-site/js/main.js`](hushv-site/js/main.js:15) → `CONFIG.emailEndpoint`
- Honeypot field: [`hushv-site/index.html`](hushv-site/index.html:402) → [`<input id="honeypot">`](hushv-site/index.html:402) (hidden, bots fill it → silently ignored)
- Success/error elements: [`hushv-site/index.html`](hushv-site/index.html:405) → [`<p id="formSuccess">`](hushv-site/index.html:405) and [`<p id="formError">`](hushv-site/index.html:406)

**Steps — pick ONE provider:**

### Option A: Formspree (easiest, recommended for non-technical)

1. Go to https://formspree.io → create form → copy endpoint like `https://formspree.io/f/xqkrxxxx`
2. In [`hushv-site/js/main.js`](hushv-site/js/main.js:15) set:
   ```js
   emailEndpoint: "https://formspree.io/f/xqkrxxxx",
   emailProvider: "formspree",
   ```
3. Save + deploy. Test by entering your email → you should see “✓ Check your inbox…” and receive a Formspree email.

### Option B: Beehiiv

1. In Beehiiv → Audience → Subscribe Forms → create embed → copy API endpoint (or use their embed URL)
2. Set:
   ```js
   emailEndpoint: "https://embeds.beehiiv.com/api/v1/.../subscribe",
   emailProvider: "beehiiv",
   ```
3. If Beehiiv gives you a full `<form action="...">` instead, you can also paste that URL as `emailEndpoint` — the [`fetch()`](hushv-site/js/main.js:165) logic will POST JSON; if Beehiiv expects form-encoded, change `emailProvider` to `beehiiv` and it will shape payload correctly.

### Option C: ConvertKit

1. ConvertKit → Grow → Landing Pages & Forms → create form → copy form action like `https://app.convertkit.com/forms/XXXX/subscriptions`
2. Set:
   ```js
   emailEndpoint: "https://app.convertkit.com/forms/XXXX/subscriptions",
   emailProvider: "convertkit",
   ```
3. The code auto-switches to `application/x-www-form-urlencoded` for ConvertKit (see [`buildPayload()`](hushv-site/js/main.js:145) in [`hushv-site/js/main.js`](hushv-site/js/main.js:145)).

### Option D: Loops

1. Loops → Audience → Forms → copy endpoint like `https://app.loops.so/api/newsletter-form/xxxx`
2. Set:
   ```js
   emailEndpoint: "https://app.loops.so/api/newsletter-form/xxxx",
   emailProvider: "loops",
   ```

**If you leave `emailEndpoint` empty (`""`):**

- Form still works in **demo mode** — emails are saved to `localStorage` under `hushv_emails` and `hushv_last_signup` (see [`hushv-site/js/main.js`](hushv-site/js/main.js:175)).
- Success message shows: “(Demo mode: set emailEndpoint in js/main.js to go live.)”
- Pending failures are saved to `hushv_emails_pending` so no lead is lost (see [`hushv-site/js/main.js`](hushv-site/js/main.js:215)).

**Validation & anti-spam:**

- Regex: [`/^[^\s@]+@[^\s@]+\.[^\s@]+$/`](hushv-site/js/main.js:130) in [`hushv-site/js/main.js`](hushv-site/js/main.js:130)
- Honeypot: [`<input id="honeypot" name="website">`](hushv-site/index.html:402) — if filled, submission is silently accepted but not sent (spam protection)
- Inline `aria-invalid` on blur, error cleared on input (see [`hushv-site/js/main.js`](hushv-site/js/main.js:235))

---


### Welcome Sequence (recommended — 3 emails)

After connecting your email provider, set up this lightweight sequence in Beehiiv / ConvertKit / Loops:

| Day | Subject | Content |
|-----|---------|---------|
| **Day 0** | "Your HushV preview is inside" | Deliver the free preview PDF + 30-sec audio link. Thank them, set expectation: "One whisper a week." |
| **Day 2** | "The 5-min wind-down that actually works" | Share one sleep tip from the protocol (light + temp + timing). No pitch. Build trust. |
| **Day 5** | "When you're ready — the vault is open" | Soft pitch: recap what's inside the vault ($29 / $39), link to https://hushv.com/#pricing, mention 30-day guarantee. |

Keep it calm, minimal, no urgency tricks — matches the HushV voice (relaxed/soothing, premium, quiet luxury).

---

## 3) Analytics — Plausible (active) + GA4 (optional)

**What is already wired:**

- Plausible script in [`hushv-site/index.html`](hushv-site/index.html:32):
  ```html
  <script defer data-domain="hushv.com" src="https://plausible.io/js/script.tagged-events.js"></script>
  <script>window.plausible = window.plausible || function(){(window.plausible.q=window.plausible.q||[]).push(arguments)};</script>
  ```
  Uses `script.tagged-events.js` so custom events work.
- GA4 is **commented out** in [`hushv-site/index.html`](hushv-site/index.html:35) — uncomment to enable as secondary.
- Unified tracker in [`hushv-site/js/main.js`](hushv-site/js/main.js:35): [`track()`](hushv-site/js/main.js:35) → fires both [`plausible()`](hushv-site/js/main.js:25) and [`gtag()`](hushv-site/js/main.js:33) with guards (no error if script not loaded).

**Steps:**

### Plausible (privacy-friendly, recommended)

1. Sign up at https://plausible.io → add site `hushv.com` (or your domain)
2. In [`hushv-site/index.html`](hushv-site/index.html:32) change `data-domain="hushv.com"` to your actual domain if different (e.g., `data-domain="hushv.co"`).
3. In [`hushv-site/js/main.js`](hushv-site/js/main.js:22) set `CONFIG.plausibleDomain` to same domain (for reference, not required for tracking).
4. Deploy — Plausible will start showing pageviews within minutes.

### GA4 (optional, as secondary)

1. Create GA4 property → copy Measurement ID like `G-ABC123XYZ`
2. In [`hushv-site/index.html`](hushv-site/index.html:35) uncomment the two GA4 lines and replace `G-XXXXXXXXXX` with your ID (both places).
3. In [`hushv-site/js/main.js`](hushv-site/js/main.js:24) set `CONFIG.ga4Id` to same ID.
4. Deploy — GA4 will start receiving events.

**Custom events already firing:**

| Event | Where fired | Trigger |
|-------|-------------|---------|
| `hushv_checkout_click` | [`hushv-site/js/main.js`](hushv-site/js/main.js:95) | Click on $29 or $39 button — props: `{ tier: "single"|"bundle", price: "29"|"39", provider: "gumroad" }` |
| `hushv_email_signup` | [`hushv-site/js/main.js`](hushv-site/js/main.js:185) | Successful Hush Letter signup — props: `{ provider: "formspree"|"beehiiv"|..., method: "fetch"|"fallback" }` |
| `hushv_faq_open` | [`hushv-site/js/main.js`](hushv-site/js/main.js:245) | FAQ `<details>` opened — props: `{ question: "What exactly do I get..." }` |
| `hushv_pricing_view` | [`hushv-site/js/main.js`](hushv-site/js/main.js:260) | Pricing section enters viewport (once, 40% threshold) — props: `{ section: "pricing" }` |

All events are sent via both [`plausible()`](hushv-site/js/main.js:25) and [`gtag()`](hushv-site/js/main.js:33) with guards — if one analytics is not loaded, the other still works and no JS error is thrown.

**To verify events:**

- Open DevTools → Console → look for `[HushV] Checkout click`, `[HushV] FAQ open`, `[HushV] Pricing viewed`
- Plausible dashboard → Realtime → Custom Events
- GA4 → Reports → Realtime → Events

---

## Design & Mobile — What Was NOT Changed

- No framework added — still vanilla HTML/CSS/JS
- [`hushv-site/css/style.css`](hushv-site/css/style.css:1) untouched — design system intact
- Mobile nav, smooth scroll, hero preview, and all sections unchanged
- Only additions: `gumroad-button` class on pricing links, honeypot field (hidden), analytics scripts, and `CONFIG` in [`hushv-site/js/main.js`](hushv-site/js/main.js:1)

---

## Go-Live Checklist (5 minutes)

- [ ] 1. Replace `CONFIG.gumroadSingleUrl` + `CONFIG.gumroadBundleUrl` in [`hushv-site/js/main.js`](hushv-site/js/main.js:5)
- [ ] 2. Set `CONFIG.emailEndpoint` in [`hushv-site/js/main.js`](hushv-site/js/main.js:15) (or leave empty for demo)
- [ ] 3. Confirm `data-domain` in [`hushv-site/index.html`](hushv-site/index.html:32) matches your domain
- [ ] 4. Test checkout overlay (click $29 → overlay opens)
- [ ] 5. Test email form (valid email → success, invalid → error, honeypot → silent success)
- [ ] 6. Check Plausible/GA4 realtime for `hushv_checkout_click` and `hushv_email_signup`
- [ ] 7. Deploy (Vercel: `vercel --prod` or push to `main`)

---

## Troubleshooting

**Checkout opens new tab instead of overlay:**
- Ensure `https://gumroad.com/js/gumroad.js` is still before [`hushv-site/js/main.js`](hushv-site/js/main.js:1) in [`hushv-site/index.html`](hushv-site/index.html:504) and buttons have `gumroad-button` class.

**Email form shows “Something went wrong”:**
- Check `CONFIG.emailEndpoint` is correct and CORS is allowed. Formspree/Beehiiv/Loops allow CORS; ConvertKit may need form-encoded (already handled). Check DevTools → Network → POST → response.

**Plausible not showing data:**
- Verify `data-domain` exactly matches domain in Plausible dashboard (no `https://`, just `hushv.com`). Ensure `script.tagged-events.js` is used (not `script.js`) for custom events.

**GA4 not firing:**
- Uncomment both GA4 lines in [`hushv-site/index.html`](hushv-site/index.html:35) and set `CONFIG.ga4Id`. Check `window.gtag` exists in console.

---

*Last updated: 2026-10-02 — HushV Deep Sleep System — see [`hushv-site/product/README.md`](hushv-site/product/README.md:1) for product assets.*