Let's assume you are running a series of webinar and live streams and you need to email the registrants to make sure your event remains at top of their mind and they are likely to attend at the day of the live event.
In the last couple of years I have used multiple marketing and event hosting platforms - GoToWebinar, MeetUp, Eventbrite. These platforms leave you wanting for a centralized platform to communicate with all your attendees.
Most email tools will sport some form of lead capture form followed by an email automation to send a series of email as soon as an email ID is captured, however these ready off the shelf tools are not the most practical choice as they fail to meet your unique requirements:
- Perhaps you want a Slack notification every time a user registers
- You want to know whether it is a returning lead or a new lead or an existing customer
- Based on certain criteria you want to configure the messaging that's sent out to the user (dynamic field in email template)
- Create a personalized user interface to send out emails
- Add custom filters to segment leads
- Look through the lead's activities on your website and so on.
Collating all the leads in a CRM is important and so is engaging them via a common platform, hence I decided to build a email communication tool. You can use this custom CRM-like tool as your central platform of communication with attendees, where you can send out invites to your CRM contacts or leads, and connect with new leads that you've collected from the event (or any other source).
Building the Email Sender App
In this post, I will walk you through building an email manager tool on DronaHQ that accomplishes sending a bunch of easily customizable emails—fast. It’s a simple front-end app on top of a data source, which in my case is DronaHQ Sheets, but it very well can be Google Sheet or Airtable or any other kind of database. The app will read the contacts list from the data source and allow you to send out emails to different people on the list.
To get started, sign up for a free DronaHQ trial here
1. Designing the UI for the Email Tool
I will start off with a new app and give it a name. From there, we are taken into the DronaHQ builder, where you’ll see on the left hand side a bunch of UI controls that you can drag and drop to start laying out your user interface.
I'll start building the UI by adding:
- Table Grid control for our registrant data and
- Detail View controls which will serve as our email manager area
(Note: I later added to Container control for a more aesthetical UI and moved the Table Grid and Detail View Control inside the two Containers)
To have a useful container for sending emails, I’ll need inputs for fields like “To”, “Subject line”, email body, and, “Send” button.
So, to see the general detail let's configure the detail view.
In the table on the left I can see a list of email where I can use custom filters and search through the list.
Let's set up the right hand side panel first.
On the right hand side panel I have:
- A detail view control
- A dropdown selection menu to pick from existing email templates
- A text box to enter Subject Line for your emails and
- A rich text editor section to configure and send email
Next I'll bind the data to read and interact with on the frontend:
To begin with, I am using a sample data set stored in DronaHQ Sheets. In the UI Builder, I can directly select Sheet name from a drop down menu and select the columns that I need to display the information from.
See how to Get Data from:
Binding data to the Table Grid to view list of emails:
Binding data to the Detail View to see user attributes
Here, I will need to add a filter to view the selected user details
I will also configure the drop down and bind it to a repository of email templates:
The field Subject Line and Email Body will be also use the same formula as the above field (Email Template), however, I will add a filter to get the subject line and email from the template selected. Since the fields are not read only, I can edit both the fields to personalize for indivisual user I select.
2. Adding your SendGrid account to the Email Tool
This step will require integration to email tool like Gmail or SendGrid.
To integrate with SendGrid head over here >
You can also add variables to use in your email body such as firstname, company name, etc.
With the SendGrid connector Ready to go, let's configure how I will shoot out the emails to our recipients.
To start off, I'll drop a button 'Send Email' followed by adding an Actionflow.
3. Configuring Front-end Logic to Send Emails
Next up, setting up the Actionflow.
Refer this link to see how you can set up front-end actions for a bunch of events like button click, value change, hover, and more.
I’ll also have a success or failure notification set up to show after each email sent, so that I don’t send duplicate emails. In order to do this, I’ll add two toast messages, one for each branch after the SendGrid action:
This tool is set to send messages manually to individual accounts.
Let's add filters to user list:
4. Perfecting the tool with JavaScript
There are multiple ways you can use JS to customize this tool further:
- You could modify the batch of email IDs based on what segment the event registrant is in: for example, a free sign user or a newsletter subscriber, or paying customer
- Build out specific email templates to help engage more personally with different users
- Change the style and colors of the app to be more visually appealing
- Automatically log email sending activity back to the Google Sheet and create alerts if the user has already been emailed
- Create batches to send off emails in batches
To send emails to a bunch of users in one go, I have written a JSON to:
- Apply selected filters to our list of users, and
- Create batches to send emails via SendGrid.
If you enjoyed reading this, do share your feedback or your questions in the comments below.
This Email tools was built on DronaHQ. Start your Free trial now >
Top comments (0)