This guide will outline how to integrate your custom created Email Template from GippsHost into your system.
Prerequisites
- Online storage for images and any other content embedded in your mail signature
- A Basic understanding of HTML code, or an IT support team who can implement this into your notification system
Preparing the Email Template for your notification system
Inside your ZIP file there will be a HTML file and some image files. The HTML file contains the code that will be copied into your notification system, but first we need to make a few changes to ensure the images are correctly shown, and the content of your message to your customer is sent correctly.
1. Choose an Image Hosting Service
Select a reliable image hosting service where you can upload the image files.
Popular options include Imgur, Google Drive, or your organization's own web server if available.
2. Upload Image Files
Upload the image files to your chosen location, and note down the URL to directly access these images.
3. Modify the HTML File
- Open the
letterhead.htmlfile in a text editor. - Locate the image source tags (
<img src="...">) in the HTML code. - Replace the existing paths in the
srcattribute with the new URLs of the uploaded images. For example:<img src="http://example.com/path/to/letterhead-Header-graphic.png"> - Save the changes to the HTML file.
- Identify and Replace Each Placeholder:
- {{content}}: Replace this placeholder with the variable in the system that corresponds to the main content of the email. For example, if the system uses a variable like EmailContent, you would replace {{content}} with that variable.
- {{date}}: Replace this placeholder with the system's date variable. This could be a dynamic variable that fetches the current date, like CurrentDate.
- {{name}}: Replace this with the variable representing the your recipient's name. If the system uses something like RecipientName, use that in place of {{name}}
- {{signature}}: Replace this with the variable for the sender's signature or sign-off. This might be a predefined signature in the system, like EmailSignature.
4. Test the Updated HTML File
Before distributing it, test the HTML file to ensure that all images are displaying correctly and the links are working. You can open this up in a normal Web Browser such as Google Chrome or Mozilla Firefox.
5. Distribute the Updated HTML File
Copy the entire code of the letterhead.html file into your notification system's settings. Ticketing systems such as Zendesk have a section where you paste in the header portion of the code, and a seperate section for everything below your content.
Your Product Owner for this system should be able to implement this, but if you get stuck, GippsHost can help. Contact us to organise a a professional installation.
