Creating an Email Notification

This guide will help you create an Email Notification to send a welcome email to a newly signed up user.

Requirements

To follow the steps in this tutorial, you should understand the concept of notifications. You'll also use the sign-up form you created in a previous tutorial.

• Form Configuration
• Notifications
• Creating a Sign Up Form

Steps

Creating an Email Notification is a two-step process:

Step 1: Create Email Notification

app/emails/welcome_user.liquid

---
to: '{{ form.email }}'
from: 'Example Marketplace <info@example.com>'
reply_to: no-reply@example.com
subject: 'Welcome {{ form.first_name }} in our marketplace!'
layout: mailer
---
<h1>Hi {{ form.first_name }}!</h1>

<p>Welcome in our marketplace!</p>

Step 2a: Invoke notification directly via GraphQL email_send

mutation notify($data: HashObject) {
  email_send(
    template: { name: "welcome_user" }
    data: $data
  ) {
    errors { message }
    is_scheduled_to_send
  }
}

All parameters provided via GraphQL as the data argument will be accessible in every Email Notification property as a data variable (or form to make it compatible with Form).

This is how you can prepare the data HashObject for this mutation:

{% parse_json data %}
{
  "email": "RgnlMngr.MichaelScott@DunderMifflin.com",
  "first_name": "Michael"
}
{% endparse_json %}

{% graphql notify = 'emails/welcome_user', data: data %}

Step 2b: Connect notification to sign up form

Edit the forms/developer/sign_up.liquid file to associate this email with it. The email notification name is a path of the file relative to the emails directory, without extension.

For app/emails/welcome_user.liquid - the bolded part is the name (physical_file_path).

resource: User
email_notifications:
  - welcome_user

Now, when you submit the form, the newly registered user should receive the email.

Please note: if you are working on a staging environment, you also need to configure a test email, because we intercept all emails on staging to avoid spamming real users during tests.

Next steps

Congratulations! You have created an Email Notification. Now you can learn about using email layouts.

• Using Email Layouts