Custom Branding Templates
Tokeet allows you to customize its look and feel using the Custom Branding features. These features allow you to change the messages, logos, and colors that guests see when they view messages you send them from Tokeet or log into the Tokeet guest portal. You can find the Custom Branding section under the Settings menu in Tokeet.
When you send a message to your guest the text entered in the message textbox is inserted into a message template automatically. This helps to create a more polished and professional message which your guest sees. The Custom Branding Templates lets you change the template used for all email messages sent to your guests. Tokeet comes with some default templates, however you may create your own templates which match your brand and identity. The Custom Branding Templates are created using the My Templates section within the Tokeet Settings menu. They are like any other template, except for a few content placeholders which are not standard in the Tokeet data dictionary. You may use any data dictionary placeholders in your custom branding templates.
When editing your branding template you must switch to HTML view by clicking the HTML toggle button </> on the template editor. This will take you into raw HTML mode where you may view, edit, or paste raw HTML.
Design Best Practices
Here are a few additional things to note regarding creating message templates.
- You must use inline CSS. Most email clients will strip away any CSS tags inserted into the template.
- No JavaScript is allowed. Most email clients will remove all script content from your email.
- Avoid using <html>, <head> and <body> tags. Begin your template without any of the standard HTML headers. Remember, you're not creating an HTML webpage, simply a piece of HTML which will render inside an email client.
- Emails should be 600-800 pixels maximum width. This will make them behave better within the preview-pane size provided by many clients.
- Design for simplicity. Use grid-based layers and avoid complicated elements that require HTML floats or positioning.
- Assume images will be initially blocked by email clients, or that certain images—background images, for example—will completely fail to load.
- Don’t design an email that’s essentially one large, sliced-up image. While these kinds of emails look pretty, they perform poorly.
- Use basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.
- Avoid elements that require Flash or JavaScript. If you need motion in an email, a .gif is your best bet.
- Don’t forget about the mobile experience! Is your email readable at arm’s length on a small screen? Will the images slow its load time on a mobile device? Are your links easy to press with a thumb?
- Code all structure using the table element. For more complicated layouts, you should nest tables to build complex structures.
- Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure.
- Keep your CSS simple. Avoid compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements)
- Use only absolute links for images, and host those images on a reliable server.
- Don’t bother with Flash as those technologies are largely unsupported by email clients.
- Account for mobile-friendliness, if possible. Use media queries to increase text sizes on small screens, provide thumb-sized (~46x46px) hit areas for links. Make an email responsive if the design allows for it.
- Test, test, test. Create email accounts across various services, and send emails to yourself.
Below are further detail instructions for each template.
Standard Message Template
The standard message template is used for all messages sent from the Tokeet dashboard, except for invoices and quotes. Standard message templates may use all placeholders from the data dictionary. In addition, the following placeholders are also available. Please note that the "message_html" is required to show your actual message text.
<TMPL_VAR NAME='name'/> - The name of the user who is sending the message.
<TMPL_VAR NAME='message_html'/> - The html version of the message sent.
<TMPL_VAR NAME='reference_id'/> - A unique Tokeet id for this specific message.
<TMPL_VAR NAME='rental_name' /> - The name of the rental associated with this message.
<TMPL_VAR NAME='guest_name'/> - The full name of the guest the message is sent to.
Quote Message Template
The quote message template is similar to the standard template, except for a few unique placeholders which contain quote information. You may also use all placeholders from the data dictionary with the quote template. In addition, the following placeholders are also available.
<TMPL_VAR NAME='name'/> - The name of the user who is sending the message.
<TMPL_VAR NAME='message_html'/> - The html version of the message sent.
<TMPL_VAR NAME='reference_id'/> - A unique Tokeet id for this specific message.
<TMPL_VAR NAME='rental_name' /> - The name of the rental associated with this message.
<TMPL_VAR NAME='guest_name'/> - The full name of the guest the message is sent to.
<TMPL_VAR NAME='sum'/> - The numeric sum of the quote.
<TMPL_VAR NAME='tax_fee'/> - The total tax of the quote.
<TMPL_VAR NAME='discounts'/> - The total discounts of the quote.
<TMPL_VAR NAME='charge'/> - The base charge of the quote.
<TMPL_VAR NAME='guest_arrive'/> - The guest arrival date.
<TMPL_VAR NAME='guest_depart'/> - The guest departure date.
Invoice Message Template
The invoice message template is used for invoices sent from the Tokeet dashboard. This template is different from the other message templates as it contains some unique fields with invoice related information. You may also use all placeholders from the data dictionary with the quote template. In addition, the following placeholders are also available.
<TMPL_VAR NAME='name'/> - The name of the user who is sending the message.
<TMPL_VAR NAME='reference_id'/> - A unique Tokeet id for this specific message.
<TMPL_VAR NAME='rental_name' /> - The name of the rental associated with this message.
<TMPL_VAR NAME='guest_name'/> - The full name of the guest the message is sent to.
<TMPL_VAR NAME='invoice_link'/> - The URL to your invoice.
Guest Portal Login Template
The guest portal allows your guests to login to Tokeet and manage their booking information. You can send the guest an email with the guest portal credentials from the booking detail page. You may also use all placeholders from the data dictionary with the quote template. In addition, the following placeholders are also available.
<TMPL_VAR NAME='name'/> - The name of the user who is sending the message.
<TMPL_VAR NAME='rental_name' /> - The name of the rental associated with this message.
<TMPL_VAR NAME='guest_name'/> - The full name of the guest the message is sent to.
<TMPL_VAR NAME='gp_link' /> - A link to the guest portal with credentials.