---
title: "How to: Configure a SendGrid API Module With Server-Side Execution (SSE)"
slug: "how-to-configure-a-sendgrid-api-module-with-server-side-execution-sse"
updated: 2025-09-25T20:28:16Z
published: 2025-09-25T20:28:16Z
canonical: "docs.unqork.io/how-to-configure-a-sendgrid-api-module-with-server-side-execution-sse"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to: Configure a SendGrid API Module With Server-Side Execution (SSE)

## Overview

In this how-to guide, you'll learn how to build an API API module using the [SendGrid API service](/v1/docs/sendgrid-in-unqork) for sending emails. The API module uses SSE to increase security and prevent malicious actors from compromising application data. You'll also build a Front-End module where end-users can craft an email message and choose where to send it.

## Configuring the SendGrid Email API Module

First, create and configure an API API module that sends the email. In this API API module, you'll update and configure components to make the API call. Later, you'll build a FE Front-End module that lets end-users enter a title and message to send using the API call.

### Configure the Initializer Component

This [Initializer](/v1/docs/initializer-component) component receives the Execute Module call from the FE Front-End module you'll configure later. Then, it triggers the [Plug-In](/v1/docs/plug-in-component) component you'll set up next.

1. Create a new API API module and open it in the Module Builder.
2. Hover over the **initCreateSubmission** **I****nitializer** component and click **(Edit Component)**.
3. In the Property ID and Label Text fields, update the values to `initPluginSendEmail`.
4. Navigate to the **Actions** settings.
5. To the right of **Inputs & Outputs**, click Edit.
6. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginSendEmail | trigger | GO |

> [!NOTE]
> You'll set up the **pluginSendEmail** Plug-In component in the next section.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Init_Config_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A45Z&se=2026-11-07T21%3A53%3A45Z&sr=c&sp=r&sig=TMoB4lui2Oy1IU780zwG9ibUvmAgWw1QQ6wcICbkT48%3D)
7. Click **Save Component**.

### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component executes the SendGrid API. In the Inputs table, you'll reference the **emailAddress** and **emailMessage** **H****idden** components from the Front-End module you'll set up later.

1. Hover over the **pluginCreateSubmission** Plug-In component and click **(Edit Component)**.
2. In the Property ID and Label Text fields, update the values to `pluginSendEmail`.
3. From the **Service Type** drop-down, select **External**.
4. From the **External Services** drop-down, select **SendGrid**.

> Non-Training environments require their own SendGrid service. Learn how to set up SendGrid in Unqork with our [SendGrid in Unqork](/v1/docs/sendgrid-in-unqork) article.
5. In the pre-populated **Data Source URL** field, add mail/send to the end of `https://api.sendgrid.com/v3/`. The value becomes `https://api.sendgrid.com/v3/mail/send`.
6. To the right of **Inputs & Outputs**, click Edit.
7. In the Inputs table, enter the following:

> [!NOTE]
> Feel free to enter your own email address and subject in these sections for testing.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Init_PlugIn_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A45Z&se=2026-11-07T21%3A53%3A45Z&sr=c&sp=r&sig=TMoB4lui2Oy1IU780zwG9ibUvmAgWw1QQ6wcICbkT48%3D)

| Property ID | Mapping |
| --- | --- |
| emailAddress | personalizations[0].to[0].email |
| emailMessage | content[0].value |
| 'youremail@email.com' | from.email |
| 'Hello Subject' | subject |
| 'text/html' | content[0].type |
8. Navigate to the **Actions** settings.
9. In the **Error Trigger** field, enter `initError`. This value triggers the **initError** **I****nitializer** component.
10. Click **Save Component**.

### Configure the Second Initializer Component

This [Initializer](/v1/docs/initializer-component) component triggers an error message if the SendGrid API fails.

1. Drag and drop an **I****nitializer** component onto your canvas, placing it inside the **panelConfig** **P****anel** component.
2. In the Property ID and Label Text fields, enter `initError`.
3. Navigate to the **Actions** settings.
4. To the right of **Inputs & Outputs**, click Edit.
5. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | sendGridResponseError | value | There was an error sending the SendGrid email |
6. Click **Save Component**.

### Update the First Hidden Component

Next, you'll update the **requestParameter** **H****idden** component to store the **emailAddress** data.

1. Hover over the **requestParameter** **H****idden** component and click **(Edit Component)**.
2. In the Property ID and Label Text fields, update the values to `emailAddress`.
3. Click **Save Component**.

### Configure the Second Hidden Component

The second [Hidden](/v1/docs/hidden-component) component stores the **emailMessage** data.

1. Drag and drop a **H****idden** component onto your canvas, placing it inside the **panelRequest** **P****anel** component, and below the **emailAddress** **H****idden** component.
2. In the Property ID and Label Text fields, enter `emailMessage`.
3. Click **Save Component**.

