How To Customize Templates

Topics covered in this tutorial:

• Overview of available templates in MIDAS.
• How to modify templates.
• Using HTML in templates.
• Using CSS (styling) in templates.
• Using placeholder "variables" in templates.
• Resetting templates to their factory defaults.

Tutorial Video Transcript

Now MIDAS includes a wealth of customizable templates which may be freely edited, and we access these templates by going to MIDAS Admin Options, selecting "Manage MIDAS", and then selecting the "Template" tab.

Now all the editable templates are present in a drop-down list here, and they cover emails, and invoices, and printing, and various other elements.

So I'm going to take for example the Booking Confirmation template, and you'll see a preview of the template in the template preview area, and below that the code that goes to make up a template.

This is standard HTML code.

If you're not familiar with HTML, don't worry, we do have guides in our Knowledge Base on the website.

So as well as HTML, special variables or "placeholders" can be inserted into your templates.

You can see we've got a few here, like client's first name, start and finish, and those placeholder variables will automatically be substituted with real data at the time that the template is used.

So for example, this template is used for booking confirmations.

So whenever we send the booking confirmation to a client, this is the template that's used in the email, and logically client first name would be substituted with the first name of the client.

A list of all variables that are applicable to the template are found the bottom if we scroll down and you'll see these are divided into three sections.

Global variables - which may be used in any of our templates, Variables that are specific to the currently selected template, and Booking Field variables - these variables are substituted for booking data, and we need to include them in in our template within a pair of <bookings> ... </bookings> tags.

So if we have a look at our template code here - incidentally when we make changes to the template code, it's automatically updated in the preview.

So for example if I change this to "Here are details", you'll see as I do that it's updating the preview.

So just to walk you through the current template code here, the first three lines are essentially a table, with one row indicated by <tr> table row, and three columns;

One containing the %LOGO% variable - which substitutes for our company or corporate logo - in this case it's this "DEMO" logo here.

The second column is the name of our database.

Normally this will be the name of your organization.

At present, the database here in MIDAS that I've setup is called "Tutorial", and that's why the placeholder %DATABASE% substitutes for the word "Tutorial".

And then the third and final column contains a variable %MIDASLOGO%, and that just inserts the MIDAS logo there.

So the next line, "Dear %CLIENT_FIRSTNAME%" so again that %CLIENT_FIRSTNAME% variable would be substituted for the first name of the client.

So if a booking confirmation was to go to Joe Bloggs this line would read "Dear Joe".

<br> is the HTML code for a new line or break, so you'll see the first line will say "Dear %CLIENT_FIRSTNAME%,

Here are the details of your confirmed booking at" and the name of our database.

And actually now as I've added "Here are details" of the start, this line no longer make sense, so "Here are details of your confirmed booking at %DATABASE%, which are as follows".

And then you'll see >bookings< here, and a closing tag of </bookings> there.

Now everything in between those two tags will repeat, based on the number of bookings included in the confirmation.

So if there's just one booking in the notification, this section will be included once.

If the booking confirmation contains details of four or five different bookings, then this booking section will repeat the same number of times as there are bookings.

So within the <bookings> ... </bookings> section, we then include the data that we wish to include from the bookings.

So at the moment here we've got "Date/Time" and the %START% variable and %FINISH% variable.

So this will be substituted for the start and end dates and times of the booking, and then the %VENUE% variable, as you can imagine, will be substituted for the name of the venue.

So again let's scroll down see what are other variables we can include.

So we can include attendees, booking cost, booking notes, resources.

So let's include attendees as well, so we'll go "Attendees:", and we put in our attendees placeholder variable which is %ATTENDEES%.

And we'll put a new line after that.

And you'll see our preview has also updated.

We've got an extra line in there, so let's take that out. There we go.

And below the template code there's a further line that we can specify the email subject.

So whereas the template code will be in the body of the email confirmation, this allows us to change the text in the subject line.

And then when we're happy with our template, we just click "Save Changes".

If you've made mistakes in your template you can easily reset it to the factory default via "Reset Template To" in the upper right corner.

Simply select the language you wish to reset it to - so lets go "English (US)" - and you'll see the templates reverted to its factory default.

Now obviously the email subject line is only specific to email templates.

If we, for example, select our Public Web Requests template, if you've enabled public web requests then this is the template that's used to display those screens, and so you can customize it to maintain the same look and feel of your own website.

Similar to the booking confirmation template that we looked at previously, again we have a template preview area, and a template code area, and also an external CSS field.

Now, if you're familiar with CSS - that's Cascading Style Sheets - you can enter the URL to your own website's stylesheet here, in order to customize the appearance of this template.

So for example, to change the font or change the background colors and so forth.

Thanks for watching this tutorial and be sure to check out our other tutorials online.