The advanced and pro versions of Ring it Up offer the ability to customize the look and feel of their receipts/invoices, purchase orders, and quotes. Because the templates are HTML based, a user can do practically anything one could do with a standard web page. HTML (Hyper Text Markup Language) is the language that most web sites are created with on the internet today. It offers a great amount of flexibility and is almost universally supported by both web based email clients (e.g. Hotmail, Yahoo mail, Gmail) and desktop based e-mail clients such as Thunderbird, Apple’s Mail app, Microsoft’s Outlook.
Requirements:
- A text editor capable of editing HTML files in their raw format without displaying the rendered HTML output. WYSIWYG editors such as Dream Weaver, iWeb, Adobe Go Live, and the like should be avoided unless you are very familiar with their operation as it may be difficult to embed the placeholders listed below in their proper places.
- A working knowledge of HTML. While HTML is a relatively simple language to learn, instruction on HTML is beyond the scope of this Users Guide and should be sought elsewhere.
Background:
Customizing the look and feel of your receipt works much like Microsoft Word’s mail merge feature in that you embed placeholders into a template file, and the program finds those placeholders and replaces the placeholder with actual data from the application or database at the time the template is being used to draft the receipt email or print out. These placeholders can take on various formats but the format Ring it Up has adopted is basically a word or phrase surrounded by double pound signs. The data that the placeholders represent are generally obvious, but further explanation will given for the ones that might be confusing or mistaken for some other purpose.
Company Logos:
Because the default mail app on the iPhone does not allow attachments to be placed anywhere a user might want, to include a company logo or any other graphic, the use of the HTML image tag is required. Essentially, upload your logo to a public facing web server somewhere on the internet, then embed an <img> tag into your template so that when your customers read the receipt you have sent them, your logo will be downloaded from the internet and displayed by their e-mail client. If you place something similar in the “Logo HTML” field of the E-Mail settings view, this should allow the default template to display your company’s logo when your customer reads their receipt email.
E.g. <img src=http://www.pingysoft.com/logo.jpg> Be sure to include the <img src = and > around the file URL to ensure that it works properly. Of course, you should use the URL for your own image instead of using the example url shown above.
Another option for those who do not have access to a public facing website is to convert your image into a Base64 string. Go to the Base64 Image Converter Tool and select, then upload your image. This web based tool will convert the image you upload into an HTML Image Tag that is suitable for pasting into the Logo HTML field inside Ring It Up. After you have converted your image into a Base64 image tag, copy that tag to the clipboard and follow this steps:
Pay attention: the * must be replaced by ‘doubles quotes’
1) Open that e-mail on your device
2) Into the body write:
<img alt=*Business logo* src=*
3) paste the Base64 tag
4) add to the end:
* />
5) Send the email to yourself.
The entire line looks like this:
<img alt=*Business logo* src=*data:image/png;base64,jusmxhehs…xldamd* />
Pay attention: the * must be replaced by ‘doubles quotes’
Launch Ring it Up and paste the email content into the Logo HTML field inside the E-mail & Printing section of the settings within Ring It Up.
In the future, we will change this method to a friendly way.
If you have trouble setting the logo, simply write us.
Paypal Pay Now Button:
Adding a Paypal Button to your invoices is easy. First, navigate to the Email & Printing section of the settings. Scroll to the bottom and find the “Include Paypal Button” option and turn it on. Next, set your Paypal E-mail Address. If you are using the default template, the Paypal button placeholder already exists and you do not need to do anything else to get the button to work, however, if you are currently using a custom template, you will need to add the ##PaypalButton## placeholder into your custom template to be able to utilize this new feature. The button will appear where you place the place holder.
*NOTE: When this feature is enabled, the button will only appear when sending an invoice that has an unpaid balance remaining. This feature is ignored when creating Purchase Order or Quote tickets.
*PDF users: While the the Paypal button will appear on your PDF invoice, some PDF readers have disabled the ability to tap on a link or button to launch the appropriate web site. Mac users who open this PDF in the preview app, or iOS users who are viewing the PDF in their mail app will experience this problem. The only recommended workaround is to use a different app to view the PDF as I have no control over this behavior.
Template Customization:
- Users will have the most success in customizing their receipts if they first start with a working template as an example, so follow the steps in other chapters of this guide to export your data from the Ring it Up on the iPhone/iPod Touch. This will export 7 templates files “default_receipt_template.html”, “default_po_template.html”, and “default_quote_template.html” as well .txt versions of the same files. These templates are copies of the exact same files that Ring it Up uses create the receipt, purchase order, and quote e-mails from.
- Once you have located the template file you wish to customize, open that file in your text editor.
- While you are editing the default templates, take note of how placeholders are being used to construct the body of the e-mail message.
- There may be cases where you would like to skip the use of some of the placeholders in favor of some hard coded values. Simply remove the placeholders and type the text you wish to include exactly as you would have it appear in your receipt. Generally, this hardcoding is only useful for text that will not change from one receipt to another. E.g. Business Contact information, greetings, salutations, terms you may wish to include on your receipt, etc.
- Once you have finished making your edits to the template file, save the file using UTF-8 encoding to ensure international characters and formatting are preserved. Ring it Up expects the files to be UTF-8 encoded so be sure not to skip this step else Ring it Up will not be able to properly read your customized templateand will use the default template instead. ASCII encoding should also work if you are using the US English character set.
- Now that the file has been saved, you must rename the file by removing the “default_” portion of the filename. The resulting filenames should be one of the following… “receipt_template.html”, “po_template.html”, or “quote_template.html”, depending which file you were editing. If your customized template’s name does not match the preceding example, Ring it Up will not recognize the filename and will not import the templates.
- Follow the steps listed elsewhere in this guide to sync your files back to Ring it Up using either the Dropbox method, or iTunes File Sharing method.
- Navigate back to the settings view of Ring it Up.
- Tap the row labeled “E-Mail Settings” in the Communications section of the Main settings view.
- Towards the bottom of the E-Mail Settings view, there are 3 switches that are used to tell Ring it Up that you would like it to use your customized template instead of the default template. Turn the corresponding switch on to enable your customized receipt.
- Send a test invoice to yourself to ensure the receipt is formatted properly.
Available Placeholders:
The following placeholders are available for use in your custom templates. Use the default templates as a guide when inserting placeholders.
Notes:
##TicketNotes## – a variable length of text containing all non-private notes associated with a transaction ticket.
##PaymentsAndPaymentNotes## – a variable length of text containing all non-private notes associated to all payments applied to a transaction ticket.
Your business details:
Data is taken from the contact record which you assigned as your business contact in the settings. These placeholders may be replaced with hard coded data if you so choose as your business contact details are usually static. If you think that your data might change, it is recommended that you use the placeholders as it is simpler to edit a contact in Ring it Up than it is to customize a template file.
##BusinessCompanyName##
##BusinessContactFirstName##
##BusinessContactLastName##
##BusinessAddress##
##BusinessCity##
##BusinessState##
##BusinessPostalCode##
##BusinessCountry##
##BusinessPhoneNumber##
##BusinessEmail##
##BusinessMemo##
The customer contact details:
Data is taken from the contact record that you have associated with any given transaction ticket.
##CustomerFirstName##
##CustomerLastName##
##CustomerCompanyName##
##CustomerDisplayName## – Company name or First and Last name as set in the contact record.
##CustomerEmail##
##CustomerAddress##
##CustomerCity##
##CustomerState##
##CustomerPostalCode##
##CustomerCountry##
##CustomerPhone##
##CustomerEmail2##
##CustomerAddress2##
##CustomerCity2##
##CustomerState2##
##CustomerPostalCode2##
##CustomerCountry2##
##CustomerPhone2##
##CustomerMemo##
Transaction Ticket details: Data is taken from the transaction ticket itself.
##TicketTotals## – The section of the receipt that lists each item purchased and the associated line item subtotals, discounts, pricing units, quantities and retail prices. It its highly recommend to include this somewhere in your template. An HTML table will be embedded into your receipt which will properly lay out the display of your data. Previous versions of Ring it Up offered a way to customize this section, but for the sake of simplicity, it was decided that a single file is preferable to 3 separate files for each type of template, so the option was removed. Future versions will offer the ability to customize appearance of this section inside of Ring It Up without the need to edit any HTML files.
##PaymentStatus##
##DateOfSale##
##TimeOfSale##
##TicketNumber##
##Subtotal##
##Othertotal##
##OtherDescription##
##ShippingTotal##
##LaborTotal##
##LaborQTY##
##LaborRate##
##Discount##
##Tax1Label##
##Tax2Label##
##TaxRate1##
##TaxRate2##
##Tax1total##
##Tax2total##
##Total##
##Tips##
##Balance##
##PaymentsTotal##
##UnformattedBalance##
##UnformattedTotal##
##ReceiptTerms##
##QuoteTerms##
##POTerms##
##LogoUrl##
##FontSize##
##QuantityOfProducts## – Total quantity of all items listed on the transaction
##NumberOfLineItems## – Total number of product line items listed on the transaction
##PaypalButton##