Use the Code Editor

Decide what you want to create: a Single Send or an Automation message.

To learn more, see Marketing Campaigns email designs.

When you add HTML code, you can write from scratch or use code from another HTML editor. To use HTML code from another application, copy and paste that code into the content area of the Code Editor.

When you write your HTML code, consider the following examples. They show the recommended structure and organization of custom HTML code. Twilio represents the content of your modules as [MODULE CONTENT].

Twilio SendGrid doesn't lint or otherwise validate your HTML code outside of flagging errors.

1
  <table class="module" role="module" data-type="text">
2
    <tr>
3
      <td style="[CSS rules]; background-color: [some color]">
4
        [MODULE CONTENT]
5
      </td>
6
    </tr>
7
  </table>

1
<table class="wrapper" role="module" data-type="image">
2
  <tr>
3
    <td style="[CSS rules]; text-align: [left|right]">
4
      [MODULE CONTENT]
5
    </td>
6
  </tr>
7
</table>

1
  <table role="module" data-type="imagetext">
2
    <tr>
3
      <td>
4
        <table>
5
          <tr role="module-content">
6
            <td class="templateColumnContainer" >
7
              <table>
8
                <tr>
9
                  <td class="leftColumnContent" role="column-one">
10
                    <table role="module" data-type="image">
11
                      <tr>
12
                        <td role="module-content">
13
                          [MODULE CONTENT]
14
                        </td>
15
                      </tr>
16
                    </table>
17
                  </td>
18
                </tr>
19
              </table>
20
            </td>
21
            <td class="templateColumnContainer" >
22
              <table>
23
                <tr>
24
                  <td class="rightColumnContent" role="column-two">
25
                    <table role="module" data-type="text">
26
                      <tr>
27
                        <td role="module-content">
28
                          [MODULE CONTENT]
29
                        </td>
30
                      </tr>
31
                    </table>
32
                  </td>
33
                </tr>
34
              </table>
35
            </td>
36
          </tr>
37
        </table>
38
      </td>
39
    </tr>
40
  </table>

1
  <table class="module" role="module" data-type="code">
2
    <tr>
3
      <td>
4
        [MODULE CONTENT]
5
      </td>
6
    </tr>
7
  </table>

1
  <table role="module" data-type="columns">
2
    <tr>
3
      <td style="[CSS rules]; background-color: [some color]">
4
        <table>
5
          <tr>
6
            <td class="templateColumnContainer column-drop-area">
7
            [MODULE CONTENT]
8
            </td>
9
            <td class="templateColumnContainer column-drop-area">
10
            [ANOTHER MODULE CONTENT]
11
            </td>
12
          </tr>
13
        </table>
14
      </td>
15
    </tr>
16
  </table>

1
  <table class="module" role="module" data-type="button">
2
    <tr>
3
      <td style="[CSS rules]; background-color: [some color]; text-align: [left|right]">
4
        <table class="wrapper-mobile">
5
          <tr>
6
            <td style="[CSS rules]; background-color: [some color]">
7
              [MODULE CONTENT]
8
            </td>
9
          </tr>
10
        </table>
11
      </td>
12
    </tr>
13
  </table>

1
  <table class="module" role="module" data-type="divider">
2
    <tr>
3
      <td style="[CSS rules]; background-color: [some color]">
4
        <table height=[some height]>
5
          <tr>
6
            <td style="background-color: [some color]"></td>
7
          </tr>
8
        </table>
9
      </td>
10
    </tr>
11
  </table>

1
  <table class="module" role="module" data-type="spacer">
2
    <tr>
3
      <td style="padding: 50px 0 0 0; background-color: [some color]">
4
      </td>
5
    </tr>
6
  </table>

1
  <table class="module" role="module" data-type="social">
2
    <tbody>
3
      <tr>
4
      <td style="[CSS rules]" data-align="[left|right|center]">
5
        <table>
6
        <tbody>
7
          <tr>
8
          [MODULE CONTENT]
9
          </tr>
10
        </tbody>
11
        </table>
12
      </td>
13
      </tr>
14
    </tbody>
15
  </table>

You can review your email message or template in a preview.

1. To preview your email message or template, click Preview.
2. To view the desktop preview, click Desktop.
3. To view the mobile preview, click Mobile.
4. To view a plain-text version of your email message or template, click Plain Text.

Previews also display your chosen From name, Subject, and Preheader text.

1. If you went away from the Code Editor, go to Marketing > Single Sends or Automations page.

2. Click on your desired email message. The Code page for that email message appears.

3. Select the images icon atop the HTML code. The Image Library appears.

