This article covers how to write HTML inside the Sharper template editor — which elements render reliably, which are stripped by email clients, and how to use merge variables and layout tools correctly.

Templates are found at System Settings, then Templates. For a description of every template field, see System Settings - Templates Field Reference. For the full list of template types, see System Settings - Template Types Reference.

HTML authoring applies primarily to email-type templates (Reservation Email, Invoice, Payment Email, Customer Marketing Email, etc.). Print and document templates follow the same element rules but are less affected by email-client stripping.

The template editor offers two modes, toggled by buttons in the form footer.

Content Editor (default) — A rich text editor powered by TinyMCE. Use this for day-to-day editing. The toolbar includes standard formatting controls plus a Variables dropdown and an Inputs dropdown for inserting merge tags. A code button in the toolbar opens TinyMCE's built-in Source Code dialog, which lets you view and edit the raw HTML for a selected section without leaving the visual editor.

Raw Editor — Switches the entire Content field to a plain HTML view with syntax highlighting. Use this when pasting a full HTML layout from an external source or troubleshooting a rendering problem. Click Content Editor to return to the visual mode. Raw Editor and the TinyMCE Source Code dialog are independent — Raw Editor replaces the entire editor, while the Source Code dialog edits the current TinyMCE document in-place.

Print Preview (footer button) — Renders the current template content in a print-formatted view. Use this to check document layout before saving, especially for invoice, statement, and folio templates.

Merge variables are placeholders that Sharper replaces with live data when a document is generated. The syntax is {{variable_name}} — double curly braces, no spaces.

Variables are inserted using the Variables and Inputs dropdown buttons in the Content Editor toolbar. These dropdowns only appear when a template Type has been selected, and they are scoped to that type — only variables valid for the selected template type appear. If a variable button is missing, either no Type is selected or the variable is not available for that type.

Variables — Data placeholders such as customer name, reservation dates, invoice total, and outlet details. They are read-only: Sharper substitutes the value at generation time and the customer cannot edit them.

Inputs — Interactive elements for contracts and e-sign templates: signature capture boxes, blank lines, and checkboxes. These are not data placeholders — they create fillable fields in the document.

Merge variable tags are also valid inside href attributes. For example, a link can include a variable that resolves to a reservation ID or portal URL at generation time.

Always use the toolbar buttons to insert variables rather than typing them manually. This ensures the exact variable name matches what is available for the selected type and avoids typos that produce blank output.

Email templates are rendered inside email clients (Gmail, Outlook, Apple Mail), not in a browser. Email clients apply their own HTML parsers and security rules independently of what Sharper saves. The table below reflects what renders reliably in common clients.

Warning: Elements That Save but Do Not Work in Email
​
The Raw Editor and Print Preview do not simulate email client rendering. Tags like <form>, <input>, and <iframe> may appear to save and display correctly in the editor or Print Preview. In an actual email, Gmail, Outlook, and other providers strip these elements for security. The customer receives a broken or blank layout with no error shown. Do not use these elements in any email-type template.

Use tables for structure. Multi-column layouts, header/footer sections, and logo blocks are most reliably built with HTML tables. A single outer table set to width="100%" with border="0", cellpadding="0", and cellspacing="0" is the standard starting point.

Declare all styles inline. Do not rely on CSS classes or embedded stylesheets. Every font, color, padding, and border value must be written as an inline style attribute on the element it applies to.

Host images on a public HTTPS server. The image must be accessible without a login. Use a full absolute URL beginning with https://. If the URL is not publicly reachable, the image will not display. See System Settings - Templates - Updating Template Images and Logos for the recommended process.

Test with Print Preview before saving. Use the Print Preview button to check the visual layout of print and PDF templates. For email templates, Print Preview shows document structure but does not simulate email client rendering — always send a test email to yourself before using a template in production.

Verify variable names before sending. Variable names differ by template type. The Variables toolbar only shows variables valid for the selected type. If a variable button is not present, it is not available for that type — do not type it manually and expect it to resolve.