SendGrid Send Mail with external templates

In this short video, I demonstrate how we can create email templates to be used to send email with Send Grid Send Mail API. This demonstration is done in Betty Blocks environment, where we manage the entire list of email templates within Betty Blocks application.

The setup allows business users to create or maintain a list of email templates within the portal environment provided, without the need navigating away from the portal environment they use for working on the application functionalities such as managing users, assets, services, and so on.

Here are the steps on how I setup the template for sending email:

1. Template Model

These are some of the important fields of database table schema for the template. Content column is used to store the HTML content, I have my page designed to which I use the CKEditor to allow editing the content in WYSIWYG mode (i.e. or you may switch to investigate the content in HTML source).

nameNameText (single line)
descriptionDescriptionText (single line)
subjectSubjectText (single line)
contentContentText (multi line)
typeTypeText (single line)
2. Web Servic Definition (i.e. the SendGrid V3 Send Mail API)

Here is the cURL i used to for the SendGrid Send Mail API call, you will need to replace the data-raw with the proper JSON format (i.e. can be found in the SendGrid documentation at

curl –location –request POST ‘’ \
–header ‘Authorization: Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’ \
–header ‘Content-Type: application/json’ \
–data-raw ‘{ “personalizations”: [      {  {% if to_list != null %}        “to”: [    {% for send_to in to_list %}            {            “email”:”{{}}”,            “name”:”{{}}”},    {% endfor %}        ]  {% else %}            “to”: [          {            “email”: “{{email_to}}”          }        ]  {% endif %}      }} …’

3. Email Body

In Betty Block, the liquid templating engine is used to supply and parse the JSON content to allow inserting/replacement of content from the values we supply via the variables we have configured.

Here is the sample content with liquid tags, this content will be parsed and supply as the body content of the SendGrid API.

    "personalizations": [
  {% if to_list != null %}
		"to": [
	{% for send_to in to_list %}
	{% endfor %}
  {% else %}	
        "to": [
            "email": "{{email_to}}"
  {% endif %}
  {% if email_cc != null and email_cc != "" %}
        "cc": [
            "email": "{{email_cc}}"
  {% endif %}
  {% if email_bcc != null and email_bcc != "" %}
        "bcc": [
            "email": "{{email_bcc}}"
  {% endif %}
    "from": {
      "email": "{{email_from}}"
    "subject": "{{email_subject}}",
    "content": [
        "type": "{{content_type}}",
        "value": "{{content_value}}"
4. Configure the HTTP Request to send email using the SendGrid endpoint.

The HTTP Request is an ‘action‘ you may use to call a predefined Web Service (i.e. external endpoint) in Betty Blocks. We may call this ‘web service’ in Betty Blocks ‘endpoint‘ or/and ‘actions‘ for example. Some of the important variables we will need are defined as below:

tempalteObjectThe template object (i.e. the template document as described previously for storing the email template content). This is the object we will be retriving for the defined email content template.
content_valueText ExpressionThe email template content of the “template” document/object.
content_typeTextvalue of “text/html”

Other fields that we will need are: email_to, email_cc, email_bcc, email_subject, email_from, etc. depending on the setting we would like to provide to the SendGrid API’s body payload.

Consuming Azure Cognitive Services API from Betty Blocks

In this article, I am going to share how to consume or connect to a remote or external web services from Betty Blocks. We are going to create a Webservice in Betty Blocks to consume Microsoft Azure Cognitive Services for getting Tags of an image, this is via the Tag Image API (i.e. one of the Azure Cognitive Services – Computer Vision APIs).



  1. From your Betty Blocks application’s SideBar, select Tools – Webservices
Tools menu from the application SideBar

2. Click the “New” button on the Webservices page to add a new Webservice, and fill in the required details.

Create a new Webservice

Host and Header’s values can be grabbed from the “keys and endpoints” of your Azure Cognitive Services resource page. This is shared in the screen below.

Microsoft Azure Cognitive Services

I have specified the Request Content Type as “JSON” (i.e. this is one of the supported request content types as required by the Image Tagging API)

3. Add a new Endpoint for the Webservice

From the Webservice page, add a new Endpoint we would like to consume, screen capture below is the sample of my endpoint configuration. I have named my endpoint as “Get Tags”, and specified all other values according to the Azure Cognitive Services API documentation. (i.e. Tag Image API ).

As the Request Content Type for the Webservice was specified earlier at the Webservice level, we can leave the Request Content-type field as it is (i.e. inherit). Take note of the request payload, in our case since we specified JSON as the content-type, we will just add the body parameter of “url” as requested by the Tag Image API documentation.

Endpoint configuration

4. Test the endpoint

Once configured, you may save and test the endpoint by clicking on the “Run test” button. You may be prompted to provide the input parameter or accept the default value that you have set for testing purpose.

The response will then be returned from the test as shown in the image below.

Sample test result

That’s all we need to do to create a simple Webservice and endpoints in Betty Blocks for comsuming web services. I hope this example helps..

The Image Tag API of Azure Cognitive Service is one of Computer Vision APIs, it gives a quick and easy way to analyze (i.e. tag) any photo or images. You may have realized the Tags returned could be at high matching rate or the other, in the event if the Image Tag API does not give us the accuracy we expected, there will be a need for us to look at the Custom Vision Service of the Azure Cognitive Services. Unlike Computer Vision Service, the Custom Vision Service allows us to specify the labels and train custom models to detect them. It allows us to build, deploy, and improve our own image identifiers for the purpose.