Calendar management
Embedded contextual email
Scheduling automation
Automated outreach
Telehealth
Marketplaces
Recruiting
Document management
Real estate
Communications software
Docs
SDKs
Tutorials
API status
Changelog
Support
Blog
Events
Guides
Newsroom
Partners
Build vs. buy
Customer stories
Trust & security
Why NylasHow to send an email using WeWeb.io
Ever wanted to integrate Nylas to your application, but coding is not for you? Here’s a guide for WeWeb.io, an awesome no-code/low-code tool.
Ever wanted to integrate Nylas to your application, but coding is not for you? Here’s a guide for WeWeb.io, an awesome no-code/low-code tool.
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.
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:
We’re going to choose the Blank template, as we want to have a simple layout:
We need to name our project, so let’s choose Nylas_Email, as it defines what our project is all about:
Once we’re done, our project will be listed, so that can start working on it:
First, we want to have a container, where all of our components are going to reside. Mostly, to have them organized:
Using the columns component is a good way to keep the elements centred inside our container:
As we want the user to select a contact, we need a text component:
And a Select (or dropdown) component:
Our interface should look something like this:
For the body of the email we will use a Rich text component, as it will allow us to format our text:
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:
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:
Then select Variables and add a new 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:
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:
After creating the variables, we need to choose Collections and Add 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:
The REST API is a plugin that we must install (it’s free, so no worries):
We’re going to name this collection Get_Contacts and we’re going to choose Dynamic as the Mode:
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:
Once we click on Continue, the process will get executed and we will be able to see the result. We’re fetching 6 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:
Click on the options parameter to pass a value:
Here we’re going to choose Collections → Get_Contacts → [] Data:
Our six contacts are going to be displayed, although as objects, as each contact will have elements like name, email, address and so on:
When the data is linked to the Select component, we can then select given_name for the label and id for the value fields:
We have now a selectable list of contacts:
The Select component is working fine, but not doing anything yet. We’re going to add an action, by selecting the Actions tab:
And creating a new Workflow:
We’re going to select Change variable value as we want to store the value of the Select component inside a variable:
We’re going to change the get_contact variable by concatenating the url variable and the Contacts – value element:
After that, we’re going to call another REST API Request, this time to pick up the details from the selected contact:
We’re going to call this action read_contact_details and will pass the get_contact variable as the URL for the API call:
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:
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.
We also want to display the email of the contact, so we create another Change variable value and update it accordingly:
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:
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:
And of course, change their messages and their layout. An easy way to do this, is to change their state from the properties window:
The modal should look like this:
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:
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:
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:
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:
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):
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:
For each modal, we need to assign an action to their continue button, and this simply passes a false value to close them:
Now, we can select a contact, choose a subject, write a body and send the email:
We can open it to make sure it was delivered:
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.
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!
Please enter your email address and receive the latest updates.
Blag aka Alvaro Tejada Galindo is a Senior Developer Advocate at Nylas. He loves learning about programming and sharing knowledge with the community. When he’s not coding, he’s spending time with his wife, daughter and son. He loves Punk Music and reading all sorts of books.
