Spin Wheel

⌘K
  2. Home
  4. Spin Wheel
  6. Integrations
  8. Custom HTML Templates: Brand Your Emails

Custom HTML Templates: Brand Your Emails

Custom HTML Winner Emails (Pro)

The standard winner email that Ultimate Spin Wheel sends is clean, responsive, and works in every mail client — and it ships in the free plugin. But brands that need pixel-perfect adherence to a style guide can replace it entirely with their own markup using the Custom HTML Template feature. This is a Pro-only feature: the editor is visible in the free plugin, but enabling it and having your HTML actually delivered requires Ultimate Spin Wheel Pro. This guide explains how the editor works and how to write email HTML that survives Gmail and Outlook.

1. The HTML Editor (Pro)

The template editor lives in the plugin settings, on its own tab:

  1. Go to Spin Wheel > Settings > Email.
  2. Turn on the Custom Email Template toggle (“Override the default coupon email with your own HTML”). In the free plugin this toggle is disabled and shows an upgrade prompt; on Pro it activates the editor.
  3. An HTML editor and a Live Preview pane appear side by side.

What the editor gives you:

  • Monospaced HTML editor: A plain-text, code-style textarea where you paste or write your HTML. (It is a straightforward code field — there is no VS Code-style syntax highlighting.)
  • Live Preview: A preview pane renders your HTML in real time with sample values substituted for the placeholders, so you can see the layout as you type. Sending yourself a real win is still the best final check.
  • Load Starter Template: One click populates the editor with a tested, responsive starter you can customize instead of starting from a blank page.
  • Clear Template: Empties the editor. When the custom template is blank, winners simply receive the built-in default email.

2. Placeholders (Merge Tags)

Your HTML is static, but the content must be dynamic. Use these Handlebars-style placeholders to inject the winner’s data. These four are the only merge tags supported — anything else is left in the email as literal text.

  • {{coupon_code}} — Critical. The code the winner earned. Without it the email is useless.
  • {{coupon_title}} — The name of the prize / slice they won (for example “10% Off” or “Free Shipping”).
  • {{site_name}} — Your WordPress site title.
  • {{site_url}} — A link back to your home page.

In the settings screen each placeholder is a click-to-copy chip, so you can drop it straight into your markup. Note that there is no customer-name or expiry-date merge tag; set the coupon’s real expiry in your prize settings and reinforce urgency with your own copy (for example “This code expires in 24 hours”).

3. Rules of Email HTML (The “Old School” Web)

Coding for email is not like coding for the web. Outlook on Windows renders HTML like it is 1999, so follow these rules.

Rule A: Prefer Inline CSS

  • Risky: <style> .btn { color: red; } </style> targeting a class.
  • Safe: <a style="color: red; text-decoration: none;">Click</a>.
  • Why: Some clients strip or ignore <head> and <style> blocks. Writing CSS directly on the element is the most reliable approach.

Rule B: Tables for Layout

Do not rely on flexbox or grid — they fail in many Windows mail clients. Build columns and structure with <table>, <tr>, and <td>. It feels archaic, but it is the surest path to 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 mail client is not on your server, so it needs the full URL to load the image.

4. Start From the Starter Template

Coding email HTML from scratch is painful, so use the built-in helper:

  • Load it: Click Load Starter Template above the editor.
  • What it does: Fills the editor with a working, responsive email structure that already includes the placeholders.
  • Customize: Swap the hex colors, change the logo URL, and adjust the copy — no need to build the layout yourself. Watch the Live Preview update as you edit.

Frequently Asked Questions

Is the custom template free?

No. The editor is visible in the free plugin, but enabling the Custom Email Template toggle and delivering your HTML to winners requires Ultimate Spin Wheel Pro. Free sites still send the polished built-in default email whenever coupon email delivery is turned on.

Which merge tags can I use?

Exactly four: {{coupon_code}}, {{coupon_title}}, {{site_name}}, and {{site_url}}. There is no customer-name or expiry-date tag — any other {{ }} string is left untouched in the email.

Can I use Google Fonts?

You can reference them, but Outlook on Windows ignores web fonts and falls back to a default serif unless you specify a safe stack — for example font-family: 'Open Sans', Arial, sans-serif;.

Why do my images look huge in Outlook?

Outlook ignores CSS max-width. Set the width attribute on the image tag as well: <img src="..." width="600" style="width: 100%; max-width: 600px;"> covers every client.

How do I test my template?

Use the Live Preview pane for layout, then run a real spin that triggers a winner email to yourself so you see it exactly as your recipients will. There is no separate “send test email” button, so an end-to-end win is the definitive check.

Related Documentation

Conclusion

Custom email branding (Pro) makes sure the winning moment continues into the inbox: when a customer opens your message they see a polished, on-brand email that pulls them back to spend their coupon. Enable it under Spin Wheel > Settings > Email, start from the Load Starter Template button, use the four supported placeholders, and follow the inline-CSS-and-tables rules so it renders everywhere. If you need help, visit the wowDevs support center.

How can we help?