Using the HTML editor for styled emails

Choose your editor:

There are two editors available. On initial view when you click into the text area you’ll see your email displayed using our text editor and it will display the email as your customers will see it. If you press the button saying ‘Text editor’ it will switch you to our ‘Code editor’ where you will see tags like <p>. This means you are using the html editor. This allows you to paste in html code to send out stylised emails like the ones you might see on sites like MailChimp. You can also use this to paste in an html footer signature.

 

Important notes for editing

If you use a newsletter designer like MailChimp, SendGrid or others, you can export the design you have made as html code. Please note, this isn’t always in a format that is email browser friendly so although it will display visually in the editor, images may not load when they are sent to customers. There is an easy fix – paste your html code into the link below to convert it into a format that is friendly for email browsers to display:

CODE CONVERTER: https://templates.mailchimp.com/resources/inline-css/

Some mail providers can remove css styling if it is used in a script or header section. The converter above will put the css into a format accepted by mail providers. If your background colours don’t show, adjust the value background-color: #transparent to remove the hashtag: background-color: transparent

 

Recommendation: add yourself as a contact to your account using a different email address to your office/surveyor login. Send yourself the email template that you have created so you can test it comes through as expected.

0:00 Overview and creating an HTML design

03:00 - Exporting HTML code from a design

3:28 - converting HTML code to the right format

04:45 - adding your code to Survey Booker

07:10 - adding your code to a manual template