### Update the Third Hidden Component

Lastly, you'll update the **responseParameter** **H****idden** component to store the error response for the API call. When the API call fails, the **initError** **I****nitializer** component fires. The Initializer component then outputs an error response to this Hidden component.

1. Hover over the **responseParameter** **H****idden** component and click **(Edit Component)**.
2. In the Property ID and Label Text fields, update the values to `sendGridResponseError`.
3. Click **Save Component**.

The SendGrid API module is now configured. Next, build the FE Front-End module where end-users can send email messages using the SendGrid API.

## Configuring the Front-End Module

The FE Front-End module is where you'll remotely execute the API API module. This module is also where the end-user enters the email information.

### Configure the Field Group Component

This component enables you to organize your module.

1. Create a new Front-End module and open it in the Module Builder.
2. Drag and drop a **F****ield Group** component onto the canvas.
3. In the Property ID field, enter **fgExecuteModule**.
4. Click **Save Component**.

### Configure the Text Field Component

This component acts as the field where your end-user will enter the recipient's email address.

1. Drag and drop a **T****ext Field** component onto the canvas, placing it inside the **fgExecuteModule** **F****ield Group** component.
2. In the Property ID field, enter **emailAddress**.
3. In the Label Text field, enter `Email Address`.
4. Navigate to the **Validation** settings.
5. Under User Input, set **Required** to (ON).
6. Click **Save Component**.

### Configure the Text Area Component

In this field, the end-user enters a message to send as part of the email.

1. Drag and drop a **Text Area** component onto your canvas, placing it inside the **fgExecuteModule** **F****ield Group** component and below the **emailAddress** **T****ext Field** component.
2. In the Property ID field, enter **emailMessage**.
3. In the Label Text field, enter `Email Message`.
4. Navigate to the **Validation** settings.
5. Under User Input, set **Required** to (ON).
6. Click **Save Component**.

### Configure the Plug-In Component

This Plug-In component executes the SendGrid API API module.

1. Drag and drop a Plug-In component onto your canvas, placing it inside the **fgExecuteModule** **F****ield Group** component and below the **emailMessage** **Text Area** component.
2. In the Property ID and Label Text fields, enter `pluginRemoteExecuteSendEmail`.
3. Navigate to the **Data** settings.
4. From the **Internal Services** drop-down, enter or select **Execute** **Module**.
5. In the **Data Source URL** field, you'll see /fbu/uapi/modules/{moduleId}/execute. Replace {moduleID} with the module ID of the Send Email API API module.
6. To the right of **Inputs & Outputs**, click Edit.
7. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | emailAddress | data.emailAddress |
| 2 | emailMessage | data.emailMessage |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Init_PlugInFrontEnd_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A45Z&se=2026-11-07T21%3A53%3A45Z&sr=c&sp=r&sig=TMoB4lui2Oy1IU780zwG9ibUvmAgWw1QQ6wcICbkT48%3D)
8. In the **Outputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | responseAPIError | data.resolved.responseError |
9. Click **Save Component**.

### Configure the Button Component

This component triggers the **pluginRemoteExecuteSendEmail** Plug-In component.

1. Drag and drop a **Button** component onto your canvas, placing it inside the **fgExecuteModule** **F****ield Group** component and below the **pluginRemoteExecuteSendEmail** Plug-In component.
2. In the Property ID field, enter **btnExecuteEmailAPI**.
3. In the Label Text field, enter `Execute Send Email API`.
4. Navigate to the **Actions** settings.
5. From the **Action Type** drop-down, enter or select **Event**.
6. In the **On Click** field, enter or select `pluginRemoteExecuteSendEmail` .
7. Click **Save Component**.

### Configure the Hidden Component

Lastly, configure a Hidden component to store the error response if the API call fails.

1. Drag and drop a **H****idden** component onto your canvas, placing it inside the **fgExecuteModule** **F****ield Group** component and below the **btnExecuteEmailAPI** **Button** component.
2. In the Property ID and Label Text fields, enter `responseApiError`.
3. Click **Save Component**.

**Preview** your FE Front-End module in Express View. Test the SendGrid API API module by entering your email address and a message in the Express View fields. Click **Execute Send Email API** button to receive an email. If you do not receive the email, check your email's spam folder.

## Resources

- [How to: Use the Server Side Execution Testing Page](/v1/docs/how-to-use-the-server-side-execution-testing-page)
- [Server-Side Execute Q&A](/v1/docs/server-side-execute-qa)

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

Server-Side Execute (SSE) means data is executed outside of the end-users browser. This increases security by preventing data from being manpulated by bad actors.

Front-End (FE) Modules act as the user interface (UI) that end-users see and interact with. FE Modules use Plug-Ins to securly connect to API Modules for executing API calls.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Enter inputs components and actions you want the component to perform.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.