Send Welcome Emails with SendGrid and UserApp


Posted on

sendgrid-userappThe following is a guest post from Timothy E. Johansson at UserApp.

So you wake up in the middle of the night with this awesome idea of Instagram for hipster cats. What do you do? You throw yourself at your laptop to start working on it before anyone else gets the same idea. Do you start by configuring your email server? No. Do you start by building the user authentication system with a nice GUI to manage your future users? No. While still half asleep, you most likely start with the core idea — the thing that makes your app unique.

That’s why you read this blog, you don’t want to mess with email servers and deliverability, you want to leave that with SendGrid. And you don’t want to spend time on user authentication and user management, something that you’ve already done 100 times over.

But you still want people to be able to sign up and log in to your app. And they will forget their passwords so you need to handle that. You also want to offer the option to sign in with Facebook. You want to have different price plans and charge your users. You want to sync your users to an email list. And of course, you want to greet your new users with welcome emails.

UserApp can take care of all this, and with the SendGrid add-on you can send welcome emails to your users without even writing a single line of code. In this blog post I’m going to show you how to use UserApp and SendGrid to create a simple sign-up form and automatically send out a welcome email to every new user.

Awake yet? Let’s get to it.

Make sure that you have both a SendGrid and a UserApp account. Both are free to get started with.

The sign-up form

Create a nice sign-up form, like this one made with Bootstrap:

As you can see, this form invokes the method signup ( ) when submitted. Let’s write that function…

Connect it to UserApp

First we need into include the JavaScript SDK. Add this script to your head tag:

<script src="https://app.userapp.io/js/userapp.client.js"></script>

Then initialize it with your App Id:

UserApp.initialize({ appId: "YOUR_APP_ID" });

And last, create a method called signup and call UserApp.User.save( ) to sign up the user:

Sending email with SendGrid

UserAppExample

Now to the fun stuff. If you’ve tried to sign up, you may have noticed that you didn’t get a welcome email. Let’s fix that.

Activate the Add-on

Browse to Add-ons in the UserApp Dashboard and activate the SendGrid add-on. This will make it appear in the menu, click on it there or click on the cog on the add-on.

Write the email

Great, now you can activate the emails you want UserApp to send with SendGrid. For this tutorial, activate the Welcome Email.

You can choose to write a new email or keep it as it is. The default format is markdown, but you can also write your email in HTML.

To personalize the email, use mustache to insert user specific fields from the user profile.

When you’re done, click Save.

Configuration

Click on Settings below the different email types. This will bring you to the settings page for this specific add-on.

Enter your own sender name and email by clicking on the fields. Also enter your SendGrid username and password.

When you’re done, click Save again.

Try it out

Try to sign up again and verify that you get the welcome email.

Awesome! You just created a landing page for your cat app without worrying about user management or email servers. Grab a well-deserved coffee and continue working on the stuff you want to build.

To find out more of what UserApp can do, have a look at the documentation.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>