A weekly issue covering features, functionality and news on the topic of Marketing, specifically covering Dynamics 365 Marketing and other interesting tools and tips for anyone interested in the subject.
Subscribe Here
*** NOTE: ALL INFORMATION IS ACCURATE AT DATE OF PUBLISHING ***
I’m a huge advocate for using the out of the box email template editing experience in Customer Insights – Journeys. It’s got a great drag and drop interface and it works well. However, you might outsource your email creation to a 3rd party agency, or perhaps you are even coming from another email tool and don’t want to have to start all over again. Well, the good news is, you can create email templates using custom HTML and just paste in to the editor. The bad news is, unless you really want EVERYTHING LOCKED DOWN, if you just paste the HTML and walk away, the users sending out the emails won’t have the ability to edit anything about them. In this post, I will walk through some of the common things you might want to adjust in your custom HTML email templates. Take a deep breath and let’s take a look!
First, if you have zero HTML experience or are not comfortable with it, this likely isn’t a post for you. Sorry, but it’s a bit fiddly if it’s not your area of knowledge or expertise, but you can always share this blog post with someone who IS comfortable and maybe even finds this kind of thing fun! In my example, I’ve used a site called BeeFree (suggested by a blog reader). I have no affiliation with them, but they do have a pretty cool site and I was able to put this post together thanks to their awesome templates that I could export. Depending on the service being used, you’ll likely have an option to export the HTML and the Images. If you use a service that also provides the ability for you to use images stored on their servers, you just need the HTML (and it’s potentially less steps for you later). However, using images stored elsewhere is always a bit of a gamble. If someone removes them from where they are stored, they will all be broken and not work on your emails.
Ok now that we have the HTML and the images, off to create an Email Template in the Realtime area of Customer Insights – Journeys. Give the template a name, then click on the HTML option from the top right.
Go ahead and paste in the HTML you got from your HTML tool, then close it so you can see the email.
Here is what we think it should look like.
Ah, but it doesn’t quite look as pretty right? If you have the option to use the images stored online, at the very least your images will show up. But, if like me you don’t have that option, anywhere there is an image will just be a blank area with likely the alt value of the image (pulling from the HTML). Also, try clicking on any of the text and you’ll find that you just can’t edit it. Another thing, none of the links will contain the right tracking code, so you are missing out on that functionality too.
First things first, let’s look at how we can get this email looking pretty again AND allow users to update images, text, links and buttons, not to mention the important stuff like any personalisation, the company address and link to unsubscribe. You’ll notice that the Elements tab isn’t there because currently the template doesn’t have any kind of link to the functionality in the marketing app.
All of this is documented by Microsoft where you can see how to use custom attributes so check it out here. Also note that they state they don’t provide support for custom HTML in emails. Not that you can’t use it, but they aren’t going to help you figure out how to make your custom HTML work correctly. Open your email template back up again and add the following code to the top part of the HTML, right before the <style> tag.
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">
Now you will get this little friend back. Hooray! Making progress.
First things first, don’t click on the Enable button the Theme tab. This could take your email from looking nice and formatted…
And change the whole look and feel of it 🙄 – you’ve been warned!
Instead, make sure you check the <style> section of the HTML you added to your template. Pressing the Enable button will add the following to your template (if they are not already in the style section). If you take this, then edit so that each class is accurate for your own requirements.
h1 {
color: rgb(0, 0, 0);
font-size: 34px;
font-weight: normal;
font-family: Verdana, Arial, sans-serif;
line-height: inherit;
text-align: left;
margin: 0px;
}
h2 {
color: rgb(51, 51, 51);
font-size: 24px;
font-weight: normal;
font-family: sans-serif;
line-height: inherit;
text-align: left;
margin: 0px;
}
h3 {
color: rgb(0, 0, 0);
font-size: 16px;
font-weight: normal;
font-family: Verdana, Arial, sans-serif;
line-height: inherit;
text-align: left;
margin: 0px;
}
a {
font-family: Arial, Verdana, sans-serif;
font-size: inherit;
font-weight: normal;
color: rgb(0, 130, 221);
text-decoration: none;
}
.buttonWrapper {
margin: 10px 0px;
}
.buttonClass {
font-family: Arial, Verdana, sans-serif;
font-size: 16px;
font-weight: normal;
border-radius: 4px;
color: white;
border: none;
background-color: rgb(7, 66, 171);
padding: 10px 20px;
text-decoration: none;
}
.buttonClass span {
font-family: inherit;
text-decoration: inherit;
}
[data-layout="true"] {
border: none;
margin: 0px auto;
background-color: rgb(255, 255, 255);
max-width: 600px;
}
So for my example, I updated it to make sure each of the classes above were using the same logic that was used throughout the template using inline CSS. By updating it here then adding to the top of the style section that meant the enable button was no longer there.
h1 {
margin: 0;
color: #000000;
direction: ltr;
font-family: 'Oswald', Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 42px;
font-weight: normal;
letter-spacing: normal;
line-height: 120%;
text-align: left;
margin-top: 0;
margin-bottom: 0;
mso-line-height-alt: 50.4px;
}
h2 {
margin: 0;
color: #000000;
direction: ltr;
font-family: 'Oswald', Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 28px;
font-weight: normal;
letter-spacing: normal;
line-height: 120%;
text-align: left;
margin-top: 0;
margin-bottom: 0;
mso-line-height-alt: 33.6px;
}
h3 {
margin: 0;
color: #000000;
direction: ltr;
font-family: 'Oswald', Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;
letter-spacing: normal;
line-height: 120%;
text-align: left;
margin-top: 0;
margin-bottom: 0;
mso-line-height-alt: 26.4px;
}
a {
text-decoration: none;
color: #000000;
}
.buttonWrapper {
margin: 10px 0px;
}
.buttonClass {
background-color: #ed740c;
border-bottom: 4px solid #D65600;
border-left: 0px solid transparent;
border-radius: 60px;
border-right: 0px solid transparent;
border-top: 0px solid transparent;
color: #ffffff;
display: inline-block;
font-family: Oxygen, Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
font-size: 18px;
font-weight: undefined;
mso-border-alt: none;
padding-bottom: 10px;
padding-top: 10px;
text-align: left;
text-decoration: none;
width: auto;
word-break: keep-all;
padding-left: 50px;
padding-right: 50px;
font-size: 18px;
display: inline-block;
letter-spacing: 2px;
word-wrap: break-word; word-break: break-word; line-height: 36px;
}
.buttonClass span {
font-family: inherit;
text-decoration: inherit;
}
[data-layout="true"] {
border: none;
margin: 0px auto;
background-color: rgb(255, 255, 255);
max-width: 600px;
}
That way I can see all of the components in my theme already, and no one can mess it up by clicking enable and breaking things.
Ok moving on, we will look at images first. There are two things. First you want a way to get your initial ones in there, and second, for users to potentially edit these once they use your template for an email they need to send out.
Strap in, we are going in to the HTML. You can use Ctrl+F when you are in the HTML to search through it. Use something obvious, such as img or the name of the image and then go to the part of the code that contains the image.
We need to surround the part that contains the image with a div like you see below. This tells the system that this part needs to be an editable section of the type image.
<div data-editorblocktype="Image"> YOUR ORIGINAL CODE HERE </div>
So here is an example that already has an image, and we have the div at the start, with the close div tag at the end.
<div data-editorblocktype="Image"> <img alt="Burger Shop logo" data-src="images/Burger_Shop_yellow_logo.png" height="auto" src="images/Burger_Shop_yellow_logo.png" style="display: block; height: auto; border: 0; width: 100%;" title="Burger Shop logo" width="140" /> </div> </div>
Now we get the image control we require and can upload the right image, or select one already in the image library.
If your original code contains a URL already in it like you see below, be sure to add the div at the start of the a href class rather than just the img class.
<div data-editorblocktype="Image"> <a href="https://www.facebook.com" target="_blank"><img alt="Facebook" data-src="images/facebook2x.png" height="auto" src="images/facebook2x.png" style="display: block; height: auto; border: 0;" title="facebook" width="32" /></a> </div>
By doing that, you keep the URL linked to the image which means you can easily update it after uploading the correct image file.
Once you’ve gone through and updated the HTML for all of the images, you can do the same with the text. If there are some areas of text that you don’t ever want any one to edit, no need to add the data-editorblocktype to those bits, just those you want someone to be able to adjust when they are using your template.
So make sure you wrap any text with this div.
<div data-editorblocktype="Text"> YOUR ORIGINAL CODE HERE </div>
Again, if the text includes a URL link in it already, be sure to put the div before the a href class so you can then update the link easily. This also means you can be sure that any tracking is enabled on your links.
The same is true if you need to add a View in browser link. The text must have the data-editorblocktype=”Text” div added to it so you can select it, then add a hyperlink with the View in browser option selected.
You’ll also have an issue with buttons, and without the extra code they won’t be editable. We will need the data-editorblocktype of button for this one.
Just make sure your original code is in the middle.
<div data-editorblocktype="Button"> YOUR ORIGINAL CODE HERE </div>
Now you will be able to click on the button and actually edit it as a button with access to set the link, button text, link alias etc.
If you want to have personalisation, you will need to have the text block include the data-editorblocktype=”Text” first of all, then select the text, click the personalisation button and then link it to the right record type (Contact/Lead or related record), then the correct field.
Bonus tip, you can also edit the HTML before adding it and use double curly brackets in areas you want to be personalised. In this example, {{FirstName}} was added along with {{CompanyAddress}} and {{unsubscribe_link}}. The initial HTML creator tool you use might have options for you to do this already. BeeFree had the option for me to add where the unsubscribe link should go. When you add the HTML, you will see if anything needs mapping with a red icon next to it.
Clicking on the item then allows you to find the right value and link back to it correctly. At a minimum you need to include the Company address and Preference center so make sure you don’t miss them or the marketers won’t be able to use the template without getting errors.
After mapping, there should be no more red errors.
Something else you might want to consider is adding components of the custom HTML as Content Blocks, especially if you have a template that could call for repeating sections. Take this example, where we might want to include information about upcoming webinars to promote. Much easier for someone to be able to drag across a block like this. Your template might have 2 webinars listed, but maybe there is a 3rd or 4th they want to include. If you don’t do this, there is no way they can sort the email out to do that themselves. For this, dig in the HTML of your template that includes this part and copy that section. Paste that in to the HTML of your new Content Block. Also make sure you include the designer section so you can actually edit the content block easily, and also include everything from <style> to </style> so that you can see the text/fonts as intended. Be sure to turn the protected field to No then publish it.
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">
Now go back to your template and add in the following to your HTML in the place where you want someone to be able to include the content blocks,
Now you can drag your content block across, and users will be able to add more below or above that one when they are using it for an email. Hooray!
<div data-container="true"> <div data-editorblocktype="Content"> </div> </div>
Right, that should get you started. You can find out more code and information from Microsoft here. I’ve covered all of these things:
- Adding the HTML to your Email Template
- Adding in the email editor options
- Updating code for text
- Updating code for images
- Updating code for buttons
- Updating code for the View in browser option
- Creating a content block from your code
- Adding your content block to the custom HTML templates
- How to add personalisation in the HTML to link to Company Address/Preference Centre etc
Anything else you can think of? Let me know in the comments below!
A weekly issue covering features, functionality and news on the topic of Marketing, specifically covering Dynamics 365 Marketing and other interesting tools and tips for anyone interested in the subject.
Subscribe Here