HTML Builder

To give you more flexibility and control over your email design, our Custom HTML editor allows you to code up your own emails on the fly, or paste in a template you've created outside of Drip.

The Custom HTML Builder gives marketers an easy and accessible way to:

• Create raw, custom HTML emails

• Copy/paste HTML email templates into Drip

If you opt to continue with this route and design your email in this editor, keep in mind that you'll be responsible for handling the following aspects about the email design:

• Formatting and CSS styling

• Media queries

• Compatibility with different email clients, web browsers, and devices.

The Custom HTML email editor is exclusive to the Text Builder and can be used for single emails, email series, and one-off emails. Once you’ve created an email and are in the email editor, you’ll see the option to switch to Custom HTML.

 

Switch To Custom HTML Editor

To design your email in Custom HTML:

1. Create a new Single Email, Email Series, or Automation email using the Text Builder

2. Once inside the Text Builder, click Switch to Custom HTML

3. Before the editor switches over to Custom HTML, you'll see a prompt to remind you of the following:

• If you switch to Custom HTML, whatever you type or paste will be what Drip sends.

• Be aware that switching views will delete the current email content.  

4. To confirm the switch, click I understand

 

Working in Custom HTML

Once in the Custom HTML editor, there are shortcodes for your unsubscribe link and your postal address which are already included. As a marketer, you’re required by law to display the postal address of your business and to give people a way of unsubscribing from your email list in each marketing email you send.

Here are the unsubscribe and postal address shortcodes you can use in the editor:

Unsubscribe link shortcode options:

• {{ unsubscribe_link }}

• {{ unsubscribe_url }}

Postal address shortcode options:

• {{ inline_postal_address }}

• {{ postal_address }}

• {{ html_postal_address }}

If you attempt to save your progress without either of those elements, you’ll get the following error (message for missing postal address):

• If you copy/paste HTML into this editor, be sure to reinsert the shortcodes for your unsubscribe link and postal address. 

Aside from the required shortcodes for unsubscribing and your postal address, we give you free-range to build your email with your own HTML code.

 

HTML Builder Fonts

CSS Web fonts (non-web-safe fonts) are available to use in the HTML Builder and in the Text Builder. 

To include a custom font in your Custom HTML or Text Builder emails click the Source button in the text editor ("< >"), add a <style> tag that uses CSS @import to get the font, and then styles the rest of the text. 

Paste the following code:

<style type="text/css">@import url('https://fonts.googleapis.com/css?family=Indie+Flower');

.fontifyme { 

  font-family: 'Indie Flower', cursive, sans-serif;

}

</style>

<p class="fontifyme">The quick brown fox jumps over the lazy dog.</p>

The above example uses the Indie Flower font, but you will want to update it with whatever font you’d like to use in your email. 

If you’re using custom fonts in the HTML builder, here are a few things you should consider: 

• Not all email clients render custom Google Fonts so your font may not render as expected.

• Always use a web-safe fallback font, as we cannot guarantee that the font chosen in your email will be the font displayed to the recipient.

The following email clients support custom fonts:

• Apple Mail
• iOS Mail (the default email browser on iOS)
• Default Android email client

The following email clients support web fonts: 

• Apple Mail
• iOS Mail
• Google Android
• Samsung Mail (Android 8.0)
• Outlook for Mac
• Outlook App

The following fonts are web-safe and will display consistently across email clients: 

• Arial 
• Comic Sans MS
• Courier New
• Georgia
• Helvetica 
• Lucida Sans Unicode
• Tahoma 
• Times New Roman
• Trebuchet MS
• Verdana