Set Up an Email Template
IMPORTANT INFO: Email Templates are used for automating your customer communication throughout your rental business cycle. It enables you to give your customers transparency and make them feel well taken care of. You can set up the email templates in different languages. If multiple languages are enabled in the settings, and the customer preferred language template is missing; the default language template will be used as a substitute . However, in the case that a template under the default language AND preferred language is missing, the event will be skipped, and the customer will not receive this email .
Please be careful: if you have created a template BUT it is not finished (empty) it will still be sent out.
To create an email template, follow these steps:
- Login to your circuly backend and click on Email Templates in the left navigation bar.
- In the Email Templates list you'll see that Email template titles are arranged in rows and the languages are arranged in columns. Click on CREATE TEMPLATE for the email template that you want to set up under the language you want.
- In the Create Template window, decide if you want to create a bank template or a circuly predefined template.
Blank template: if you decide to go with the Blank template option, you can create a template from scratch with your own CSS and HTML code and you can add the variables you need. f you want to check how your mail looks, you can always click on the Preview button in the upper right corner to take a look at your email template.
circuly Predefined: with the circuly predefined option, you'll get a preset template that can be edited to fit your branding.
- Click on the save icon to same your progress or to finalise the email template.
Modify the emails templates
Learn how to modify:
- Email subject
- Add variables
- Logos
- Fonts
- Color Codes
- Links
- Images & default pictures
- Footer
- Buttons
- Box OTP / vouchers
Edit the email subject
When you use the circuly predefined email templates, the emails already have a subject line. However the subject line can be edited.
To Do:
- To edit the subject line of a given email template > Go to Email templates and click > Hover over an email > Click on the pencil icon to edit the email template.
- In the editing window > Navigate to email Subject in the top right corner > Type in the given input field to change the subject > Click on the save icon.
Add/Remove email variables
Every email comes with a predefined set of email variables and not all email variables available are used in an email. If you would like to edit the body text of the email templates and use variables that fit the text, you can do so by editing the email temples.
To Do:
- To edit the subject line of a given email template > Go to Email templates and click > Hover over an email > Click on the pencil icon to edit the email template.
- Click on the arrow in the right corner to access the email variables.
- To add the variable click on the copy icon and paste it in the HTML code of the email template in your desired place.
Note: Variables are custom to an email template meaning that not every variable is available for every template.
Integrate your logo in the email templates?
In the predefined circuly email templates, the logo is defined by the <img> tag with the class "logo", containing the source url and a height of 36 pixels.
To Do:
- Replace "https://YOUR-LOGO-URL-HERE" with the actual URL of your hosted logo image.
- Optional: if desired, change the pixel from our example with height="36" to any other height.
Add your custom font
Step 1 - Connect your font
The code is used in HTML to include a font from Google Fonts. It helps by establishing a connection to the font server in advance, allowing faster loading. It also ensures cross-origin access for the font resources. The code specifies the font URL and loads the font stylesheet.
To Do:
Place the following snippet within the <head> section.
- <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Neue+Montreal:wght@400&display=swap" rel="stylesheet">
The third <link> tag specifies the URL of the font file you want to use. Modify this tag to link to your font from Google Fonts. For example, you can change the family attribute value to the desired font and weight.
Step 2: Import your font
The CSS code snippet provided in our example is used to define a custom font. It allows you to specify the font family name and the source URL or path where the font file is located.
To Do:
Place the following snippet within the <head> section.
- Import the source url of your chosen font (f.g. from Browse Fonts - Google Fonts )
Step 3: Style specific class attributes with your customised font
Styling specific classes allows you to target and apply styles to specific elements within your HTML structure. By using classes, you can selectively style certain elements while leaving others unaffected. This provides more control and flexibility in designing your template. It allows you to create consistent styles across multiple elements that share the same class, without affecting other elements on the page. (In our example we have styled the custom font for the card-header element)
To Do:
Identify the elements in HTML that you want to style and apply the font rule within the CSS section for this specific class.
Use colour codes: Styling text colour with CSS
Using colour codes in the hexadecimal format #ff0000or rgb(255, 0, 0) - both serve the purpose of defining colours. However, there are a few reasons why using hexadecimal colour codes is considered more advantageous because of its simplicity, memorability, flexibility, and compatibility with CSS. In our given example, the color of the text inside the <h2> element is styled using CSS. The colour property is set to #ff0000, which represents the hexadecimal value for the colour red.
To Do:
Pick your hexadecimal colour (f.g. HTML Color Picker) and apply the colour code as a rule to your CSS element
Set up links: Create clickable hyperlinks
To use a link in HTML, you need to use the <a> element, which is used to create clickable hyperlinks.In our example, the email address "example@circuly.io" is added as a mailto link within the <a> element. This allows users to click on the link to open their default email client with a pre-filled email to that specific address.
To Do:
Set the <a> element to create the link, specifying the destination URL or relative path in the href attribute and add the desired link text. Use <a href="URL">Link Text</a> as a general link or <a href="mailto:EMAIL">Link Text</a> as a mail link.
Set up images: Integrate your custom images
To add an image to your HTML document, use the <img> tag. Place the tag where you want the image to appear within the HTML structure.
In our example we have the class attribute assigned to the image tag. It specifies a CSS class name ("image-main") that can be used to style the image using CSS later on. The src attribute specifies the source of the image. In this case, the image source is a URL pointing to an image file hosted on the web.
To Do:
Use <img src="URL" alt="Description of the image"> and set the URL of your hosted image.
If desired, delete unwanted default circuly images by removing the <img> tags.
Edit the footer section: Modify the footer section
Our example HTML shows a <section> element with the class attribute class="card", which can serve as a container for your footer content. Within the section, there is a nested structure consisting of <div> elements with various classes for styling purposes. The innermost <div> with the class attribute class="card-body--image" contains the actual content of the footer. It includes a <strong> element for emphasising the text "We are here to help you," followed by plain text and an <a> element for adding a hyperlink. The relevant CSS styling classes for the provided code snippet are .card-body .card--list and .card-body--image
To Do:
If desired, modify the text and hyperlink in HTML or if you want to change the image to a custom picture, you can replace the 'URL' in the background-image CSS property with the URL of your custom image.
Style buttons: Modify clickable buttons
In our HTML example, the button's URL is dynamically populated by a variable called shop_url. This variable is used within the href attribute of the <a> element to determine the destination to your shop when the button is clicked. While the current default implementation uses the shop_url variable to automatically populate the button's URL, it is technically possible to replace this variable with any other URL redirection. Within the CSS below you can easily modify the styling of the button, such as background colour, text colour and shape.
To Do:
If desired, modify the text in HTML and button design in CSS.
Style boxes: Modify text boxes
Within the one-time password and refer a friend template, per default we have set up boxes to highlight the OTP and voucher code.In our example of the OTP template, the default HTML represents a paragraph element (<p>) with the class otp-backdrop. Inside the paragraph, there is a placeholder ({{otp_code}}) that suggests the usage of a variable to dynamically populate the code content.Within the CSS below you can easily modify the styling of the box, such as background color, text color and shape.
To Do:
If desired, modify the box design in CSS. Please do not replace the default variable.
