If you’ve decided to create your own templates for email dispatches, here are a few practical tips on what to focus on and what to avoid to ensure everything works smoothly.
Email templates are written in HTML, so it’s important to follow basic rules and limitations related to how emails are displayed in various email clients (e.g. Gmail, Outlook, etc.).
How to build your own template |
When creating email templates, we recommend using placeholders — special tags that are automatically replaced with actual values from the reservation, voucher, or application settings when the email is sent.
You can find a full list of available placeholders with descriptions in each template’s detail, under the section “Available Placeholders.”
For example, the placeholder {%place_name%} will be automatically replaced by the venue name based on your settings. Thanks to placeholders, you don’t need to manually update templates if something changes in your system.
Tip: Clicking a placeholder in the template settings will insert it into the text — making it easy to replace parts of your template with a placeholder in just one click.
Template Structure
Most email templates are made up of several connected components:
Content Template – The main part of the email template, containing the HTML code, text, and layout. Most of the email’s text and design goes here.
Item Templates – This defines how purchased services are displayed (e.g. 1 massage or 5 vouchers). It is inserted into the content template using the
{%itemscontainer%}placeholder.Fragment: PDF Voucher – Used only if you have custom PDF voucher templates enabled by our team. This defines the download link for the PDF version of the voucher. It’s added to the item template using the
{%pdfvouchercontainer%}placeholder.
Best Practices & Tips |
Use inline styles
Email clients like Gmail and Outlook don’t reliably support <style> tags in the <head>. Always use inline styles:✅ style="color: red;"❌ <style>p {color: red}</style>
Structure with tables
Most email clients have limited support for modern HTML/CSS. For layout purposes, it’s safer to use <table> instead of <div>.
Fixed width and alignment
Set a maximum width of 600px (the standard for emails) and align text/images using align or text-align.
Responsiveness
Advanced media queries often don’t work (especially in Outlook). Stick to simple layouts, large fonts, and generous spacing.
Use web-safe fonts
Fonts like Arial, Verdana, or Georgia. Do not rely on Google Fonts or other custom fonts — they may not load correctly.
Set links safely
Always use https://... for URLs. Use stylized <a> tags for buttons instead of <button> elements.
No JavaScript
Email clients don’t support JavaScript, and spam filters may flag your message as a security risk — sending it to spam.
Image display tips
Outlook, Gmail, Apple Mail, and others often intentionally block images to protect user privacy, which means it’s unfortunately impossible to guarantee that images will always load automatically. However, by following some basic rules, you can significantly increase the chances:
Host images on a reliable server — avoid Google Drive or Dropbox links (they’re often not embed-friendly).
Always use absolute URLs to public servers.
Add alt text (e.g.
"Logo") so guests see what was supposed to be there if the image is blocked.Use
display: blockand define width/height to avoid layout issues.Optimize images to be under 100–200 kB.
Do not use base64 or inline image embedding — they may be blocked or displayed incorrectly.
Avoid iframe, form, embed, video
Most email clients won’t display these elements at all.
Avoid empty cells/tables
Some clients (like Outlook) hide empty cells, which can break your layout. Use to safely fill empty cells.
Test across inboxes
Before going live, test your email in Gmail, Seznam.cz, Outlook, and on mobile — rendering may vary (e.g. Gmail often ignores margin, so use padding instead).
Don’t over-rely on AI
Tools like ChatGPT or Claude are helpful, but don’t blindly trust even beautiful-looking templates. AI sometimes makes things up or generates broken code. Trust, but verify.
BONUS TIPS:
Use your own email domain (e.g.
@hoteltime.com) – we can set up a custom mail server for your app.Make sure your SPF, DKIM, and DMARC records are properly configured.
Avoid suspicious content like:
very little text
ALL CAPS
image-heavy layouts
Add a plain-text fallback version – your app’s template editor includes a dedicated textbox labeled “Text Version.”
How to Upload & Activate Templates |
Once your template is ready and tested, you can upload it directly in the app:
Go to Concierge > List of templates
Click the pencil icon next to the desired language
Paste the HTML code into the editor
Need to adjust language versions?
In Concierge > Concierge Settings, you can define:
Which languages are available for each template (activate/deactivate)
Which language should be the default – this version is used if the guest’s country doesn’t match any of your defined templates
Preview Before Saving
Click “Test Template” to preview your email with test data before saving.
Note: Browser previews are only for basic checking — the final appearance may differ in real email clients (e.g. Gmail, Outlook).
Save & Activate
Clicking the “Save” button immediately activates the template, which will then be used for all future emails of that type.