Using Sendinblue email API to send transactional emails
Tags: javascript, tutorial, writing, webdev
Published: 2023-02-16 19:10:35

**Base case**: _A client requests that they need a feature allowing their clients to send certain information to their email. In addition to this, they provide a design template for their email. All you have to do is extract various information from the data sent and and that information to the email template._

## Intro...

As a developer, you are bound to meet clients who wish to have features you might have not used before. An example of such is integration an emailing feature with a twist, the emalls sent will be part of an email marketing system. Recently, this was a position I found myself in when a client requested that the emails had to go through [Sendinblue](https://www.sendinblue.com/). The project is part of an automated insurance quotation system, built in Javascript, for the client to use in his field of personal health insurance brokerage in Kenya.

## What is Sendinblue

So, what is Sendinblue? Sendinblue is a digital marketing platform that is preferred by digital marketers to create campaigns, from emails to sms, before sending them to their clients. In the process of learning about Sendinblue, I noticed it is possible to know when the message has been opened, links clicked or if the message has bounced (not sent). I will show you this shortly as we build this up.

### 
Prerequisites

To build onto this, we will use NodeJs as our backend and a simple form built to accept our input. Also, I will be using Express just because I like using it. Below are the node modules or dependencies we will need to install for the system to work as it should. To make it clear, we will be using vscode and node (version 18) as our backend runtime.

1. <u>ejs</u> (_our templating language as I know_)
2. <u>express</u> (_this is part of our backend framework_)
3. <u>cheerio</u> (_this allows us to extract information from html sent to server_)
4. <u>nodemon</u> (_I believe you know about this, same as watch_)
5. <u>sib-api-v3-sdk</u> (_this is our sendinblue node module, interesting yes?_)
6. <u>morgan</u> (_this will be our request logger, good for development phase_)
7. <u>dotenv</u> (_this will process the env docs and variables we will create_)

Let’s build

#### 
Step 1: <u>set up our Javascript environment</u>

![Vscode startup page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xgv8ee70n3lnflmb3zj.JPG)
 
Our first step is starting Vscode and launch our terminal. In this case, git bash was my terminal of choice (I just like it). Then in our terminal run the command npm init to set up the details of our project.

#### 
Step 2: <u>Initiate our project </u>
To initiate the project, install the dependencies by running the code below. The installation progress will be indicated by the progress bar similar to the one below on the console.


![node modules installation progress bar on git bash console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2wuz4krfuzxzr2bmgus.JPG)

To confirm the installation of the dependencies, got to the `package.json` file and confirm the details similar to the image below. Kindly note that depending on the time you located this article, the version of the dependencies may have changed. (I noticed I had not installed dotenv here, so please install it too)


![confirming node dependancies installed in the package.json file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5bvze48e71iuat468ma.JPG)

#### Step 3: <u>Setup the Sendinblue account and get the `API key`</u>
To be able to use the sendinblue api, we will need to register an account and for this, we can use a gmail account. Once done, our dashboard will appear as below, and the first thing to do is get our api key which will enable us to use the npm package that we just installed in our code. To get our api key, we will follow the steps below.

1. On the dashboard click on the settings tab on your left
2. Select the configuration option on the top of the settings page
3. Under the HTTP API section, click on get your API Key
4. In the new page, select API Keys tab as shown below
5. Generate your new api key and even give it a custom name


![Sendinblue SMTP api generation page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo4bra39a2qagc4uamm5.jpg)


After creating a new `API key`, we will copy the `API key` string and assign it to a variable on our `env` file. The `env` file will help us protect the key making it private for application security. You wouldn’t want to compromise the security of your application, the price to pay is quite steep.

#### Step 4: <u>Setting up the api code on your app</u>
After creating your Sendinblue account and accessing your API key, we will need to setup the API codeblock in our application. If you are a fan of using specific routes for your processes, the API code structure will reside in our specific ruote. For example, if your have a ‘`/send_email`’ route dedicated to sending the emails, the api code below will be placed within this route. To understand the structure of the code you can visit the github repo [here](https://github.com/frazie/sendinblue-article-build.git).

For this article, I will use the ‘`/send_email`’ route and in the route controller, place the code block below after requiring the Sendinblue API node module. Also, don’t forget to require the Sendinblue module that we installed in our application.


![Sendinblue api code block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pyo23wjlkijcqrtlnyu.JPG)

In the code block above, there are two interesting elements to note, the `templateId` and the `htmlContent`. In my working example, I had generated a template on the Sendinblue transactional email page and the templateId will be generated automatically as seen below. This is to distinguish which template to use for which campaign assuming your are running several email marketing campaigns on your system. 

It would be a disaster confusing one campaign for another especially when you already have an established clientbase. If working with email templates are a long process for you, you can simple use the `htmlContent` to create an email template and then plugging the params variables within it to include the information collected from your form into the email before it is sent.

![Email templates page on Sendinblue dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vr08n6xo9rzgl8wm4fbz.jpg)

I know we are jumping a lot but we are joining the dots slowly. Assuming you have as little variables and as limited functionality as in this [Github](https://github.com/frazie/sendinblue-article-build.git) repository, your completed file should mirror this. 


![complete code structure for Sendinblue api as seen on github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gatjsywc2ajlfln44wit.JPG)

Assuming everything goes great and there is no issue in your system upto this level, you can now go back and send any details, in the context of this article, the form and the following message on your console should appear. Any other message besides this may indicate and error and the email will not be sent. So debugging will be your friend, but guided by clear error messages.


![message on successful sending of the email through the api](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/geaiy0a5t04a5x4kray2.jpg)

**<u>Conclusion</u>**
`Sendinblue API` is a handy tool for a business that may be looking to start creating custom email templates for their clients. An additional feature not discussed in this article is the ability to track each email and its associated activities directly from Sendinblue dashboard after registration. Regarding the code above, if you have any issues or query feel free to comment or send me a message and I will be able to help you get the feature working. `Happy coding`.