How to export app data to repeating list in email template?

I am building an online marketplace using Bubble, which allows users to post listings.

I would like to set up a weekly ‘digest’ email that sends out a list of the recent listings to our user base.

Ideally this would be automatic using Zapier and MailChimp or something similar, but I’m struggling to even work out where to start my research for how to take the data from Bubble and put it into an HTML template using a ‘repeating list structure’ (for want of a better description).

In terms of the email design, I’m thinking something simple like this:

I know how I could do this using a standard email template using variables. The bit I’m struggling with is how to get each record in my database to add a new block to the list.

Are there any plug and play tools out there that could help with this? Or will I need to look into a custom solution (a friend has suggested looking into Jekyll).

Any pointers greatly appreciated!

1 Like

Hey! Did you find a solution to this?

Hi there! Yes, I worked out a solution, but the listings have to be selected manually each time, rather than it being a scheduled email that pulls the recent listings through automatically.

Having said that, I did solve the issue I originally posted about regarding how to get the data of multiple listings into the email template - and I ended up using Zapier and MailChimp in the end :smile:

Let me know if this is of interest and I’ll post a proper write-up explaining how I did it!

1 Like

Yes, please! That would be fantastic!

@eman did you hear back on this? I was really hoping for a more native solution leveraging sendgrid… curious how you are approaching this use case.

No luck unfortunately!

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:

  1. Display a list of all Notices in a Repeating Group
  2. 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)
  3. 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)
  4. 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
  5. 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.

Here you go, sorry it took so long!

How to export app data to repeating list in email template? - #7 by cjrb