How do I use custom HTML within Splash's Email Sender?

Splash's Email Sender allows you to easily create on-brand templates with dynamic elements. However, for the savvy web designers out there, we do offer the ability to insert your own snippet of custom HTML into Splash emails. Below you'll find some information to keep in mind as you begin working with our custom HTML template.

1. Getting Started
You have two options for inserting HTML into your email template. First, you can use our HTML email template, where by default, the only element in the email body is the HTML snippet. 

If you select Create New Email from Templates, you'll see the option to use our Custom HTML Only template. This will typically be located at the very bottom of your template options. 

Clicking Start Email from that template will open up a blank draft. Using the email layout tree on the right hand side, select Custom HTML, then the dropdown arrow next to it. From there, all you need to do is paste your custom HTML into the Past Markup section!  

Screen_Recording_2019-12-10_at_10.28_AM.gif

Alternatively, if you’re a Splash Enterprise customer, you can simply add our HTML element to an existing email. To add the element, select the rectangular plus sign that will show the element library. Then add Custom HTML. 

Image_2019-12-10_at_10.31.09_AM.png


2. What is the Base Email Markup?
Our emails start with a table structure, and the custom HTML element is a row within that table.

<html>
<head>
	<style />
</head>
<body>
	<table>
		<table id="backgroundTable"> <!-- The table with the email border & width -->
			<table id="emailContentTable"> <!-- The table that pads the content from the border -->
				<table id="emailContentTableInner"> <!-- Table that contains the content rows -->
					<tr data-type="custom-html">
						{ your custom HTML }
					</tr>
				</table>
			</table>
		</table>
	</table>
</body>

 

3. Making Text Editable within Custom HTML
If you would like a text element to be editable within the Splash platform, you need to have `class="editable"` and `contenteditable="true"` defined for that text element. Text edited inline like this can be saved as normal.

 

4. Changing Images within Custom HTML
If you’d like to be able to change and upload images within the Splash email editor tool, be sure to add an image tag to your HTML snippet. Any image tag will do!

 

5. Adding Personalization Tags
If you'd like to use our personalization tags in your custom HTML, they work anywhere in the markup and will be customized for your guests upon send. Click here to learn more about the personalization tags that Splash offers.


Just like that, you've taken simple HTML and created a beautiful email template! 

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.