Wasp•11mo ago

Need Recommendations

If i have a simple saas idea and wanted to design a landing page to collect emails, what email service should i use to then send a welcome and thank you email to the subscribers?

20 Replies

matijash•11mo ago

hmm seems you simply need a newsletter service for this case. I used mailchimp in the past, they have good free plan (up to 1k subs I think)

RyGough•11mo ago

MailChimp is an amazing tool. For a quick set up and generous free plan (much like wasp) I use https://www.sender.net/pricing/

Sender

Pricing | Sender

Spend less, do more. Simple, affordable pricing with no contracts, obligations or setup fees.

KillshotOP•11mo ago

Appreciate it, I will check them both out.

AAA•3mo ago

Do you all manually dump your database to a csv to find out who subscribed to your newsletter, or how did you that?

NEROX•3mo ago

For collect any kind of mkt data, store it, have some analytics, and have the possibility to do after submit custom actions or send the info to any API, I used in my last company, if you want a really good form maker, I used https://codecanyon.net/item/easy-forms-advanced-form-builder-and-manager/14176957 It's a PHP script that needs to be runing in a Linux machine, I had it for example in doker with the $7 machine. You just build any kind of form, multistep, whatever you want. Save it and copy the embed code and done. Actually I will use it maybe with my Wasp App, instead of building my own forms and logic with tailwind or whatever. You can also sync it with GTM so in MKT terms you can track any potential action like.... idk: subscribed_newsletter, subscribed_waitlist, filled_demo_form, or any kind of action in GTM with Analytics

CodeCanyon

Easy Forms: Advanced Form Builder and Manager

Easy Forms: Advanced Form Builder and Manager Easy Forms is a full-featured, easy-to-use, online form builder tool that speeds up the form building process – so you can finish your online forms fas...

NEROX•3mo ago

I could share the source code because I had purchased it with the original license I could call it the Typeform Killer Just pay the machine, no data limits:salute_right:

AAA•3mo ago

Oh perhaps this is different that what I mean, the user has newsletter activated by default, or subscribes to the newsletter. I should somehow make a newsletter campaign and send email without having to do to work in the email.ts file that comes via wasp or? I think that's a bit low level. Defining the html there and sending it via a job Also keeping track of newsletter unsubscribe and so is not things I've thought about

NEROX•3mo ago

I don't remember if It had the option to send email afterwards. What happens at this point is that here two parts come into play at the MKT level: the data collection (storing it), and the subsequent actions (sending email). This is where 2 different types of tools come into play. Newsletter tools (like Sendrid, Mailchimp...etc). And CRMs, such as (the best known): Hubspot, PipeDrive, SalesForce, etc.... In our case we decided to go for Customer.io. It is a platform that allows you to store MKT data, create segments, email flows, newsletters, unsubscribe, different types of newsletters, filters, etc... We chose this one mainly because of the great capacity of personalization it has, (CRMs and Sendrid had many limitations unless you paid more and more). But the “negative” point is that by letting Customer.io allow you to do whatever you want, it is up to you to check that it works well. But for example to give you an idea of some examples that we integrated with EasyForms and Customer.io: We had different landings pages with EasyForms forms, We used EasyForms to store the information of the forms, We sent it to Customer.io and with hidden fields of the EasyForms forms (yes, you can) we had several workflows with different actions depending on the conditions of the data we stored from the user. In other words, we could send you a personalized onboarding email flow based on the landing page you register.

AAA•3mo ago

Hmm still I think we're going down two paths, simply put how do you interact with your database and sendgrid to send emails and newsletters? You could define html and send that in wasp, but I find that rather low level

NEROX•3mo ago

I think yes, the main question talks about "collect emails" and "send a welcome email". From my POV (MKT profile, non-dev) they are two different things. I also think that the easiest solution will define a simple html (with any email template or not) and just send with wasp

AAA•3mo ago

Mmm I don't think I agree, your website is great -- you're definitely a developer now! Also, the defining an html and so I don't think is clean, but maybe that's the way to go for the start. Claude is pushing down the path to use react-email which I guess I will use, but I really don't like the idea of making email campaigns in my codebase - I don't think it's a clean situation. at anyone who is interested, react- email is actually a great substitute rather than pasting pure html in your code. The emails.ts is a bit annoying as the email only accepts a Promise, but got it to work by this code

