Developing with the Lite API
May 31, 2018
Let me introduce myself, my name is Johnny and I am the VP of Engineering at Rebel.
Most modern developers dismiss email issues to be dealt with at a later time. We know html/css, so how hard can email be to create and adjust? Then after we’re done with development of a POC or a Beta and on the verge of releasing, someone from our team reminds us, "Hey we need to send out blast campaigns for marketing or a welcome series!” and we say "Sure be right on that!”
So, we write some basic html/css (like we were writing a landing page) and send a test out and call it a day. The next morning, our inboxes are flooded with questions about why doesn’t the email render well on email client x, or work on my mobile phone y, or why isn’t it responsive on desktop email client z.
We rush around trying to figure this out. We search and find responsive email toolkits or templates—and that’s another entire layer of technologies we now have to worry about keeping up to date in our stack.
Are you stressed yet? Don’t despair, I’m here to offer an alternative.
What if you didn’t have to
- Worry about writing responsive html/css
- Finding out about all the email rendering client nuances
- Keeping templates up to date
Enter Static Components. Static Components allow you send a JSON request to a simple set of and receive fully formed html/css payload. You pipe that to your ESP and send like you normally would!
So how do I break all of this down and convert it into a payload to send? We think in components. We can break down every part of the email into multiple components and derive the style properties for each.
We can do that in a simple object signature:
All our emails are a recursive iteration of this simple object.
- The type tells us what kind of components were trying to render.
- The style is where we update the design properties of the component.
- The body is where we update the copy and content elements of the components
And if we want to nest more components inside the parent components, then we inject them into the components key.
Let me walk you through one of our welcome series emails, I received this png from our designer.
I dissect this .png into the logical components and write up the properties for each.
Then I start the flow of API Requests.
1. I authenticate into my Rebel Account in order to get an Auth Token
2. Create a Campaign
3. Update campaign with all the new properties
The data being this payload:
4. Export the HTML for my new campaign
Now, I just send through my ESP pipe and now I have a campaign template that is responsive and email client agnostic. I can fetch update the values every time I need to send a new one with just a simple request.
Have any questions? Contact email@example.com.