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 an existing one, find the version you want to use and click the action menu next to the campaign and then select Edit or Duplicate.

  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. Preview your campaign or template by clicking Preview.

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 tab, and click Manage Image Library. A window opens where you can upload images to your image library.

  2. Select the image you want from your image library. The Image Details tab appears.

  3. 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. Navigate to the Tags tab.

  2. Locate the tag you want to add to your campaign and click the copy icon.

  3. 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%]

Previewing Your Campaign

To preview your campaign or template, click the Preview button in the upper-left corner.

You can toggle between a mobile and desktop preview mode by clicking either the desktop or mobile phone icons above the content area.

To view a plain text version of your campaign or template, click 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.

When previewing a campaign, you will also see a preview of the From name, the Subject, and the preheader text that you have selected.

Additional Resources