The embed

The embed

Add the sign-up form to any site: the founder's own site or app (own_site_forms), or hosted pages. Paste two lines into the page's HTML: the script, once per page, and an element where the form goes.

The form works only on the project's hosts. To use it on another site, add that site's domain to domains. Sign-ups from anywhere else are refused and counted in blocked_requests.

The waitlist looks as the saved form says (see Save the form), so the snippet never changes when the form does. The founder copies it from Build › Put it on your site.

• The script tag holds data-project (the project's embed_key) and the consent details. Don't edit it. GET /projects/:id/setup also returns the default snippet, as embed_snippet.

Save the form

Save how the waitlist form looks once, and every page with the script shows it: hosted pages, and sites that pasted the snippet. Nothing needs pasting again. Build › Form edits the same settings.

• A form's own data- option (see Form options) wins over the saved setting on that form. Use one only where a page must differ, like a pricing page's data-button="Join".

Preview the form

Open any page with the script with ?hunchwire=preview. The form shows as visitors see it, but takes no sign-up, and the page counts nothing. A bar at the bottom of the page switches between a visitor, someone who just joined and a friend arriving. After joining, the form shows example data, such as place #148 and an example link, never a real person's.

The forms

• <div data-hunchwire="waitlist"></div>: an email field and a Sign up now button. Nothing on the form says "waitlist", so it works for a product that doesn't exist yet. A consent line names the project's sender and links Hunchwire's privacy policy: "By continuing, you agree to get emails from <sender>. Unsubscribe anytime."

  After someone joins, the form shows the same confirmation on every page: "You're early.", then "We're in private beta, so it isn't open yet. You're on the waitlist; updates go to <their email>." Pages can't remove or reword it. They can add a line with data-message. While the project's referrals are on (see Referrals), the person's place in line shows under it.

• <div data-hunchwire="login"></div>: a fake login. It never sends the password or the email, and never adds anyone to the waitlist. Each submit records a login-attempt click and shows "Unknown email or password." With data-next, it sends the visitor to that page instead: use it for the founder's real login page. Analytics shows how many visitors tried to log in, under Key actions. In the API, read it from the click:login-attempt key action's pages.

Form options

Set these on the form's element. Each one wins over the saved form (see Save the form) on that form only.

After someone joins

• Place in line. Shows under the confirmation while the project's referrals are on (see Referrals). No attribute controls it: data-referrals does nothing any more. The person sees "Your place #148" when the line moves. Places 1 to 10 add "Among the first 10", and the total is never shown. When sharers get access, they see "2 more friends and you're in." instead. Then come the sharer's line, their link (the site's home page with ?ref=<code>, shown without https://) and a Copy link button. Nothing shows with data-next. Someone who signs up again sees it only in the browser that first joined.
• Share buttons. Under the link, one button per post in the share kit (X, LinkedIn, Reddit, Email) opens that site with the post filled in. The person's share image shows with Save image. It's 1200×630, with the share kit's headline and "I'm #148 in line for Loop" ("I'm on the list for Loop" when the line doesn't move), at https://app.hunchwire.com/e/<embed_key>/share/<code>.png. On hosted pages, a link with someone's ?ref= uses that image as its preview (og:image, twitter:image).
• Friends. A visitor who arrives with someone's ?ref= sees the offer above the form: "A friend invited you to Loop." and the friend's line. It shows only while referrals are on and the friend gets something. It never says whose link it was.
• Straight in. When friends get access and the project has a Let people in address, a friend's link lets them straight in. After they sign up, the form says "You're in." and sends them to that address with a token, like an opened invite. If the page doesn't move, a Continue button opens their invite link. They see no place, link or questions.
• Straight in by number. On a data-contact="phone" form, a friend's link lets them in without a Let people in address. The form says "You're in." and "Your friend's link got you in.", and stays on the page: there's no web sign-up by number. Use data-message to say where to text. Your product checks access when they first text (see the API).
• The first link wins. Every page keeps a ?ref= code in the browser until that visitor signs up, so a friend can land on / and join on /signup.

Use your own form with the API

1. Add <input type="hidden" name="visitor_id" data-hunchwire-visitor> to a form on a page with the script. The script fills in the visitor's id.
2. Add <input type="hidden" name="ref" data-hunchwire-ref> too. The script fills in the friend's code the visitor arrived with, or leaves it empty.
3. Send both to POST /v1/people from your server (see API). The sign-up then counts in Analytics with the visitor's channel, campaign and pages.

A link from one of the project's hosts to another carries the visitor across. The script adds hw_vid and ref to the link, and the page it opens drops them from the address bar. So a landing page and a join page on two hosts count as one visitor. The script tag lists the hosts as data-hosts, so paste the snippet again after adding a domain.