4. Click the image you want to add to your email. The Image Details panel appears.

5. Click Copy Image URL. The Image URL Copied banner appears.

6. Close the Image Library page.

7. In your email message or template HTML code, paste this URL into an img source tag.

   Copy code block

   <img src="hostname/path/to/image.ext" />

Twilio SendGrid provides personalization of email messages. To accomplish this, you add substitution tags to your email messages or templates and provide test data to validate the tags.

To add a substitution tag to your email template or message:

1. Click the Settings drawer. The Settings panel appears.
2. Click Tags. The Tags panel appears.
3. Locate the tag you want to add to your email.
4. Click the copy icon next to that tag.
5. Paste the tag into the module.

{{ insert first_name 'default=default' }}

{{ first_name | Pat Bloggs }}

{{ insert first_name 'default=Pat Bloggs' }}

To view a preview with the integrated test data:

1. Open a design in the Design Editor.

2. Click Preview.

3. Click Show Test Data. The test data panel appears.

4. Insert contact data into the code window.

   • The data uses JavaScript Object Notation (JSON) syntax.
   • JSON structures data as a collection of key-value pairs.
   (information)

   Example of a test data JSON

   If you use the first_name substitution tag, the key is first_name and the value is the customer's name. Think of these keys as variables. Like a variable in algebra, these variables represent a value you don't yet know.

   Example of JSON document for sample data

   Copy code block

   1
   {
   2
     "first_name": "Tira",
   3
     "last_name": "Misu",
   4
     "email": "recipient@example.com",
   5
     "alternate_emails": "recipient+@example.com",
   6
     "address_line_1": "1234 N. Real Ave.",
   7
     "address_line_2": "Suite 200",
   8
     "city": "Denver",
   9
     "state_province_region": "CO",
   10
     "postal_code": 80202,
   11
     "country": "United States",
   12
     "phone_number": "+15555555555",
   13
     "Sender_Name": "Orders",
   14
     "Sender_Email": "orders@example2.com",
   15
     "Sender_Address": "1234 N. Exist St.",
   16
     "Sender_City": "Portland",
   17
     "Sender_State": "OR",
   18
     "Sender_Zip": 97227,
   19
     "Sender_Country": "United States"
   20
   }

5. After you save the test data, any substitution tags should display the data in the email preview.

To add categories:

1. Click the Settings drawer. The Settings panel appears.
2. Expand the Single Send Settings menu.
3. In the Categories box, add categories in one of two ways:
   1. Click in the Categories box and choose a category from the dropdown menu.
   2. Click in the Categories box and type the name of a category you want to add.
      • If the category exists, it displays once you type enough characters in its name.
      • If it doesn't exist, it prompts you to add a category with that name.

Every email message includes machine-readable information like its title and what styles get applied to its content. With the editor, you can add this information, or metadata, to your email messages.

The HTML [<head>][] element contain any metadata you want in your email message or template.

To define any custom fonts or CSS styles, you can use the <head> element.

To edit the HTML head of your email message or template:

1. Click the Settings drawer. The Settings panel appears.
2. Click Build. The Build panel appears.
3. Expand the Advanced menu.
4. Click the Edit next to Edit HTML Head. The Edit HTML Head appears.
   Copy code block

   <head></head>

5. Make your desired changes.
6. Click Update.

Using the tag to reference a web font hosted on the internet, users add custom fonts like [Google Fonts][]. Define a web-safe font as a fallback should one of your recipient's clients not support your custom font.

The following popular clients support web fonts:

• Apple Mail
• Outlook.com app
• Outlook 2000
• Default Android Mail app (not the Android Gmail app)
• iOS Mail

This list might change. Twilio can't guarantee web font support. Some inbox providers don't support fonts.

To add a custom font using the HTML <head>:

1. Open the HTML Head by navigating to the Build tab in the Design Editor.

2. Scroll down to the Advanced drop-down menu and select Edit HTML Head.

3. Click Edit to begin making your changes.

4. Insert a <link> tag containing an href attribute that points to your web font.

   Copy code block

   <link href="https://fonts.google.com/specimen/Oswald" rel="stylesheet" />

5. To indicate that you want to use the web font, add an HTML <style> tag with CSS rules:

   Copy code block

   1
   <style>
   2
     body { font-family: 'Oswald', sans-serif; }
   3
   </style>

Twilio SendGrid hosts the images included in the pre-built templates and any images you have uploaded to the image library, so when you export a template's HTML from the design editor, the embedded URLs in each <img> tag remains valid.

• Sending an Email
• A/B Testing
• Campaign Statistics
• Marketing Campaigns Email Designs