Create an Advanced Email with code snippets
Here’s an advanced email template using HTML, CSS, AMPscript, and personalization strings in Salesforce Marketing Cloud (SFMC).
Features in This Email
- Responsive Design – Works on all devices.
- Personalization – Uses %%FirstName%% and AMPscript for dynamic content.
- Dynamic Offer Section – Shows different offers based on @loyaltyTier.
- Call-to-Action (CTA) Button – Engaging, trackable links.
Advanced Email Code for SFMC
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Exclusive Offer for You</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
.container { width: 100%; max-width: 600px; margin: auto; background-color: #ffffff; padding: 20px; border-radius: 10px; }
.header { text-align: center; padding: 20px; background-color: #007BFF; color: white; border-radius: 10px 10px 0 0; }
.content { padding: 20px; text-align: center; }
.cta-button { display: inline-block; background-color: #28a745; color: white; padding: 15px 25px; text-decoration: none; border-radius: 5px; }
.footer { text-align: center; font-size: 12px; color: #666; padding: 20px; }
</style>
</head>
<body>
%%[
VAR @loyaltyTier, @discount
SET @loyaltyTier = AttributeValue(“Loyalty_Tier”)
IF @loyaltyTier == “Gold” THEN
SET @discount = “20%”
ELSEIF @loyaltyTier == “Silver” THEN
SET @discount = “15%”
ELSE
SET @discount = “10%”
ENDIF
]%%
<table class=”container”>
<tr>
<td class=”header”>
<h1>Exclusive Offer Just for You, %%FirstName%%!</h1>
</td>
</tr>
<tr>
<td class=”content”>
<p>We appreciate your loyalty. As a **%%=v(@loyaltyTier)=%% member**, you get an exclusive **%%=v(@discount)=%%** discount!</p>
<p>Click below to claim your special offer.</p>
<a href=”https://yourwebsite.com/offer?email=%%emailaddr%%” class=”cta-button”>Claim Your Offer</a>
</td>
</tr>
<tr>
<td class=”footer”>
<p>© 2024 Your Company | <a href=”%%unsubscribe%%”>Unsubscribe</a></p>
</td>
</tr>
</table>
</body>
</html>
How This Works
- AMPscript Personalization:
- It checks the subscriber’s Loyalty_Tier field.
- Assigns a discount based on their tier (Gold = 20%, Silver = 15%, Others = 10%).
- Dynamic Personalization:
- Uses %%FirstName%% to greet each subscriber.
- Inserts %%emailaddr%% into the CTA link for tracking.
- Responsive Design:
- The template is mobile-friendly using a flexible table layout.
- Call-to-Action (CTA):
- The “Claim Your Offer” button links to a personalized landing page with the user’s email.
Next Steps
- Test with Different Loyalty Tiers to see the discount changes.
- Preview & Test in SFMC Email Studio to ensure rendering works on all devices.
- Add A/B Testing for subject lines, CTA color, or layout changes.
