Search code examples
handlebars.jssendgridsendgrid-api-v3dynamic-contentsendgrid-templates

How to add JSON section tags to a SendGrid contact for parsing with handlebars templating language in dynamic email


A Brief Overview of the Problem

I am trying to store JSON data on my SendGrid contacts for usage in dynamic email templates designed in the SendGrid GUI.

To start, within the SendGrid email builder I can write the following code within a codeblock: enter image description here

Here is the handlebar code in that code block...

<ol>
    {{#each user.accounts}}
        {{#if this.isPending}}
            <li>
                {{this.name}} is <strong>pending activation.</strong>
            </li>
        {{else}}
            <li>
                {{this.name}} is <strong>active.</strong>
            </li>
        {{/if}}
    {{/each}}
</ol>

When I go to preview that code & add some test data I get the following: enter image description here Here is the JSON code in that code block formatted a bit nicer...

{
    "user": {
        "accounts": [
            {
                "name": "Checking",
                "isPending": false
            },
            {
                "name": "401k",
                "isPending": true
            },          
            {
                "name": "Savings",
                "isPending": true
            }
        ]
    }
}

The Question

Everything mentioned above is PERFECT so far - this is exactly what I want... To populate email data based on dynamic content present on each contact the email is going to. Here is where I hit the roadblock, where is that JSON Test Data coming from on the contact when the real email is sent out? And how do I populate a contact with JSON data using the API?

As far as I can tell, there is no option to add this custom JSON data to a new contact when creating one via the API (or via the GUI, for that matter) (see API docs here)

When I set up this email to send out to my SendGrid contacts via a SendGrid automation flow, does anyone know how to populate the JSON used by my code block for showing pending/activated accounts with data specific to each user?

Thank you, I greatly appreciate any help on this!


Solution

  • I think that JSON data is actually only useful when you are using the API to send an email with a template. You then provide the JSON data as dynamic_template_data and it is populated in the email template.

    When dealing with Automations, you need to pull the data from the contact record itself. You can get the data you have on a Contact in the Tags section of the template designer.

    In the design section, choose Tags, then scroll down to find the available contact data tags, starting with {{first_name}}

    There are a number of fields that already exist on contacts, like first_name, last_name, email, address_line_1, etc. You can also add Custom Fields which give you further fields you can use on your contacts. Custom Fields can be created by adding new columns on an CSV upload of your contacts, by creating them in the SendGrid admin or by creating them via API.

    If you are using the API to create or update your contacts, you can pass an object of custom_fields as part of the contact record in the API request. For example:

    const data = {
      "contacts": [
        {
          "email": "[email protected]",
          "custom_fields": {
            "w1": "2002-10-02T15:00:00Z",
            "w33": 9.5,
            "e2": "Coffee is a beverage that puts one to sleep when not drank."
          }
        }
      ]
    };
    

    Note that to set custom fields on a contact when you create/update by the API like this, you need to use the custom field ID as the key in the custom_fields object (like the example above, the IDs "w1", "w33" , "e2" were used). If you need to know those IDs, you can use the API to get all field definitions.

    Once you have added Custom Fields they will also be available as Tags in the design editor, then you can use them in the email design.

    The only thing is, I notice you are using an array of accounts in your example. If you need an array of arbitrary data, then I don't believe you can achieve that with contact data and automations. You can set individual custom fields for, say, a checking account, 401k and savings. But you cannot have arbitrary data in a custom field. If you really need the data to be arbitrary, then Automations might not be right for you and you should send your emails out using the send mail API and providing dynamic template data.