How to send an email using WeWeb.io

8 min read

While it’s true that we’re living in an age of technology, not everybody is a developer. That makes things more complicated for people with great ideas but a lack of development knowledge. Fortunately, with the arrival of low-code/no-code technologies, things have changed and now everybody can develop full-fledged applications without writing a single line of code. Today, we’re going to build an interface to interact with our contacts and learn how to send an email using WeWeb.io and Nylas.

Let’s get started.

What are we going to talk about?

Create the project

Once we’re logged into WeWeb.io, we will need to create a workspace and then a project. Click on Create or Duplicate project to get started:

Creating our WeWeb.io project

We’re going to choose the Blank template, as we want to have a simple layout:

Selecting a blank template

We need to name our project, so let’s choose Nylas_Email, as it defines what our project is all about:

Choose a project name

Once we’re done, our project will be listed, so that can start working on it:

Open the WeWeb.io editor

Creating the layout

First, we want to have a container, where all of our components are going to reside. Mostly, to have them organized:

Add a container

Using the columns component is a good way to keep the elements centred inside our container:

Add columns

As we want the user to select a contact, we need a text component:

Add a text field

And a Select (or dropdown) component:

Add a Select component

Our interface should look something like this:

Look and feel so far

For the body of the email we will use a Rich text component, as it will allow us to format our text:

Add a Rich text component

After adding all the components, our form should look something like this and in the end it will allow us to send an email with WeWeb.io:

Final look of our WeWeb.io application to send emails

Populating the Select component with contacts

We want to fetch our contact information and use it to populate the Select component. For that, we need to select Data, from the upper-left corner:

Adding Data

Then select Variables and add a new variable:

Creating a variable

This new variable is going to be called url and it’s going to be of the type Query. It will contain the path for the Nylas’ Contacts endpoint:

URL Variable

We’re going to create another variable that will hold the contact ID, as we’re going to need it when getting the contact email later on:

Get_Contact variable

After creating the variables, we need to choose Collections and Add collection:

Adding a Collection

As our data source, we’re going to choose REST API, as we’re going to call the Nylas API, to read from our contacts:

Choose REST API

The REST API is a plugin that we must install (it’s free, so no worries):

Add the REST API Plugin provided by WebWeb.io

We’re going to name this collection Get_Contacts and we’re going to choose Dynamic as the Mode:

Start a new collection to hold contacts

On the configuration part, we need to pass the Nylas Contacts Endpoint and specify the headers and the authorization (access token from Nylas). The query string is optional, but I’m choosing address_book and passing a group to limit the amount of contacts. It’s critical to turn on the Send credentials option:

Configure and get contacts

Once we click on Continue, the process will get executed and we will be able to see the result. We’re fetching 6 contacts:

We found contacts

Now that we have data that we can use, it’s time to feed our Select component.

We need to clear the default options first:

Delete default options

Click on the options parameter to pass a value:

Setup the options

Here we’re going to choose Collections → Get_Contacts → [] Data:

Choose the data from the collection

Our six contacts are going to be displayed, although as objects, as each contact will have elements like name, email, address and so on:

Get the contacts data

When the data is linked to the Select component, we can then select given_name for the label and id for the value fields:

Select the values for the Select component

We have now a selectable list of contacts:

Select component with contacts loaded

Adding an action to the Select component

The Select component is working fine, but not doing anything yet. We’re going to add an action, by selecting the Actions tab:

Adding an action

And creating a new Workflow:

Create new workflow

We’re going to select Change variable value as we want to store the value of the Select component inside a variable:

Change variable value

We’re going to change the get_contact variable by concatenating the url variable and the Contacts – value element:

Concatenate URL and Contacts

After that, we’re going to call another REST API Request, this time to pick up the details from the selected contact:

Add a REST API Request

We’re going to call this action read_contact_details and will pass the get_contact variable as the URL for the API call:

Call the Read_Contact_Details API

We’re going to call another Change variable value, but this time passing our Name text component. As the value we’re going to pass the concatenation of read_contact_details.result.given_name with read_contact_details.result.surname, so that when we select a name from the Select component, the Name text component will be automatically populated:

Concatenate First and Last Name of contact

It’s important to note that the first time you build this, you’re going to get nothing in return. If that happens, you just need to press the Test button to generate the workflows and fill the values in memory. After that, you will be able to select them without any issues.

Test your nodes to fill in data

We also want to display the email of the contact, so we create another Change variable value and update it accordingly:

Your flow should look like this

Creating the information modals

We’re going to send an email to our selected contact via WeWeb.io, so it would be good to have a visual indication of whether our email was successfully sent or not. 

To achieve this, we’re going to use two Modal components:

Choose Modal

Once we place them in our container, they’re going to be invisible, but we can fetch them from the Navigator section. We can name them for better management:

Rename options to avoid confusions

And of course, change their messages and their layout. An easy way to do this, is to change their state from the properties window:

Force display in editor

The modal should look like this:

Error message

Each modal will come with a variable that indicates if it is open or closed. It’s a good idea to change their names so we know which one we are using:

Change modal names

Send an email with WeWeb.io

Finally, we’re going to work on how to send an email using WeWeb.io components.

We’re going to select our button component and create a new workflow:

Add Send Email workflow

The first action that we’re going to create is going to be a REST API Request. However, this time we are going to use a POST instead of a GET because we’re going to send data instead of read it:

Call the Send endpoint

Almost everything is going to be the same, with a clear exception of the formula that we’re going to use for the body, which by the way is going to be a Raw body:

Concatenate values as a JSON object

Here we’re going to concatenate all the needed information as a JSON object. To make it easier, copy the following code and replace the XXX with the correct values:

concatenate("{\"subject\":\"",XXX,"\", \"body\":\"",XXX,"\",\"to\":[{\"email\":\"",XXX,"\",\"name\":\"",XXX, "\"}]}")

Once done, we will need to change the value of a new variable that will be called the result. Here, we’re going to grab the value of Send_Email.result as a boolean object (True or False):

Store the result of the API call

Once we know if our API call was successful or not, we can call a True/False split action and assign each modal variable where it belongs:

Create a branch

For each modal, we need to assign an action to their continue button, and this simply passes a false value to close them:

Close the modal window

Now, we can select a contact, choose a subject, write a body and send the email:

We successfully sent an email using WeWeb.io

We can open it to make sure it was delivered:

Reading the email sent by WeWeb.io on the inbox

To keep in mind, when using the Rich Text Editor, make sure not to change the font colour or setup a link as it will not work well with the JSON body. That’s something that can be done with some extra work.

What’s Next?

While it took a lot of steps, we were able to build an application using zero lines of codes and send an email thanks for WeWeb.io

To learn more about our Contacts APIs, go to our documentation Contacts API Overview.

To learn more about our Email APIs, go to our documentation Email API Overview.

You can sign up for Nylas for free and start building!

Don’t miss the action, join our LiveStream Coding with Nylas!

Related resources

How to Solve Webhook Integration Challenges with PubSub Notification Channel

Key Takeaways This article addresses the challenges of webhook integration and introduces the PubSub Notification…

How to Send Emails Using an API

Key Takeaways This post will provide a complete walkthrough for integrating an email API focused…

How to build a CRM in 3 sprints with Nylas

What is a CRM? CRM stands for Customer Relationship Management, and it’s basically a way…