Dear Bubblers,
I’d like to somehow create HTML templates with dynamic data from my app which I then send by email. How best to achieve this?
I have set up Sendgrid and would like to have the HTML created on the Bubble side and then just pass this to Sendgrid for sending. Possible?
I’m stuck on… when I put an HTML element on the page, how do I merge in my dynamic fields?
Thx.
Place the cursor anywhere inside the property editor of the html bubble element and click. It should show a blue mini popup to insert dynamic data
Oh that sounds promising. Thx.
Nope, I’m not getting it, I must be doing something wrong. So in creating an HTML template (Template is a data type) I have a popup which requires input fields to Create a new Template. I’m not getting how to add my HTML. Please help steer me in the right direction, thx…
Hope this helps:
Input values are shown in the GIF. You can also use dB values and other values lilke custom states, etc.
That is certainly very helpful thx. What I’m trying to achieve is for the HTML code itself to be dynamic. i.e. the user selects from a choice of HTML templates, then all the dynamic fields within that are sent out in the email. How could I do that?
Create a data type called template with a text field called html code
Within that html code add dynamic data as shown above in a UI with inputs where you can change data like in an admin dashboard to manage the different templates (build a repeating group to list the templates and edit each row (i.e. each template) when called to the page)
Send that text field (html code) to Sendgrid via a POST call using Bubble’s api connector plugin
Thx cmarchan.
If I’m creating my Template in a popup, I would have a text input field called html code, that would then be saved to the database and a text field on in the record. Where would the HTML field be placed? I can’t quite understand.
So my User would create a new Template, paste his HTML code - into which type of field? I guess that would have to be a Text Input field? AT what point and where would the dynamic data be entered?
Thx for guidance…
Are you intending to let your user create the entire HTML for the email?
Or are you letting them chose from a predefined set of templates and just add a few dynamic fields within it?
Yeap … from your comments @martin10 I wonder the same questions that @adamhholmes is asking.
The html code text field should receive stuff from the html element via a flow. Most of it will be hard coded while some values will be dynamic. Those dynamic values can be gathered from inputs by the user or directly from the dB. This code would be the make-up structure of a template.
When I say html code text field I do not mean having the user edit or copy/paste the actual code. It means that you can use whatever you coded in the html element as a text to send via a post call to Sendgrid 
(through logic that you build yourself via workflows that enable this … the html element will receive whatever dynamic values that come in when the user loads the inputs)
The latter. The org will have a set of predefined HTML templates that the user can select. Then at the click of a button or two, send the emails pulling in a few dynamic fields.
Thank you both for your replies. Carlos, I think I follow. I will have another go tonight. Your last comments are very helpful. I was confused how the HTML element would interplay.
So use case is: Real Estate agent (the user), has datatypes ‘propertyListing’ and ‘enquiryContact’ wants to send out nice pretty html brochure. The Listing has already been ‘matched’ to the Contact and sits on the Contact record as part of a selection in a RG. I have done this part (very pleased with myself :))
Ok good, I have got my UI set up to receive the code in text format and to create HTML email templates to the dB. Now I’m stuck on how to get the dynamic data in.
If my html has {{First name}} and {{Description}} etc. how do I assign these values from the dB before I send the html text to Sendgrid. I want these values to be those of the related datatypes.
I have data coming from 3 different datatypes, I’m thinking I should have a 4th datatype called emailModal to bring it all together and send from there…? This would have the advantage of being able to record the sending as a ‘completed event’ on the dB related to the Contact.
Any comments on my plan and how best to construct it appreciated.
I’m still not certain I understand what you’re trying to do?..
You say your user will ‘paste the HTML code’ into an input on your page?
So are they creating a complete email in HTML code from scratch? By inputting the raw HTML into your app?
Or are they choosing a premade template, which they can then just insert dynamic data?
Why not create the templates in Sendgrid, and then just pass the relevant dynamic fields through as Sendgrid handlebars?
Or are you specifically wanting your users to create the entire email HTML within your app?
Hi Adam,
For what it’s worth, I’m building this app as a small business owner, for my small team to use. For years I have paid too much for software that doesn’t do what my business wants it to do. I also love the puzzle solving/logical problem solving involved in this, more so than gaining new customers obviously 
I’m a week into sponging/learning Bubble and have already built functionality beyond expectation!
So our business has about 10 nice looking HTML templates that we use, so it’s not particularly necessary for a User to create them. But they need to be entered somewhere.
What I’m grappling with is, bringing in data from multiple datatypes and then sending that out in an email - so emailTo address would come from ‘contactEmail’ and product info would come from ‘listingDescription’, ‘listingPrice’ etc. and the required html would come from ‘templateChoice’ where a basic example of the html would be something like…
Dear {{contactFirstName}},
So far, I have allowed the User, starting from a client’s contact record, choose a Listing and choose an email template. But I’m stuck on bringing it all together. See screenshot…
Ok, now I see what you’re doing…
As your email HTML is stored in your database as a text, you can’t ‘add’ dynamic data into it directly.
What you can do is use a ‘find & replace’ operation to replace your ‘placeholders’ with dynamic values when you make the call.
For example, when you make the call and send the full HTML through to Sendgrid, use a ‘find & replace’ to search for {{contactFirstName}} and replace it with the value of the parent group’s contact’s first name.
And do the same for each placeholder in the email.
So you’d make the call, and the HTML parameter would be dynamically populated with the HTML from the chosen ‘Template’ datatype’s HTML field, with several find & replace operations to replace each placeholder with the appropriate dynamic data.
Although it may be slightly easier just to create the email templates in SendGrid (you can past the HTML directly in there).
You can then store the template IDs in your bubble database or, better still, in an option set.
Then you can select the template directly from your option set, and all you have to do is pass the required dynamic fields through as parameters in the call.
Got you Adam, many thanks for helping me along. I pretty much get what you are saying. I have turned to creating the template in SendGrid for simplicities sake. But it’s nice to have clarity on :findReplace.
Just to round this off, if I later wanted to develop sending multiple listings in the same email, some sort of looping, is there a no/low code way of doing that?
I’m slightly concerned with the images - where to host them, pass just the URL etc.
Yes, for images just send the url where they are stored.
