Pixel-Perfect Control
Note: This is an advanced feature. The standard email template provided by Ultimate Spin Wheel is clean, responsive, and works in all clients. However, big brands often require strict adherence to style guides, which means Custom HTML Emails.
This guide explains how to use the code editor to create fully custom Winner Notification Emails that match your brand identity 100%.
1. The Code Editor
We provide a built-in code editor (similar to VS Code) right inside the settings dashboard.
- Go to Spin Wheel > Settings > Email.
- Enable “Use Custom HTML Template”.
- The visual editor (WYSIWYG) will disappear, replaced by a code editor.
Features
- Syntax Highlighting: Makes it easy to read HTML tags.
- Live Preview: You can click “Preview” to see how the HTML renders, although we always recommend sending a test email.
2. Essential Placeholders (Merge Tags)
Your HTML is static, but the content must be dynamic. You must use “Handlebars” style placeholders ({{ }}) to inject the specific winner’s data.
Required Tags
{{coupon_code}}– Critical. The unique code generated for that user. If you forget this, the email is useless.{{prize_label}}– The name of the slice they won (e.g., “10% Off” or “Free Shipping”).
Optional Tags
{{customer_name}}– Values: “Guest” or the name entered in the form.{{site_name}}– Your WordPress site title.{{site_url}}– Link to your home page.{{expiry_date}}– If the coupon has an expiry, this displays it (e.g., “Jan 1, 2025”).
3. Rules of Email HTML (The “Old School” Web)
Coding for email is NOT like coding for the web. Outlook 2016 renders HTML like it is 1999.
Rule A: Inline CSS Only
- Wrong:
<style> .btn { color: red; } </style> <a class="btn">Click</a> - Right:
<a style="color: red; text-decoration: none;">Click</a> - Why: Gmail and Outlook strip out the
<head>tag and<style>blocks. You must write CSS directly on the elements.
Rule B: Tables for Layout
Do not use flexbox or grid. They do not work in many Windows mail clients.
- Structure: Use
<table>,<tr>, and<td>to create columns and structure. It feels archaic, but it is the only way to ensure 100% compatibility.
Rule C: Absolute Image Paths
- Wrong:
<img src="/wp-content/uploads/logo.png"> - Right:
<img src="https://mysite.com/wp-content/uploads/logo.png"> - Why: The email client is not on your server. It needs the full URL to find the image.
4. The Starter Template
We know coding HTML tables is painful.
- Helper: Click the “Load Starter Template” link above the editor.
- What it does: It populates the editor with a robust, tested HTML structure that is responsive on mobile and works in Outlook.
- Customization: You can then just search for “Color” to change the hex codes, or swap the logo URL, without having to write the table structure from scratch.
5. Frequently Asked Questions (FAQ)
Q: Can I use Google Fonts? A: You can import them using @import in a style block, but be aware that Outlook (Windows) will ignore them and fall back to Times New Roman if you don’t specify a safe fallback like font-family: 'Open Sans', Arial, sans-serif;.
Q: Why do my images look huge in Outlook? A: Outlook ignores CSS max-width. You must explicitly set the width attribute on the image tag.
Example: <img src="..." width="600" style="width: 100%; max-width: 600px;"> (Using both ensures it works everywhere).
Q: How do I test my template? A: Use the “Send Test Email” button at the bottom of the page. Send it to a Gmail usage, an iPhone, and an Outlook address if possible.
Conclusion
Custom Email Branding ensures that the “Winning Moment” doesn’t end on your website. When they open their inbox, they should see a beautiful, professional message that reinforces your brand and drives them back to the shop to spend that coupon.
Need Help?
HTML looking broken in Outlook? 👉 Contact Our Support Team