Improve Your Web App UX With Automated Emails
Tags: ux, webdev, javascript, frontend
Published: 2021-06-08 00:58:31

---
title: Improve Your Web App UX With Automated Emails
published: true
date: 2021-06-03 17:54:00 UTC
tags: ux,webdev,javascript,frontend
canonical_url: 
---

 ![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://onesignal.com/blog/content/images/2021/06/improve-web-app-ux-with-automated-emails-1.png)

Today, users expect companies to provide a seamless cross-channel experience. Email can help you deliver on those expectations and connect with users outside the bounds of your web application. In addition to being well-suited to both [transactional and marketing messages](https://onesignal.com/blog/choosing-the-best-communication-channel-for-transactional-marketing-messages/), email is an established and trusted communication channel.

Automating your email campaigns based on real-time engagement behavior and user preferences will help you deliver a personalized experience at scale. With OneSignal and SendGrid, it’s easy to send emails based on specific engagement triggers and criteria.  

Our [segmentation tool](https://documentation.onesignal.com/docs/segmentation/) also makes it easy to target specific subscribers and [personalize your campaigns](https://onesignal.com/blog/personalize-push-notification-best-practice/) to resonate with each audience. For example, you may want to send a welcome message to new users, or share personalized promotions or updates with disengaged users to encourage them to come back.

In this guide, we’ll show you how to integrate OneSignal with SendGrid to build email campaigns that are directly linked to your web app —  for free!

**Guide Overview**

- [Step 1: Set Up Your OneSignal Account](#step-1-set-up-your-onesignal-account)
- [Web Configuration](#web-configuration)
- [Step 2: Set Up Email Using OneSignal & SendGrid](#step-2-set-up-email-using-onesignal-sendgrid)
- [Step 3: Configure Your Email Prompt to Send User Email Addresses to OneSignal](#step-3-configure-your-email-prompt-to-send-user-email-addresses-to-onesignal)
- [Step 4: Send Your First Email](#step-4-send-your-first-email)
- [Debugging SendGrid](#debugging-sendgrid)
- [Quick Recap & Additional Support](#quick-recap-additional-support)

## Step 1: Set Up Your OneSignal Account

- If you haven't done so already, [create a free OneSignal account](https://app.onesignal.com/signup) or simply [login to your account](https://app.onesignal.com/login).
- Once you’ve logged in, set up your account by inputting the name of your app or website. 
- Select _ **Web Push** _ as your platform.  
<!--kg-card-begin: image-->

![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh4.googleusercontent.com/RcIG2DiRD1324r2FnMqGdWPPL-R-a4zHY8S1JerZNEox4HpczgyLHixKo5dPqApSpXe7P4a3HFv-43TMkbaw1P2Kc1RcdunpnQPYSHyV6yo3BekvHjWEyWUEi_RlzEVf3_hUqzBE)

<!--kg-card-end: image-->
- Then, click on the blue button _ **Next: Configure Your Platform** _.

### Web Configuration

- In the first setup step, select _ **Typical Site** _.
- Under the section entitled **_2. Site Setup_** , enter your web configuration. For our example, the config will look like the one in the picture below. Notice for testing purposes, we entered our localhost URL. If you are doing the same, make sure you click on the option **_LOCAL TESTING_**. This will ensure to treat _ **HTTP** _ localhost as **_HTTPS_** for testing.

![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh5.googleusercontent.com/55PW52PN9_Jw84QuokGjYEsdqeUWfE2Et6D3x1HaUYnF5Qkp8wjOp7qdz7qw1JZnfiKm4gkZRHAM3kf1kggGPc97kTHd35r4Uf_dKkh6cIiT2H4y-iMT3s1l7615mVj4hhvJ-EC-)

- Finally, scroll down to the bottom of the page and click **_Save_**.
- You will be redirected to a different page with a super important step: click **_DOWNLOAD ONESIGNAL SDK FILES_** and save them to your computer.


![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh4.googleusercontent.com/E8ikDiiBDv7ytuM_LRo4Pe7MePndbBXbnITz-pxkWDfyeuy87sL4fQlB7xR5vLZA91rcFVlQ9RhONT81AbW9NX5IgFNwyWae9OS1pWkJ9mdKNIk7kFiRNim2Poq05hkCcQkgPWd9)

- Under the section titled _ **Add Code to Site** _, you will see a grey button that allows you to copy the code snippet. Click on this button to copy the code and paste it into code into your **_index.html_**.
<!--kg-card-begin: image-->

![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh6.googleusercontent.com/bv5YUCUmmAHi60tQdDmK3x-2QuTaynhHvNR6YNmr9OMrCYKS8gYk3_Q7AeKjN7jMJBKMvOIdgedlHxZaNyE6UXnOWPP2m9pmKsz_gdAlSRxb-llUth1k8UGBt7NsgvSULG2bjl97)

- Click on the **_Finish_** button.

## Step 2: Set Up Email Using OneSignal & SendGrid

OneSignal and SendGrid have an integration that allows you to power your email campaign from your OneSignal app using SendGrid. SendGrid is a trusted email delivery platform and cloud-based solution that helps users send transactional and marketing emails to thousands of customers.

Follow the steps in [this guide](https://documentation.onesignal.com/docs/sendgrid-setup) to integrate your SendGrid account with OneSignal.

## Step 3: Configure Your Email Prompt to Send User Email Addresses to OneSignal

OneSignal's `setEmail` method will allow you to automatically assign a user's email address to their user record. View this [GitHub Web App Email Sample](https://github.com/OneSignal/OneSignal-Web-App-Email-Sample) for the final code you will need to set up the email prompt and associated tags.

- Back in your app, locate the **_index.html_** file — you will need to modify a bit of your JavaScript code.
- At the bottom of your `<script>` tag, create a function called `setEmail()`. Inside of that function, trigger a prompt to ask the user for their email address.
- Finally, inside of that function, use the `setEmail()` [method](https://documentation.onesignal.com/docs/email-quickstart#setting-the-users-email) of the OneSignal SDK to assign the email address you entered in the prompt to the current app user.

If you look closely at our example code below, you will notice that we are also using the `OneSignal.sendTag()` method to automatically apply the _**[user\_name](https://documentation.onesignal.com/docs/add-user-data-tags#user-names--preferences)**_ data tag to this record.

[Data tags](https://documentation.onesignal.com/docs/add-user-data-tags) are a **key:value** pair of string or integer data that you can add to your app code to identify a specific user event or value. They can be used to build audience segments based on real-time user behavior and preferences, to personalize message content, as well as to enrich your internal data system and provide more advanced analytical insight.

For our example, we are adding the `user_name` key, but you can add whatever information you want and as many tags as you need. For example, you can create a `country: USA` tag to segment users by country and create messaging campaigns that are tailored to users in the United States. To learn more about how to use data tags to automate and personalize your messaging strategy, check out our [data tag implementation](https://documentation.onesignal.com/docs/data-tag-implementation).

```
function setEmail() {
    const email = prompt("Please enter your email", "example@domain.com");
    if(email !== null) {
        OneSignal.push(function() {
            OneSignal.setEmail(email).then(function(emailId) {
                // Callback called when email have finished sending
                console.log("emailId: ", emailId);
                /*Creating a user_name identifier tag to be used in the email
                Example: OneSignal.sendTag("user_name", "devpato");
                */
                OneSignal.sendTag("user_name", "a_user_name");
    		});
    	});
    }
}
```
- Inside of your `<body>` tag, create a button that calls the `setEmail()` function.

```
<body>
	<button onclick="setEmail()">Set Email</button>
</body>
```

- Now run your app. After 20 seconds, you should see a prompt that will ask you if you would like to subscribe to notifications. Click **_Allow_**. Doing so will add you to the subscribed users segment.


![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh4.googleusercontent.com/FLpAUmk5fMRCH5srtmnlxjVwZ96gRVOPXVyI-Deugk3SSVmP9Cr-C1pbSNlZ-zPWpZ49UtiCGx1qi6996SkGBHYLBKyL5OW9DrDUQP9ilQqQEwfpX__Z6iYZSY1kfYtFO6tsHESX)

- A second prompt will appear that will ask you to allow your browser to receive notifications from your website application. Click _ **Allow** _ in this window as well.
- In your web application, you will see the button you created in the previous steps. Click on this button. The button will trigger a prompt that will ask you for your email address. The email entered will be sent to the OneSignal application you just set up. 

![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh4.googleusercontent.com/g1VqHDmd9ATC7gjSOWlHbN_NafX9MABLJYJa8GFapM05TLnCaSXghwcKSlrP0svf9pEBsQEWmzcAuK6RA05e5cy1qDmRA7Ix9iZwK0FfSAMfVXTCHYa9oyym3v4LYzRUZUB7S5tc)

If you open your browser console, you should see an `emailId` printed like the following:

`emailId:  a68d7469-1541-4f58-9d8e-cdc8529276d7`

- To ensure the email and _ **user\_name** _ tag have been correctly configured, navigate to your OneSignal dashboard, click on the _ **Audience** _ tab, then select _ **All Users** _ in the subnavigation menu. You will see a table of all your subscribed users. In the far right of this table, look for the columns entitled _ **TAGS** _ and **_EMAIL_** and make sure the values you entered are appropriately catalogued.

![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh6.googleusercontent.com/X6gA4sMkd6fC-mJ-Xu27tccRaHcXeZRKnFIBgY4SQI3GqpRsHQLwOcXZgUQSY8vFpv0AlXCFLNpqV1i6Kpb50B4VHURhMr7tP6LQJaEa3u3irw_eh9X82_Qp23XWBLllSbi3JakA)

Congratulations! You have successfully added a user email address into your OneSignal application. As more users subscribe to receive notifications, their email addresses will appear in this list. Now that your email infrastructure is set up, you can send emails to subscribed users and begin building out automated email campaigns for specific audience segments.

## Step 4: Send Your First Email

- Go back to your OneSignal dashboard and select **_Messages_** > **_Messages_** from the navigation menus.
- Locate the blue **_New Push_** button in the top right corner of your screen and click on the small white arrow to choose a different option. Select _ **New Email** _ from the drop-down menu that appears.

![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh3.googleusercontent.com/MieBveJSjCk8coPMZtcaif6FZQJ7jXuwCiuc2aW_Qvuq-Ycy3jCQsfF90q4PBS8geyaIDcIAxSBmnRRm96bGV_A9TdECYRa0i8Z9QY-r_VNuckJD2kSNObMkxfjhhnIG-QFxC2JP)

A **_New Email_** window will open where you will craft your first email message.

![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh3.googleusercontent.com/4l2MriAT9dl1zH2UBj7HsvHJvX6fmYqzCM8ff25_vL4UogRWgFkOXN0qXOBTQtgfXzcRt8ky1gHVJ5Qw5YjLHpSyO0dRgW8W42Lk13XDto92b_tjQD8_mcWDraUaApkXLkCqFdVy)

- Under the _ **1. Audience** _ section, identify the audience segment that you'd like to receive your email. _ ** ** _The **_Subscribed Users_** segment will be selected by default. As you add more data tags to your app and grow your subscriber base, you can build out custom audience segments rather than emailing all your subscribers at once. Because you are currently the only subscriber, it's OK to keep this default audience segment for your first test email.
- Under the **_2. Email Details_** section, make sure to enter a subject line, from email address, and from name. These values will be the same as the ones you entered in your SendGrid configuration.

![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh5.googleusercontent.com/iOf4Gc-Cw81JxJQKai0xIazisa-6YqS8dp9QW6CdG6noIaZXs8fBOR98QRqu-GRHLgXePKRII61jRUU8vlLAYLYNXFF4nOcv8b6JxuxSdfsEVPkXyOAcMhThsp1Q_YRU3xf0oDz8)

- In the **_3. Create Message_** section, you can personalize the email template to improve the user experience. 
- Make sure you are using the `user_name` tag as the template variable. Below is an example of how data tags can be used to personalize message content using our [tag substitution method](https://documentation.onesignal.com/docs/personalization). 

![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh4.googleusercontent.com/xUhgOhKaVaIOkENxvLfxEiriCH8M52SVFvufdc9f0xw3g9DgBJbfSj4TvjEY9QO-i4sLMrBVaXcPhdusNreTtV3HA4sAc14DW2peCOJ8_ndvkLIOCFdlb7S4bIhgyfdjks1leZ12)

- Under the **_4. Schedule section_** select **_Send Immediately_** and then click on the button entitled **_Confirm Message_**. 
- A popup will appear where you can review your message selections and the number of people that will receive this message. Make sure that it says 1 (that's you!). Then click **_Send Message_**.
- After sending the message, you will be redirected to the **_Delivery Statistics_** page of your dashboard. If you scroll down, you will see that your message has been delivered.

![How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application](https://lh4.googleusercontent.com/LPqBK-CXED7efHh6_QZPLtmyXgyu6kAFaf4ErSxM2aTKfmdXkX-kaffbnZlB9QUNF5ei4j6g23kKfgAo_E7u0WvXEk9X5sImpKY5xHqzgNTBChJSWyHiQwPYWVhqgLt36q13kmky)

### Debugging SendGrid

If your OneSignal dashboard indicates that your emails have been delivered but you haven’t received them, take a look at the [Activity tab](https://app.sendgrid.com/email_activit) inside of your SendGrid account. Select the appropriate date range and click the blue **_Search_** button to locate your email.

### Quick Recap & Additional Support

OneSingal and SendGrid work together to make it easy to integrate email into your application workflows in a seamless way. You can use email for transactional notifications to improve your app UX, to share special promotions and product updates, to re-engage users that have exited your app, and much more!  
  
If you are using emails in a creative way to improve your UX, we want to hear about it! Tag us in a Tweet **_@onesignal_** to share your amazing use cases.

Have questions or want help getting started? Reach out to us at **_support@onesignal.com_**.