Hi there,
So sorry for the delay in getting back to you - I haven’t been working on my application for a while (day job got in the way) and this completely slipped my mind.
For context, the application I’ve built allows users to post classified ads (called ‘Notices’) to the platform. Each week, we send out a ‘This Week’s Notices’ to all of the subscribed users. The process of selecting the Notices is done manually, but most of the heavy lifting is handled by Bubble, Zapier and then sent to our users through MailChimp (though I’m sure you could do something similar with SendGrid).
Here’s how I did it:
SECTION 1. BUILD THE ‘EMAIL MAKER’ IN BUBBLE
I’ll keep this part light as you will probably have your own way of doing this, but you essentially need to:
- Display a list of all Notices in a Repeating Group
- Have a means to select the Notices you want to add to the email (I added a ‘SelectedNewsletter’ field that is toggled when you click on the post in the list)
- Have a means to assign an ID to each email campaign (I created a new Type called ‘Newsletter’ which has a single field ‘ID’, and added a ‘Nwz ID’ field to my Notice Type)
- Have a means to select how many Notices you want in the email (this can’t be dynamic because of how we build the email - covered below) so in my case you can chose between 3, 5 or 10 Notices in the email
- Have a ‘Send’ button to trigger the Workflow
Here’s mine (notice the dropdown at the top for part 4):
You then select the Notices you want to add to the email, which brings up a floating carousel with the ‘Send’ button.
When Send is clicked, it shows a ‘Confirm Send’ in an overlay. Clicking this triggers the workflow.
=================================================
SECTION 2. SET UP THE WORKFLOW
When the user clicks ‘Send’, it triggers the following Workflow:
The important parts are:
- Step 2 - Create a new Newsletter
This creates a new Newsletter entry with a RandomString ID:
- Step 3 - Make changes to a list of Notices
This sets the ‘Newsletter’ field of the selected Notices to the ID generated in Step 2
- Step 4 - Trigger 3x Zapier zap
This triggers the ‘Zapier zap for 3x Notices’. I set an ‘Only when’ for when the dropdown at the top of the email builder is set to ‘3’. (The other two Zaps only trigger when the dropdown is set to 5 or 10 respectively).
For more info on using Zapier with Bubble, check out the Bubble resources here.
I’m sending two bits over to Zapier:
- Text 1: This uses the (now not so!) new ‘:format as text’ operator
- Text 2: This is just the ID created in Step 2, which I also pass to MailChimp so I know which campaign is which (I put it `
Text 1 has two parts:
Search for Notices - Which just searches for all Notices where ‘Nwz ID’ = the ID created in Step 2
format as text - Which takes the various bits of info I want for each Notice (its title, image URL, seller, location, description etc)
This data (i.e. the title, image URL, seller of the 3x Notices) is then sent to Zapier (see Section 4).
=================================================
SECTION 3. BUILD THE EMAIL TEMPLATE IN MAILCHIMP
You could try doing it in another tool, but you need to be able to export the template as html for this to work.
In my case, I wanted an email that would display a list of Notices in the email - so needed to include the Notice title, image, seller, location, description and a ‘VIEW’ button to take the viewer to the Notice on the platform.
In MailChimp you can do this by creating the template in the drag and drop builder:
And then selecting the Export function from the dropdown in the ‘Templates’ section:
The other point to make here is that the template can’t be dynamic - so I created three different templates, with the email displaying either:
- 3x posts
- 5x posts
- 10x posts
The template that is used is selected when the app admin is creating the email (covered above).
=================================================
4. CREATE THE ZAP(S) IN ZAPIER
First thing to mention is that each template needs it’s own Zap (I guess you could do it in one and use filters and conditional login, but I prefer this route), so I have three Zaps running:
Here’s how the Zap works:
Step 1 - Bubble Trigger
This is the Webhook you need to copy and paste into the workflow in Bubble
This should display request as follows, with the data divided by ‘{}’:
Step 2 - Split the text by ‘{}’
This will result in all of the bits of info bring separated as items in the Zap:
(Optional: Step 3 - If you are using images you will need to extract the URL - use the Zapier action to do this):
Step 4 - Create the campaign in MailChimp
You can set this up as you like (in terms of the Campaign Name, Audience, Segment etc) but the important part is the Email Content (HTML) field.
(Here’s how I use the Newz ID I mentioned from Text 2):
All you need to do is paste the HTML export you created in Section 3 in to this field:
Then go through the HTML and drop the items (from Step 2) in to place:
And that’s it! When the Zap runs, the end result is the email is created as a draft in MailChimp, where it can be reviewed and then sent manually from MailChimp. You could obviously add another step to the Zap to send the email as well, but we prefer to check it over first to make sure everything looks as it should.
Hope this helps. Happy to dive into more detail on anything if you need more help.