import { type GetVerificationEmailContentFn, type GetPasswordResetEmailContentFn } from 'wasp/server/auth';
import { VerificationEmail } from './templates/VerificationEmail';
import { PasswordResetEmail } from './templates/PasswordResetEmail';
import { render } from '@react-email/render';
import React from 'react';

let VERIFICATION_TEMPLATE: string;
let PASSWORD_RESET_TEMPLATE: string;

// Initialize templates
Promise.all([
  render(React.createElement(VerificationEmail, { verificationLink: '{{VERIFICATION_LINK}}' })),
  render(React.createElement(PasswordResetEmail, { passwordResetLink: '{{PASSWORD_RESET_LINK}}' }))
]).then(([verificationHtml, passwordResetHtml]) => {
  VERIFICATION_TEMPLATE = verificationHtml.toString();
  PASSWORD_RESET_TEMPLATE = passwordResetHtml.toString();
});

export const getVerificationEmailContent: GetVerificationEmailContentFn = ({ verificationLink }) => {
  if (!VERIFICATION_TEMPLATE) {
    throw new Error('Email template not initialized');
  }
  const html = VERIFICATION_TEMPLATE.replace('{{VERIFICATION_LINK}}', verificationLink);

import { type GetVerificationEmailContentFn, type GetPasswordResetEmailContentFn } from 'wasp/server/auth';
import { VerificationEmail } from './templates/VerificationEmail';
import { PasswordResetEmail } from './templates/PasswordResetEmail';
import { render } from '@react-email/render';
import React from 'react';

let VERIFICATION_TEMPLATE: string;
let PASSWORD_RESET_TEMPLATE: string;

// Initialize templates
Promise.all([
  render(React.createElement(VerificationEmail, { verificationLink: '{{VERIFICATION_LINK}}' })),
  render(React.createElement(PasswordResetEmail, { passwordResetLink: '{{PASSWORD_RESET_LINK}}' }))
]).then(([verificationHtml, passwordResetHtml]) => {
  VERIFICATION_TEMPLATE = verificationHtml.toString();
  PASSWORD_RESET_TEMPLATE = passwordResetHtml.toString();
});

export const getVerificationEmailContent: GetVerificationEmailContentFn = ({ verificationLink }) => {
  if (!VERIFICATION_TEMPLATE) {
    throw new Error('Email template not initialized');
  }
  const html = VERIFICATION_TEMPLATE.replace('{{VERIFICATION_LINK}}', verificationLink);

I made an admin page where you can see the email template you use, before you send them. This has the benefits of react-email and of sendgrid's analytics

KillshotOP•2mo ago

This is really good. Will definitely use this in future.

MEE6•2mo ago

Wohooo @Killshot, you just became a Waspeteer level 9!

miho•2mo ago

Sweet! I'd be interested in seeing how the actual admin panel looks like 🙂 Maybe we can support React Mail in Wasp out of the box at some point.

AAA•2w ago

for others using this way -- which I highly recommend! TEST your emails before you send them, for an unknown reason a null character was being inserted into my email which made it appear blank Do this!!!

    // Clean the HTML content by removing null characters
    if (emailContent.html) {
      emailContent.html = emailContent.html.replace(/\x00/g, '');
    }

    // Clean the HTML content by removing null characters
    if (emailContent.html) {
      emailContent.html = emailContent.html.replace(/\x00/g, '');
    }

Cursor/AI can then help you design pretty marketing emails and you don't need to use an external marketing way.

matijash•2w ago

That's a good point, thanks for sharing! I wouldn't have thought of the null character. Do you think it was AI that accidentaly inserted it, or sth else?

AAA•2w ago

Interesting idea, I am looking at my template investigating if there are any and don't see anything, you must be right though! Not like I'm going to add that character anywhere. Too much Cursor!

yalcinos•4d ago

Hi all, I have one question 🙂 I would like to use Resend with React-Email library. Resend have really generious plan and it is really easy to use for developers. Is there any way to override default email provider and inject Resend?

miho•3d ago

@yalcinos it would be better if you asked this as a new question, you'll get our Kapa AI to answer as well I'd suggest reading on using an SMTP email sender (if Resend supports it) https://wasp-lang.dev/docs/advanced/email

Sending Emails | Wasp

With Wasp's email-sending feature, you can easily integrate email functionality into your web application.

AAA•2d ago

I mean both sendgrid and Resend do the 100 emails a day I don't see the plus there tbh

Gaming

Programming

Need Recommendations

Did you find this page helpful?