So you put a lot of thought, time, and effort into building the perfect newsletter using Mailchimp.
However it doesn’t present itself to your subscribers as you expected, with broken links, images not loading, custom HTML bits that don’t do what they should do.
Sounds familiar? Bummer, I know.
But don’t worry, most of them are pretty easy to fix.
In this post, I’ll go over why your Mailchimp HTML code is not working , and show you how to fix and/or prevent them.
Why Is Mailchimp HTML Code Not Working?
Let’s go over some of the main HTML issues you can run into with your Mailchimp campaigns.
⚡Also Read: Mailchimp RSS Feed Not Working
But before all this, double check if your code is correct to begin with and you are not using unsupported HTML elements or attributes.
You can use ChatGPT to validate your code, if you are not a techie.
1. No Absolute Paths For Images And Hyperlinks
If the images and hyperlinks on your newsletter don’t have absolute paths that point to the hosting server, the recipients will have problems viewing them.
To ensure that the images have absolute paths, code them like this:
<img src="http://www.mysite.com/email/images/photo.gif ">
instead of coding like this:
<img src="/images/photo.gif">
Similarly, your hyperlink codes should go like this:
<a href="http://www.mysite.com/index.html" shape="rect">Cliquez ici</a>
not like this:
<a href="index.html" shape="rect">Cliquez ici</a>
⚡Also Read: Mailchimp Email Not Displaying Correctly
If you are in the habit of using a WYSIWYG to compose your emails, always check that every <img/> tag uses an absolute path.
Also upload your images to a public server.
Or just upload to Mailchimp’s library at the beginning of any project and insert from there. This will certainly have absolute paths.
2. Added Extra HTML Code
Using software like Word, Publisher, Frontpage compose an email and copy-pasting from there to your Mailchimp builder can cause unnecessary pieces of code to be copied along.
This can result in your Email looking or behaving differently to what you expect.
Your best bet here is to use a basic text editor like Notepad to write the code and either import it or copy and paste it to Mailchimp.
3. Javascript In HTML
Most email services block Javascript as a security precaution.
Having Javascript code in places like submit buttons, pop-up window links, image preloaders, and widgets in your designed email can cause it to be blocked.
⚡Also Read: Mailchimp Columns Not Working
So make sure those parts of the emails don’t contain any Javascript code.
If you copy HTML from an existing web page and paste it to the Mailchimp builder, strip it completely of any Javascript.
4. Incorrect Use Of CSS
Most email applications will remove the Head and Body tags from the emails you send out if there’s embedded CSS code in.
They do so to prevent the embedded CSS from interfering with their page CSS.
So, you are better off using inline CSS.
But if you must embed, do so before the content of your email after the <Body> tag.
5. Not Taking Mailchimp Guidelines Into Account
Another HTML- related issue you can run into with your Mailchimp email campaign is not following Mailchimp’s guidelines while you are writing your code.
All marketing emails sent through Mailchimp must have an *|UNSUB|* tag.
It’s compulsory. Without that you won’t be able to send it out.
So make sure it’s there in both HTML and plain text email.
6. Trying To Update Template HTML
If you try to make changes to the HTML coding of a Mailchimp’s template, say using an API, you will mess up your campaign for sure.
There have been reports of such modifications appearing only in the first campaign but not in next ones, and only the plain text emails showing the expected changes while the HTML remaining unchanged, etc…
To solve this issue, or prevent it from happening you must either set your campaign on custom HTML instead of using a template.
Or you can create a template and create editable content areas within that template and use the API to make the changes in those editable content areas.
Quick Recap
Mailchimp HTML issues are pretty common for beginners. You should double check these:
- Images and links paths
- Extra code copied from other applications
- Using Javascript and CSS incorrectly
- Messing with template HTML
You can solve or prevent these issues pretty quickly but for code issues, especially Javascript and CSS, it might take some time.
You can speed things up a lot by using ChatGPT to debug the code.
