Send Custom HTML Emails From Lead Prosper Using SendGrid Dynamic Templates

This article shows how to send emails from SendGrid from a Lead Prosper account through a Buyer Payload or Campaign Trigger. You’ll create a dynamic template in SendGrid, then configure a payload in your Buyer or Campaign Trigger set up in order to call the SendGrid Mail Send API with your lead data. This is great for anyone using Lead Prosper who want to automatically send lead data through an HTML email template as opposed to the plain text emails that are sent by default.

Before you get started you'll need the following from SendGrid:

1. SendGrid account with a verified sender or authenticated domain
2. SendGrid API Key with Mail Send permissions (https://www.twilio.com/docs/sendgrid/ui/account-and-settings/api-keys)
3. Dynamic Email Template already created in SendGrid
4. The template_id for that template

Step 1 — Prepare your SendGrid Dynamic Template

1. In SendGrid, go to Email API → Dynamic Templates and create a template (or open an existing one).

1. Log in to your SendGrid Dashboard.

   Go to Email API → Dynamic Templates.

   Click Create Template, give it a name, and then Add Version.

   Choose either:

   • Design Editor (drag-and-drop + code), or
   • Code Editor (write your own HTML).

2. Insert Handlebars Placeholders

SendGrid uses Handlebars syntax ({{variableName}} ) to inject dynamic values. You can use Basic Variables (first_name, last_name, etc.), Nested Objects (contact.first_name, contact.last_name), Conditionals (IF this THEN that), and Loops. For the sake of our example we are going to keep it simple and stick with Basic Variables, but here are some examples.

• Basic Variable Example:

<p>Hello {{first_name}},</p>
<p>Thanks for signing up with {{company_name}}!</p>

• Nested Object Example (if you send structured JSON):

<p>Your order number is {{order.id}} placed on {{order.date}}.</p>

• Conditionals:

{{#if discount_code}}
  <p>Your discount code is: <strong>{{discount_code}}</strong></p>
{{else}}
  <p>No discounts available at this time.</p>
{{/if}}

• Loops (each helper):

<ul>
  {{#each items}}
    <li>{{this.name}} — ${{this.price}}</li>
  {{/each}}
</ul>

Here is an example:

First Name: {{ firstName }}
Last Name: {{ lastName }}
Email: {{ email }}
Phone: {{ phone }}
Address: {{ address }}
{{ city }}, {{ state }} {{ zip }}

And this is how it would look in your SendGrid Dynamic Template

Once you have the basic dynamic template done, Save + Publish and go to back to your Dynamic Templates dashboard in order to retriever the Template ID. We will need this template_id for the API call we are going to make from Lead Prosper to trigger sending the HTML email.

The Template ID can be found by expanding your Dynamic Template details on the main Dynamic Template dashboard.

Now that you have the Template ID it's time to set up the API call in Lead Prosper.

Step 2 — Set Up Your Buyer Payload or Campaign Trigger

Now that you have your Dynamic Template created in SendGrid it's time to set up the API call to trigger the Dynamic Template to be sent with your lead data. You can set this up using either a Buyer configuration or a Campaign Trigger, but the actual payload will be the same regardless of which method you choose. Create your buyer or campaign trigger, configure your settings, and then let's get started with the payload.

First things are the main API details:

POST URL: https://api.sendgrid.com/v3/mail/send

Headers:

key = Authorization

value = Bearer {{TOKEN_ID}} (replace with your SendGrid API key)

Response Mapping: (Buyer Only)

Response Type: JSON

Accepted Condition: HTTP status code is

Key: http_status_code

Value: 202

For the payload itself you can customize the lead data to send any values you are collecting, however you must include a valid and authorized FROM email, a TO email (this can be static or dynamic), the dynamic_template_data, and the template_id. Here is an example payload that you could use as a template for building out your SendGrid payloads moving forward:

{
    "from": {
        "email": "dynamic@leadprosper.io"
    },
    "personalizations": [
        {
            "to": [
                {
                    "email": "dynamic+test@leadprosper.io"
                }
            ],
            "dynamic_template_data": {
                "firstName": "{{first_name}}",
                "lastName": "{{last_name}}",
                "email": "{{email}}",
                "phone": "{{phone}}",
                "address": "{{address}}",
                "city": "{{city}}",
                "state": "{{state}}",
                "zip": "{{zip_code}}",
                "buyer_name": "Test 123 Buyer"
            }
        }
    ],
    "template_id": "d-ea6b4f2100a54ccd95a1edb6eb5136f7"
}

• 'from' email - replace the value with the authorized SendGrid FROM email you are going to be sending the emails from
• 'to' email - replace with the email address you are going to be sending the email to. This can be a static email address, or it can be dynamic from the lead data ie. {{email}}
• dynamic_template_data - this is where you are going to map your lead data to the handlebar values you set up in Step 1 in your Dynamic Template. For example: "firstName": "{{first_name}}"
• template_id - replace this value with the template_id for the Dynamic Template

Example Buyer Set Up:

Example Campaign Trigger Set Up:

When you are done with your payload it's time to save and test. Open the Test Buyer or Test Action tool (depending on whether you set up a Buyer or a Campaign Trigger), replace the "email" field value from the generated email address to an email address that you have access to, and hit Submit. If everything was set up correctly you should get back an Accepted Response and you should have a fresh HTML Dynamic Template in your email inbox containing the test lead data that was generated.

The test is the final step. If all is good you can enable either the Buyer or Campaign Trigger and begin sending HTML emails using SendGrid from your Lead Prosper account!