Have you ever received a "We've missed you" email from your favorite stores, food delivery apps, and other websites? The email usually contains a button that redirects you to their site. However, you would then be asked to login and some of you stopped there because you are asked to enter your password and it made you re-think why you visited the website in the first place.

Stores, food delivery apps, all website owners: authenticate your users seamlessly with Cotter and decrease drop-off rate!

What we're building

In this tutorial, we will create a food delivery app marketing email. We will include button links in the email in which the user will be redirected to the restaurant's order page at the food delivery app's website (designated page). We will use SendGrid to send the marketing email and Zapier to connect SendGrid and Cotter.

When you integrated Cotter to your site and a user logs in using Cotter Login Form, Cotter will immediately create a new user for you. This user is stored in Cotter's database and can be accessed through our Zapier integration. Using Zapier, you automatically send marketing emails to the user via email marketing tools like SendGrid, MailChimp, etc. The user data that are available are defined in the documentation for User object.

Website Setup

Create a simple public-protected website. We want users to login in order to access the protected page (in this example, the protected page is the restaurant's order page).

Remember that you can always make a website without any code! Follow the tutorials below:
Webflow: https://blog.cotter.app/integrate-cotter-magic-link-to-webflow-in-less-than-15-minutes/
Bubble: https://blog.cotter.app/bubble-vip-page/

Zapier:

  1. Add Cotter Zap using this invite link: https://zapier.com/developer/public-invite/116551/4631eb564ecce1c57f7fe88aa8c90671/.
  2. Click "Make a Zap".

Cotter Zap

  1. Under "When this happens ..." choose "Cotter" and let the trigger be "New User".
  2. Enter your API Keys as instructed. You can get your Cotter API Keys from Cotter's Dashboard.
  3. Find Data to see a test data.
  4. If this is a new project and you do not have a user yet, you'll see "We couldn’t find an user". Create a new user in your  Cotter (1.0.0) Zapier - https://zapier.com/ account and test your trigger again.
  5. Try logging-in into your website's "Cotter Login Form" located on your login page. Use an email address that you have access to. Once the login is successful, Cotter will automatically create a new user.
  6. Test the integration again.

Delay

  1. Under "Do this ...", choose Delay.
  2. Choose action: "Delay for".
  3. You can customize the delay period. For this tutorial, we will use 30-day delay.

SendGrid Zap

  1. Under "Do this ...", choose SendGrid.
  2. Choose action: "Send Email".
  3. Go to SendGrid > Settings > Teammates.
  4. Add a teammate.
  5. Login to your SendGrid teammate account by entering your teammate email and password.
  6. Fill in the rest of the fields. In the "To", select "1. identifier (email or phone): [email]".
  7. Edit the "From", "From Name", Reply To", "Subject", and "Text" or "HTML".

6. Click "Continue" and then "Test & Review". You should see a row of record added to your Table.

7. If it succeeded, you can turn on the Zap and it will insert new users to your Table. (Zapier will check for new users every 2 minutes, please be patient when testing or click Run to fetch the data).

That's it!

You can now create a marketing email with seamless login, without any code!


Questions & Feedback

Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter's Slack Channel.

Ready to use Cotter?

If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.

If you need help, ping us on our Slack channel or email us at [email protected]