This tutorial walks through how to send a confirmation email to a user after they complete a sign up process. 

Here is a sample that demonstrates it in action: https://app.atomic.io/d/K4dJ2wHE81U6

The principle can be applied for the sending of an email based on any type of user action in a prototype. For example, you may like to send an email to a user in a forgotten password flow, or when they turn their notifications on. 

We use Zapier to send the email. It’s a web-based service that lets you to integrate web applications. Because of this, the principle of sending an email can also be applied to any other app in the Zapier suite, such as sending an SMS or updating a Google Sheet.
 

Step 1: Add variables to your project

First we need to add variables for the information we would like to capture in the prototype and then use in the email. 

In our example, we capture and use two variables:

  1. firstName
  2. emailAddress

If you have copied our sample prototype into your project, these variables would have copied across. 

If not, we need to add them now. From the tools panel, click the "Manage Project Variables" button (or press 'V') and add the variables exactly as they are above, then select "Save" to exit the modal.
 

Step 2: Connect your text inputs to the variables

Now we need to add text inputs and connect them to the variables we created in the previous step.

To create a text input, select the Text Input tool in the toolbar on the left, or press 'F'. 

Select the first text input and in the properties panel you’ll see an ‘Input’ section with customisation options. Set the ‘Content’ to ‘Use Variable’ and select the variable you would like to use.

Repeat this for each of your text inputs.
 

Step 3: Add the script to send a webhook to Zapier

We now add a script that sends a webhook on our trigger. Webhooks are automated messages sent from apps when something happens. 

In the example in this tutorial, our trigger is when the confirmation page loads. 

If you have not already done so, add a confirmation page to your prototype. This is the page the user navigates to once they have successfully completed the form. 

Related: check out our tutorial on completing a sign up form

Now add the script to your prototype. 

On the confirmation page, add a Timer page action to wait 0ms, which an action of Script Expression, then add the following script:

// add the data you’d like used in the email to an object
const dataToSend = {
  firstName: $p.firstName,
  email: $p.emailAddress
};

// post the data to the Zapier webhook URL
fetch("Paste your Zapier webhook URL here", {
  method: "post",
  body: JSON.stringify(dataToSend)}).then(response => response.json()).then(data => {
  // After Zapier responds, do these things:    console.log("Data sent to Zapier", dataToSend);    console.log("Response was", data);
});

You’ll replace the “Paste your Zapier webhook URL here” text in the following step.
 

Step 4:  In Zapier, add and send a catch hook

If you have not used Zapier before, first you’ll have to sign up for an account. Free accounts are available. 

Once you’re logged in to Zapier add a new Zap by selecting “Make a Zap”. 

Then search for and select “Webhooks by Zapier”.

Next, in the Choose Trigger step, select “Catch Hook”, then “Save + Continue”.

Press “Continue” leaving the “Pick off a Child Key” input blank. 

Copy the custom webhook URL, go back to the script in Atomic and replace the URL in the script that starts with “https://hooks.zapier.com/...” with this URL.

Be sure to keep the URL in the speech marks. For example, it should read: fetch("https://hooks… and not: fetch(https://hooks….

We now need to send the webhook to Zapier, to confirm the connection. To do this, open your prototype in review mode, and complete the text fields.

We recommend using your own actual name and email address, as this will make setting up and testing the webhook a lot easier in subsequent steps. 

Navigate to the confirmation page (to fire the webhook). 

Tip: In your browser you can open the Developer Tools, and navigate to the Console to see the confirmation message.

Go back to Zapier, and select “OK, I did this”. 

On the “Pick A Sample To Set Up Your Zap” screen, you’ll see the hook that you just pushed from Atomic to Zapier. It will be named something like “Hook A”. Select this and click “Continue”.
 

Step 5: In Zapier, send an outbound email

Now we need to add the action that will happen, when the webhook is caught by Zapier. 

In Zapier, on the “Choose an Action App” screen, search for and select “Email by Zapier”. 

Next, ensure “Send Outbound Email” is selected, then select “Save + Continue”. 

Now on the “Set up Email by Zapier Outbound Email” screen, you can set up who the email should be sent from and how it will look.

In the “To” field, select the “+” icon on the right of the text input, and select the email address from the catch hook. 

Tip: if you would like the confirmation email to be sent to another inbox every time, you can enter up to 5 email addresses in the ‘To’ field. 

In the “Subject” field, enter the title you would like your emails to have when they appear in users’ inboxes. For example: “Please activate your new account”.

In the “Body” field, construct your email message using data from your webhook.

For example, if you would like to send a plain (unstyled) email, paste the following code and customise it as needed:

Hi {{firstName}},

Thanks for signing up. Please activate your account by clicking the link below:

<a href="http://www.example.com/activate-account/">http://www.example.com/activate-account/</a>


Tip: if you’re sending a plain email change the “Force Linebreaks?” option at the bottom of the Zapier form to “yes” to preserve any line breaks you have in your message.

If you would like to sent an HTML (styled) email, paste the following code and customise it as needed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" style="background-color: #F5F5F5; margin: 0px;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body style="margin: 0px;">
<table style="width: 100%; padding-top: 40px; margin: 0px;" bgcolor="#F5F5F5">
  <tr>
    <td align="center" valign="top">
      <div style="max-width: 500px; background-color: #FFFFFF; border-radius: 5px; color: #474747; padding: 20px 50px 25px; border: 1px solid #e6e6e6; font: 400 20px/28px 'Helvetica Neue', Sans-Serif;" align="left">

        <p style="font-weight: 600;">Hi {{firstName}}</p>

        <p>Thanks for signing up. Please activate your account by clicking the link below:<br />

        <a href="http://www.example.com/activate-account/" style="color: #1EA9FE !important;">http://www.example.com/activate-account/</a></p>
      </div>
      <div style="max-width: 500px; color: #A7AEBC; padding: 20px; font: 400 13px/20px 'Helvetica Neue', Sans-Serif;" align="center">
        Sent from Atomic via Zapier
      </div>
    </td>
  </tr>
</table>
</body>
</html>

In the “From name” field, type who you would like the email to be sent from. For example, in our prototype, the email is sent from “Collective”. 

Select “Continue” and you’ll see a summary of what you’ve just setup. From here press “Send Test To Email by Zapier” to send a test email.

Now check your inbox. You may need to wait a few moments.

Back in Zapier, select “Finish”. 

We now just need to name the zap, and turn it on. We’ve named ours: “Confirmation email from Collective”

Finally turn the Zap 'on'.
 

Step 6: Test and share your prototype

You can now test and share your prototype, and when someone completes the form they’ll receive the email you just set up. 💥
 

Tip: you can see the previous times the zap has been sent in the “View Task History” in the top left of the Zapier screen or from the dashboard of your account. Here you can see the data that was received for each zap. 

To get a more detailed understanding of testing sessions, connect the prototype up to a Google spreadsheet to capture detailed analytics

Did this answer your question?