It's great to give a personal twist to your e-mails. This article explains how to create customized HTML templates in Clinicminds.
To customize your HTML templates, head on over to the in-app Menu > Clinic settings > Email & SMS messaging > Email template.
From there, once you click on ‘HTML template’ right under ‘Header and footer’, you should see this new window:
When you tick the ‘Use custom HTML template for emails’, a new text field on the left will appear where you can put in your custom HTML codes:
In the screenshot above, you’ll notice that the font size has changed for the preview, for this example we changed the default font size to showcase that the preview on the right changes in real time,
We highly recommend that you contact your web developer/design agency before saving any changes, but with the preview feature, you’re welcome to try it out yourself. You can even send out test emails to yourself to see if it’s all good.
Important CSS rules
When your emails contain elements like buttons or video brochure thumbnails, you may need to apply some CSS rules to display them correctly. When you are using a custom HTML template, you will need to ensure yourself that your CSS makes those elements appear correctly. For your reference, you can find our default CSS rules here, which should be sufficient to correctly display all elements in emails sent from Clinicminds:
.content { max-width: 36em; text-align: left; }
p, ul, .section, .brochure-thumbnail-wrapper { margin: 1em 0; }
h2 { margin: 0.833em 0; font-size: 1.2em; font-weight: bold; }
.section { padding: 0 1em; border-radius: 1em; border: 1px solid #d4d4d5; box-shadow: 0 1px 3px 0 #d4d4d5; }
a.button { display: inline-block; white-space: nowrap; padding: 0.5em 1em; border-radius: 100px; border: 2px solid #007aff; background: #fff; color: #007aff; font-weight: bold; text-decoration: none; transition: all 0.2s ease-in; }
a.button:hover { background: #007aff !important; color: #fff !important; }
a.button:active { transition: none; border-color: #3395ff !important; background: #3395ff !important; }
.button-wrapper.with-alternative-text { margin-top: -1em; }
.button-wrapper.with-alternative-text a.button { margin-right: 1em; }
.button-wrapper.with-alternative-text a.button, .button-alternative-text { margin-top: 1em; vertical-align: middle; }
.button-alternative-text { display: inline-block; color: #999; font-size: smaller; }
.button-alternative-text a { color: #999; }
.brochure-thumbnail { width: 100%; }
.verification-code { font-weight: bold; font-size: x-large; }Note that these CSS rules may be changed or extended in the future, for example, when we release new features. In such situations, we will inform admins of clinics that have set up a custom HTML email template, so you can make the necessary changes to your own template,