# How to trigger emails from Savvy using Sendgrid

{% hint style="info" %}
SendGrid is an integration we use for sending personalized emails to users and for storing them as contacts to trigger whole multi-step email campaigns, so we'll divide this into those two sections.
{% endhint %}

## Sendgrid

### Step 1: Install the Integration

* Get your API key from Sendgrid. You'll have to create it on the Settings section of their website. Remember to copy it at the creation moment because you won't be able to see it again.
* Go to the Integrations Tab. You can find this when leaving the builder. To achieve that, click on the back arrow at the top left, and select Integrations from the navigation sidebar.
* Select Sendgrid and click on Install, you'll need to paste the API key you created on their website.

### Step 2: Create the Data Output

* Create a new Data Output on the Data Tab of the Left Sidebar
* Go to the Options Tab that's now open on the Right Sidebar with all the Data Output settings.&#x20;
* Choose Sendgrid from the 'Select Output' Dropdown.

### Step 3: Select the Template

You have two options here. You can:

* Send From Savvy: this will send our own template which just informs that there's been a submission, the email of the submitting person, and all the recollected data from the Micro-Product. We recommend this template to notify yourself every time a user goes through your product.
* Template ID: Sendgrid gives you the option to generate your own personalized template and send it to the user on every email. For this, you'll have to copy the Template ID and paste it into the corresponding input field.

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FUAIJOwCCqpNIKuvGLmbT%2Fimage.png?alt=media\&token=6ea30a9b-ba75-4570-8ed1-44f52256b6a3)

### Step 4: Add Email Data

* Connect the user's input with Sendgrid. Add the keys of the corresponding components to send your template to the user's email address, add a subject, etc.

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FGrho9CdhfvxCz8rNEypM%2Fimage.png?alt=media\&token=e616e79f-5a5f-46b0-a27d-c18302656c07)

### Step 5: Trigger it!

* On the Data Output, check the 'Manual Trigger Only' box
* Select the component or page from your Micro-Product where you want the Data Output to be triggered.
* Go to the Triggers Tab on the Right Sidebar and set it!

## Sendgrid Contacts

### Step 1: Install the Integration

* Get your API key from Sendgrid. You'll have to create it on the Settings section of their website. Remember to copy it at the creation moment because you won't be able to see it again.
* Go to the Integrations Tab. You can find this to the left of the builder, on the outside left Sidebar.
* Select Sendgrid and click on Install, you'll need to paste the API key you created on their website.

### Step 2: Create the Data Output

* Create a new Data Output on the Data Tab of the Left Sidebar
* Go to the Options Tab that's now open on the Right Sidebar with all the Data Output settings.&#x20;
* Choose Sendgrid Contacts from the 'Select Output' Dropdown.

### Step 3: Get your Contact List ID

* Go to your Sendgrid Account and select the contact list where you want to add the contacts
* At the end of the URL, you'll find the list's ID, it will look something like this `1d4039ea-5fce-4096-9bd9-5da23f00d78c`

### Step 4: Add the List ID

* With the Sendgrid Contacts Data Output selected, scroll down to the bottom of the Options Tab.
* Paste your ID in the input field with the 'List to add contacts to' label&#x20;

### Step 5: Trigger it!

* On the Data Output, check the 'Manual Trigger Only' box
* Select the component or page from your Micro-Product where you want the Data Output to be triggered.
* Go to the Triggers Tab on the Right Sidebar and set it!
