# Send Beautiful HTML emails from Bubble Through API connector

**URL:** <https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061>\
**Category:** Uncategorized\
**Created:** [July 2, 2016, 12:42pm UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061 "2016-07-02T12:42:46Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![levon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/levon/32/89793_2.png) [@levon](https://forum.bubble.io/u/levon)\
**Post date:** [July 2, 2016, 12:42pm UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/1 "2016-07-02T12:42:46Z")

</div>

Hey Bubblers,  
If you want to send beautiful HTML emails you can do so through [Sendinblue](http://sendinblue.com) using Bubble’s API connector. Here are the steps.

1. create an account with [Sendinblue](https://www.sendinblue.com/?ae=341)
2. create an Html template (you can use one of the services like [https://www.inkbrush.com/](https://www.inkbrush.com/) that allow creating beautiful responsive HTML templates based on your design files)
3. if you want to have dynamic attributes that should be replaced with data from Bubble put in the HTML in this format %FIRSTNAME% (must be capital letters)
4. install the API connector plugin in Bubble
5. setup the API call as shown on the screenshot below
6. replace 5 in the URL with your template ID
7. replace dynamic attributes with your own ones (if it’s an array of attributes use the syntaxis as [{“FIRSTNAME”:“attr1”},{“LASTNAME”:"attr2},…etc]
8. replace the api-key with your key (you can get it from sendinblue dashboard)
9. when you use this call as an action in the workflow, you’ll be able to replace any body parameter with Bubble’s dynamic data.  
 ![](https://us1.discourse-cdn.com/bubble/original/2X/d/dd0cdb1bb5a159bc01ea43c09f9ef37654555ece.png)

Thanks,  
Levon.  
 ![](https://us1.discourse-cdn.com/bubble/original/2X/f/f640ba41a848d396e71eb2c937e8c88295c22b07.png)  
Founder at Bubblewits - Bubble Certified Partner

> **[Zeroqode is a suite of no-code products and services for launching your ideas...](https://zeroqode.com)**
>
> No-code apps, plugins for Bubble, native apps builder and more. Now you can build apps without code even faster

[http://iambubble.com](http://iambubble.com) - one page Bubble demo  
[http://builtonbubble.com](http://builtonbubble.com) - Collection of apps built on Bubble  
[Dev.zeroqode.com - Reach out if you need help creating something on Bubble](http://forum.bubble.io/t/bubblewits-com-bubble-certified-partner-reach-out-if-you-need-help-creating-something-on-bubble/1834)

---

<div class="post-metadata">

**Author:** ![csblack](https://avatars.discourse-cdn.com/v4/letter/c/7feea3/32.png) [@csblack](https://forum.bubble.io/u/csblack)\
**Post date:** [July 2, 2016, 2:09pm UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/2 "2016-07-02T14:09:13Z")

</div>

Awesome!

---

<div class="post-metadata">

**Author:** ![raymond](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@raymond](https://forum.bubble.io/u/raymond)\
**Post date:** [July 2, 2016, 2:31pm UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/3 "2016-07-02T14:31:21Z")

</div>

Thanks @levon

---

<div class="post-metadata">

**Author:** ![JustinC](https://avatars.discourse-cdn.com/v4/letter/j/da6949/32.png) [@JustinC](https://forum.bubble.io/u/JustinC)\
**Post date:** [July 22, 2016, 5:43pm UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/4 "2016-07-22T17:43:34Z")

</div>

Your a good man!!!

---

<div class="post-metadata">

**Author:** ![AliFarahat](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alifarahat/32/189604_2.png) [@AliFarahat](https://forum.bubble.io/u/AliFarahat)\
**Post date:** [July 22, 2016, 5:47pm UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/5 "2016-07-22T17:47:43Z")

</div>

Great thanks

---

<div class="post-metadata">

**Author:** ![JustinC](https://avatars.discourse-cdn.com/v4/letter/j/da6949/32.png) [@JustinC](https://forum.bubble.io/u/JustinC)\
**Post date:** [July 27, 2016, 8:47pm UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/6 "2016-07-27T20:47:45Z")

</div>

For this step:

1. if you want to have dynamic attributes that should be replaced with data from Bubble put in the HTML in this format %FIRSTNAME% (must be capital letters)

Does this go inside the code for the email template inside of SendInBlue?

How do I add the ‘text’ parameter to this?

![](https://us1.discourse-cdn.com/bubble/original/2X/e/eb5cb0689e3a0c73283e7be644fd1a0a82d81d78.png)

Everytime I do I seem to break something and the call doesn’t work…

---

<div class="post-metadata">

**Author:** ![levon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/levon/32/89793_2.png) [@levon](https://forum.bubble.io/u/levon)\
**Post date:** [July 28, 2016, 5:49am UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/7 "2016-07-28T05:49:47Z")

</div>

so in the html template in sendinblue you only need to specify the variable which in our case is %FIRSTNAME%

then you configure the API call as shown on the screenshot.  
the way it is on your screenshot should work, doesn’t it?  
only that if you want to have a dynamic value instead of Justin, then in the workflow when you call this api you can remove Justin and insert a dynamic expression there, make sure you keep the " before and after that value  
Does this answer your question or misunderstood it?  
Levon.  
 ![](https://us1.discourse-cdn.com/bubble/original/2X/f/f640ba41a848d396e71eb2c937e8c88295c22b07.png)  
Founder at Bubblewits - Bubble Certified Partner

> **[Zeroqode is a suite of no-code products and services for launching your ideas...](https://zeroqode.com)**
>
> No-code apps, plugins for Bubble, native apps builder and more. Now you can build apps without code even faster

[http://bubblestore.io](http://bubblestore.io) – a place to buy Bubble templates for landing pages, workflows etc.  
[http://iambubble.com](http://iambubble.com) - one page Bubble demo  
[http://builtonbubble.com](http://builtonbubble.com) - Collection of apps built on Bubble

---

<div class="post-metadata">

**Author:** ![JustinC](https://avatars.discourse-cdn.com/v4/letter/j/da6949/32.png) [@JustinC](https://forum.bubble.io/u/JustinC)\
**Post date:** [July 28, 2016, 10:58am UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/8 "2016-07-28T10:58:54Z")

</div>

Ok so the %FIRSTNAME% goes inside the sendinblue template. Got it.

But what about the main body content of the Send In Blue Email where it should be dynamic to content that is within Bubble? How do we add a paramater or something so that it works? When I view their docs and add in the ‘text’ paramater it breaks the call entirely and can’t seem to figure out how to set it up in addition to the other parameter there already (for to: and name:)

---

<div class="post-metadata">

**Author:** ![levon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/levon/32/89793_2.png) [@levon](https://forum.bubble.io/u/levon)\
**Post date:** [August 1, 2016, 5:01am UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/9 "2016-08-01T05:01:42Z")

</div>

what other parameters you are trying to use? can you show some screenshots?

---

<div class="post-metadata">

**Author:** ![JustinC](https://avatars.discourse-cdn.com/v4/letter/j/da6949/32.png) [@JustinC](https://forum.bubble.io/u/JustinC)\
**Post date:** [August 1, 2016, 12:06pm UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/10 "2016-08-01T12:06:34Z")

</div>

What I’m trying to do is send out a list of newly added Things on a weekly basis.

Those Things must all be dynamic so I’m trying to figure out how exactly to call those Things into the body of the sendinblue template dynamically.

I am assuming that I need to include more parameters from [https://apidocs.sendinblue.com/tutorial-sending-transactional-email/](https://apidocs.sendinblue.com/tutorial-sending-transactional-email/)

HTML + inline image are the two that I’m trying to add so that these can be dynamically added by Things in Bubble.

In the action section this is what I currently see and I’m trying to figure out how to add more content to this dynamically.

![](https://us1.discourse-cdn.com/bubble/original/2X/d/d71541cf444ecdd7f9e778b476d78c5de2d04e81.png)

This is what I have in the configuration section and when tested it causes an error:

![](https://us1.discourse-cdn.com/bubble/original/2X/e/e28329852635fba266f7aa3c6c400e9fcd1e0d8a.png)

I assume that if i configure it like this then i’ll be able to add some html dynamically or call things from Bubble to the template?

---

<div class="post-metadata">

**Author:** ![levon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/levon/32/89793_2.png) [@levon](https://forum.bubble.io/u/levon)\
**Post date:** [August 2, 2016, 5:39am UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/11 "2016-08-02T05:39:45Z")

</div>

I see now, you are right, you would need to add more parameters in the Sendinblue template. For example %PARAM1%, %PARAM2% etc…  
then in the API connector you need to list all these as follows  
{  
“to”:"justing@gmail.com",  
“attr”:[{“FIRSTNAME”:“Justin”},{"PARAM1}:“something1”},{“PARAM2”}:“something2”}]  
}

---

<div class="post-metadata">

**Author:** ![JustinC](https://avatars.discourse-cdn.com/v4/letter/j/da6949/32.png) [@JustinC](https://forum.bubble.io/u/JustinC)\
**Post date:** [August 10, 2016, 11:51pm UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/12 "2016-08-10T23:51:12Z")

</div>

Will these settings work for anything we want to call? Including images?

I assume that the image source URL will need to be replaced with one of the PARAMS?

---

<div class="post-metadata">

**Author:** ![levon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/levon/32/89793_2.png) [@levon](https://forum.bubble.io/u/levon)\
**Post date:** [August 11, 2016, 7:53am UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/13 "2016-08-11T07:53:00Z")

</div>

not sure, you would need to experiment with it…

Thanks,  
Levon.  
 ![](https://us1.discourse-cdn.com/bubble/original/2X/f/f640ba41a848d396e71eb2c937e8c88295c22b07.png)  
Founder at Bubblewits - Bubble Certified Partner

> **[Zeroqode is a suite of no-code products and services for launching your ideas...](https://zeroqode.com)**
>
> No-code apps, plugins for Bubble, native apps builder and more. Now you can build apps without code even faster

[http://bubblestore.io](http://bubblestore.io) – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.  
[http://iambubble.com](http://iambubble.com) - one page Bubble demo  
[http://builtonbubble.com](http://builtonbubble.com) - Collection of apps built on Bubble

---

<div class="post-metadata">

**Author:** ![JustinC](https://avatars.discourse-cdn.com/v4/letter/j/da6949/32.png) [@JustinC](https://forum.bubble.io/u/JustinC)\
**Post date:** [August 11, 2016, 12:23pm UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/14 "2016-08-11T12:23:04Z")

</div>

I contacted their support. Send In Blue does not allow it.

---

<div class="post-metadata">

**Author:** ![pnodseth](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/pnodseth/32/2611_2.png) [@pnodseth](https://forum.bubble.io/u/pnodseth)\
**Post date:** [August 23, 2016, 8:34am UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/15 "2016-08-23T08:34:00Z")

</div>

Thanks Levon!  
Works great when I only have one attribute, but when I try to use an array, I get an error message.  
The message “unable to do request, please try again later”. Have you encountered this?  
This is the body:  
{  
“to”:"test@test.com",  
“attr”:[{“FIRSTNAME”:“attr1”},{“BOOKINGID”:“attr2”}]  
}  
Is there something wrong with how I’ve set it up?

**EDIT: Figured it out. The array should be set up like this:**  
“attr”:{“NAME”:“His name”,“PRICE”:“This is my price”}

---

<div class="post-metadata">

**Author:** ![levon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/levon/32/89793_2.png) [@levon](https://forum.bubble.io/u/levon)\
**Post date:** [August 23, 2016, 8:53am UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/16 "2016-08-23T08:53:07Z")

</div>

awesome @pnodseth thanks for the edit, it’s very helpful!

---

<div class="post-metadata">

**Author:** ![jbrucew](https://avatars.discourse-cdn.com/v4/letter/j/5daacb/32.png) [@jbrucew](https://forum.bubble.io/u/jbrucew)\
**Post date:** [November 10, 2016, 10:35pm UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/17 "2016-11-10T22:35:02Z")

</div>

This is an awesome post! Thanks for the contribution.

Do you think this could be done with MailChimp as well? and if so, why did you choose sendinblue over mailchimp?

---

<div class="post-metadata">

**Author:** ![levon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/levon/32/89793_2.png) [@levon](https://forum.bubble.io/u/levon)\
**Post date:** [November 11, 2016, 5:04am UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/18 "2016-11-11T05:04:09Z")

</div>

MailChimp doesn’t allow transactional emails (emails sent upon user’s actions, e.g. to confirm something) - it’s only for mass emails like newsletters etc.  
They have a service called Mandrill for transcational emails and it was quite popular but recently they have ceased their free plan which allowed up to 12 000 emails per month. That’s why i have chosen Sendinblue which still has the free tier.

Thanks,  
Levon.  
 ![](https://us1.discourse-cdn.com/bubble/original/2X/0/0e27c966ced69bb42d00c2f85261d96fc8e34342.png)  
Founder at Bubblewits - Bubble Certified Partner

> **[Zeroqode is a suite of no-code products and services for launching your ideas...](https://zeroqode.com)**
>
> No-code apps, plugins for Bubble, native apps builder and more. Now you can build apps without code even faster

[http://bubblestore.io](http://bubblestore.io) – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.  
[http://iambubble.com](http://iambubble.com) - one page Bubble demo  
[http://builtonbubble.com](http://builtonbubble.com) - Collection of apps built on Bubble

---

<div class="post-metadata">

**Author:** ![jonaspalmqvist](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jonaspalmqvist/32/7307_2.png) [@jonaspalmqvist](https://forum.bubble.io/u/jonaspalmqvist)\
**Post date:** [November 11, 2016, 8:52am UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/19 "2016-11-11T08:52:32Z")

</div>

Why SendInBlue and not SendGrid? They allow it, 12 000 per month.

Just curious.

---

<div class="post-metadata">

**Author:** ![levon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/levon/32/89793_2.png) [@levon](https://forum.bubble.io/u/levon)\
**Post date:** [November 11, 2016, 11:53am UTC](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061/20 "2016-11-11T11:53:50Z")

</div>

Both have the same free tier and both are possible of course. In this particular example it’s SendinBlue.  
Bubble integrated Sendgrid, check out this thread [[New Feature] Using Sendgrid for emails](http://forum.bubble.io/t/new-feature-using-sendgrid-for-emails/5991)

Thanks,  
Levon.  
 ![](https://us1.discourse-cdn.com/bubble/original/2X/0/0e27c966ced69bb42d00c2f85261d96fc8e34342.png)  
Founder at Bubblewits - Bubble Certified Partner

> **[Zeroqode is a suite of no-code products and services for launching your ideas...](https://zeroqode.com)**
>
> No-code apps, plugins for Bubble, native apps builder and more. Now you can build apps without code even faster

[http://bubblestore.io](http://bubblestore.io) – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.  
[http://iambubble.com](http://iambubble.com) - one page Bubble demo  
[http://builtonbubble.com](http://builtonbubble.com) - Collection of apps built on Bubble

[Next page](https://forum.bubble.io/t/send-beautiful-html-emails-from-bubble-through-api-connector/4061.md?page=2)
