Use the Code Editor to create a template, edit a SendGrid template, or build a campaign with your own custom HTML. With helpful features like preview, tag completion, and error flagging, you can confidently edit your HTML.

Getting Started with the Code Editor

  1. From the left-hand navigation, select Marketing, and then click Campaigns.

  2. Click Create Campaign.
    To create a campaign from one that has not yet been sent, find the version you want to use and click the action menu next to the campaign and then select Edit or Duplicate. To create a campaign from one that has already been sent, Duplicate will be the only option.

  3. Select the template that you want to use for your campaign.
    You can select a Blank Template, a custom template that you have already created, or one of SendGrid’s pre-built templates. For more information, see Working With Templates.

  4. Select Code Editor, and then click Continue.
    If you have already built the HTML that you want to use in another application, copy and paste that code directly into the content area of the code editor. You can also write the HTML for your campaign or template directly in the code editor. The code editor has predictive text completion, color-coded syntax highlighting, and detailed error messages.

  5. The Code Editor features a Live Preview in the content area. The preview will show changes to the HTML as they are made in real time. The default preview mode is in desktop format.
    You can toggle between a preview of how your campaign or template will appear on a recipient’s desktop and mobile phone by clicking either the desktop or mobile phone icons above the content area. You can also view a plain-text version of your campaign or template by clicking the T icon. When in this preview mode, you can edit the plain text content of your campaign or template by clicking the Edit Plain Text button.

Once you create a new campaign or template in the Code Editor, you cannot switch to the Design Editor.

Uploading Images

  1. Select the Images icon above the HTML code. A window opens where you can upload images to your image library.

  2. Select the image you want from your image library.

  3. Select the Image Details tab and copy the URL in the Image Source URL tab by clicking Copy URL.

  4. Paste this URL in the image source tag in your campaign or template’s HTML. For example: <img src="your image URL here">

Using Substitution Tags

Substitution tags allow you to easily generate dynamic content for each recipient on your contact list. When you send to a list of recipients you can specify substitution tags specific to each recipient.

To add a substitution tag to your campaign:

  1. Click the Settings tab on the left side of the editor.

  2. Click the Tags tab at the top of the Settings window.

  3. Locate the tag you want to add to your campaign and click it to automatically copy it to your clipboard.

  4. Paste the tag into the module.

You can add the following substitution tags to your marketing campaign:

Substitution Tag Description Type
[%email%] The email address of the recipient Personalization
[%first_name%] The first name of the recipient Personalization
[%last_name%] The last name of the recipient Personalization
[Sender_Name] The name of the sender selected when sending your campaign Sender Identity
[Sender_City] The city on record for the sender selected when sending your campaign Sender Identity
[Sender_State] The state on record for the sender selected when sending your campaign Sender Identity
[Sender_Zip] The zip code on record for the sender selected when sending your campaign Sender Identity
[Unsubscribe] This tag will be replaced with a link allowing your recipient to be added to the unsubscribe group selected when sending your campaign. Unsubscribe
[Unsubscribe_Preferences] This tag will be replaced with a link allowing your recipients to opt into or out of the various email unsubscribe groups you offer. Unsubscribe
[Weblink] This tag will be replaced with a link allowing your recipients to view your campaign content directly within their web browser. Weblink

For contacts with no entry in a custom field, the substitution tag appears blank. To set a default value, use the following pattern:

[%first_name | Valued Customer%]

Adding Categories

Assigning categories to a campaign allows you to track emails based on your own categorization system. By assigning your campaign to a category, you can track statistics across multiple similar campaigns. Example categories: “Weekly Digest,” “Product Announcements.”

  1. Click the Settings panel located on the left-hand side of the window to expand it.

  2. Navigate to the Settings tab, and click Campaign Settings to expand the menu.

  3. Locate the Categories field under Campaign Settings.

  4. Select the Add Categories field and then type in the tag to add and hit enter.

Currently, only 10 categories can be added to each campaign.

Additional Resources