A simple email capture page for "coming soon" projects
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 25 commits ahead, 5 commits behind FrozenRidge:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
.gitignore
README.md

README.md

Meteor-coming-soon-email-capture

This project merges a popular ruby on rails project with a meteor sample app. Its sole purpose was to give me a reason to check out Meteor and improve my javascript skills, but hopefully you can find value in it.

The goal of this project was threefold:

  1. To provide a simple "coming soon" landing page with an email capture form (like the old LaunchRock) that integrates with Mailchimp.

  2. Improve the signup experience by using the Mailchimp API instead of the standard Mailchimp embed code (requires server side code to hide your API keys). We'll make an AJAX call to the API, and upon success provide a simple "thank you" message in-app (instead of a jarring redirect to a Mailchimp success page).

  3. Host it for free.

UPDATE (Dec 2014)

Upgraded to Meteor 1.0.2.1 & added iron-router. Note: Check out the alanning:roles package for an updated (and more secure) way to handle the isAdmin function.

Screenshots

Landing Page Error State Success State

Changes to original meteor app

  1. Emails submitted will also be added to a Mailchimp account (in addition to the db), using double opt-in.
  2. Added Twitter Bootstrap and a freely-usable placeholder design.
  3. Admin functionality has been removed from the main page and placed on a separate admin page, accessible only by navigating directly to /admin (e.g. localhost:3000/admin).
  4. Uses iron-router instead of the old meteor-router package

See original README for further details on the app. The fine folks at Frozen Ridge also put together a great blog post detailing how they built the app.

Notable TODOs:

  1. Hook up Mailchimp via API
  2. Add API keys via settings.json
  3. Security review & double check (!!!)
  4. Better error handling from Mailchimp API
  5. Documentation + finish "getting started" tutorial

Wishlist:

  1. Custom "thank you" landing page (after user clicks the email confirmation link)
  2. Move Github admin login button to a second page, accessible via an admin link on the main landing page (COMPLETED)

Getting started

Note: I'm a beginner, and these instructions are intended to help other beginners get up and rolling quickly.

You need to have Node.js and Meteor installed.

Node

I use Homebrew and found this tutorial helpful.

Meteor

Install Meteor:

curl https://install.meteor.com | sh

cd into the app

cd what/ever/your/path/is/meteor-coming-soon-email-capture/app

Start Meteor

meteor --settings settings.json

Open the app in your browser

http://localhost:3000/

Usage

  1. Insert your Mailchimp credentials These are located in settings.json.example. Be sure to save the new file as settings.json (e.g. remove the "example" extension). Note: Here's how to find your API Key, and here's how to find your List ID.

  2. Load your settings.json file meteor --settings settings.json Notes: (a) Be sure meteor is not already running. (b) If you're going to deploy this to meteor's free hosting (i.e. yourappname.meteor.com), don't forget to load your settings.json file upon deploy as well: meteor deploy yourappname --settings settings.json

  3. Change default admin usernames Located in app.js - line 6

var ADMIN_USERS = ['someusername', 'anotherperson', 'howaboutathird'];

Enter your github username

That's it. Add your email to the form and hit submit. You should receive an email confirmation from Mailchimp if all is well.

Note: Error handling from Mailchimp responses are NOT hooked up yet, so if you test using test@example.com, it'll write to the db but Mailchimp will throw an error (Mailchimp doesn't like anything@example.com).

Disclaimer

This code is provided "as is" with no warranties. It'll probably break and may expose your api keys and all of your customers' email addresses. Proceed with caution.

License

Do with it as you wish, commercial or otherwise. If you like formal licenses: Copyright (c) 2013 Chad Kruse, released under the MIT license.

See original meteor app for licensing covering their work (github login, add email form entry to db, etc.)

Credits

Original meteor app and awesome tutorial was created by niallo and peterbraden of Frozen Ridge.

This gist from nachiket-p helped me understand how external API calls work in Meteor.