Programmatic Messaging with Customer.io

Everett Berry
7 min readSep 23, 2022

--

Password resets, newsletter subscriptions, sharing, and download links — there are dozens of reasons to get an email from a product company. Arctype used to rely on 3 different services to message users. Now, Customer.io takes care of everything. Since the migration, Arctype has sent a little over 100,000 messages through Customer.io.

Advantages of Customer.io

Customer.io is “an automated messaging platform for tech-savvy marketers who want more control and flexibility to craft and send data-driven emails”. The basic pitch is that the growth team can build complex flows for messaging without dipping into engineering time. Such time is of course better spent on making performance improvements and building new features.

As you’ll see below, when someone signs up for Arctype with an email — you can also sign-up without one — the welcome email they get about connecting their database or using the dashboarding tools is tailored to what events they have performed. If a user has already created a dashboard in Arctype, there is no need to send them an email to tell them how to do that! This makes for a better experience for users and ironically generates less emails.

But the real power of Customer.io is that it does not just handle programmatic messaging. It also includes a full suite of tools to design a newsletter for everyone, send a password reset email or other account email, and submit a form to signup for the newsletter.

Integrating Customer.io into the Arctype SQL GUI

There are three main features in Customer.io: campaigns, transactional messages, and broadcasts. All of these are used through the various APIs available. But Customer.io is also integrated into the event stream of the desktop SQL editor using the Customer.io Node.js client. To do this, initialize the library and add a few helper functions for transactional emails:

The integration of the Customer.io Node.js SDK into Arctype

Take special note of the `sendMailFromObject` function, this will be heavily used for transactional messaging. Additionally, for information about what telemetry is reported, see the Arctype security page.

Passing events to Customer.io

In the code above you can see this implemented. For a new user that registers, we will create a People for them. Then events like sharing workspaces will get passed on. Notice that we don’t send every event with a blacklist that does have to be updated by the engineering team. With such a setup, the growth team can build messaging flows as new features get added to Arctype, as long as there are events available about them.

Campaigns

The first feature category to cover in Customer.io are campaigns, sequences of emails with boolean logic and triggers.

Onboarding drip campaign

Once a user has signed up, we know there are some features they should know about that will make their experience with Arctype better. An initial email has links to the Arctype docs page and the Arctype Discord where they can get into the community. Then there is a delay to give the user a chance to use the product!

The most important actions are to connect a database such as Postgres, MySQL, or SQLite and run a query. Following that, ideally users explore the chart building and visualization tools and invite their teammates to the workspace so everyone can collaborate.

The top half a campaign — the logic can get quite advanced!

The diagram above represents a portion of the onboarding campaign. Incredibly, no engineering cycles were used for this! It can also be modified based on new features in the product or changes in usage patterns. The orange boxes represent time delays — to give users a few days to try things. The green boxes represent events. In the middle you can see “Connected DB?”. This is an if/else where there is no need to annoy a user with a message about how to connect their database if they have already done it.

Every email from Arctype (except something like a password reset) comes with a global unsubscribe. Additionally you can use Arctype completely without an account, ensuring you will not receive emails of any kind.

Submitting a form for tool access

Complimentary database tools drive users to Arctype. One of the most popular is an Entity Relationship Diagram (ERD) template built in Figma. An ER Diagram is a design tool that helps database engineers lay out their schema before going and creating tables and columns.

Using a custom form as a trigger for a campaign

Recently, Customer.io added a feature to capture form submissions as the trigger event for kicking off a campaign. Unlike the campaign above, this one is very simple — just one email. It sends the submitter a Figma link that they can duplicate to build their own ER Diagrams.

On these campaigns, no one will ever open 100% of the emails they get. For this specific campaign there is a high open rate, but it could be higher if we sent a reminder email to folks who never opened the email. If you have signed up for early access to a product but not followed through when access was granted, you may have seen this flow in action.

Transactional

The second type of messaging in Customer.io is called transactional messaging. These are utility messages that are core to the function of the product. An example would be a text from Uber saying that your driver is arriving.

Shared queries and collaboration emails

In Arctype you can easily share queries and dashboards by email. This means the other person has to know about the share. Transactional messages take care of that.

Examples of transactional emails in the Arctype dashboard

Remember `sendEmailFromObject` in the Setup section? The function call is used here to hit the transactional API and build a URL for the query that a different Arctype user can access.

Sending a transactional email with a URL to a query to a new or existing user

Password Resets

As another quick example: here is the classic password reset using Customer.io. Arctype handles generating the URL separately code has to do things like make sure it expires, cannot be used multiple times, and so forth. But then all that is needed is to tell Customer.io to send transactional email 7 to the proper user.

Password reset email in Node.js using Customer.io

Arctype is a desktop SQL GUI. It works across Mac, Windows, Linux, and the web. Two platforms it does not work on? iOS and Android. Of course many visitors hit the blog or landing page on their phones, and it made sense that some hook could capture this interest.

https://arctype.com as seen on a phone, with the mobile download link showing

Enter our mobile download transactional email! At this point you can probably imagine how `sendEmailFromObject` is used on the backend to drop a link to Arctype in the user’s inbox. So let’s look at the frontend code behind that button.

The React component which posts an email to our server to send to the user

Pretty much what you would expect here. The code captures the email, sends it along to the backend, and from there tells Customer.io which transactional email to send and to who. This is one of the best converting flows.

Broadcasts

Broadcasts are a Customer.io feature for when you need to message everyone, or a large segment of people.

The Arctype changelog as a newsletter

Arctype ships a new version almost every week, and most months see new types of databases and new useful GUIs added. To keep our community up to date, we manage a newsletter that is mostly about our progress on the tool but also contains links to blogs and the occasional meme.

A series of broadcasts in the Arctype dashboard

If you unsubscribe, you don’t get it. Otherwise every few weeks there is an update on new features and bugfixes.

There are handy templates for creating nice looking emails, but over time it became clear that plain text emails were effective. Rendering HTML emails correctly across every email client is a nightmare, although tools like Parcel can help get the formatting right. For the Arctype newsletter, there is a layout and then the email is drafted in Google Docs, reviewed, pasted in, and sent! Sometimes there is a special blast, for example when Arctype launched on Product Hunt last year.

Newsletter subscriptions

For many products, users may prefer to learn more information and hang around in the community before diving in. The changelog is a homebase for these folks, and Customer.io is used to direct their subscriptions.

Subscribe to the changelog on the Arctype blog

You previously saw how the Node.js SDK was used to do programmatic messaging from within the SQL client. On the Arctype blog the Customer.io Javascript SDK, which is a purely frontend SDK, comes in handy for registering events and people.

Website frontend code to intake a new newsletter subscriber

Initialize it as described in the docs and then grab the email from the old mailchimp form (hacky) and then use the identify function call to create a new email. There is a chance that someone entering an input to this form would already have an email in the system. A best practice is to use the user email as the ID in your workspace.

Conclusion

It feels like we have come a long way with email. Customer.io handles low level, API based messaging and newsletter broadcasts to ten of thousands of people for Arctype. Not to mention, the architecture of sending most events to customer.io meant that engineers rarely had to step in for changes. In fact, the growth teams has done multiple updates on the email templates and adjustments to the campaigns without engineering even knowing! This means the growth team and the entire company can move faster. Here’s to the next 100K messages!

--

--