Help Our Team & All Ukrainians to Protect Our Home. No War in UkraineDonate
  1. Home
  2. Knowledge Base
  3. Proactive Campaigns
  4. Usage guide: 'the Source Code Editor Work'

Usage guide: 'the Source Code Editor Work'

I haven't used the Source code editor in Proactive Campaigns and don't know how Zendesk integrates with HTML for creating emails; usually, I upload a whole document or utilize too much text formatting.

So, if at least one mentioned above statement is close to you, then this guide will be helpful to you.

Therefore, this article aims to protect your email campaigns from getting into spam.

How does Source Code Editor work?

Indeed, it works quite the same way as WordPress HTML editor. So, using our Source code editor might be easy if you have a similar experience. The logic is identical. So, you can insert an HTML code in the Source code editor section on the third stage of Proactive Campaigns creation to operate more formatting functions.

There are some restrictions you can meet in the future. For example, emails can be displayed improperly in different web browsers or email clients. Moreover, using too many formatting styles or unsafe tags/attributes can end up with emails in a spam category. So, try to keep customization as simple as possible to bypass such inconveniences.

What should I do to avoid mistakes while editing emails?

  1. Do not use such tags as: < head >, < video >, < link >, < script >. They are undesirable.
  2. Additional selectors and pseudo-classes will be omitted if you use tag < style >. The reason is that styles from a tag < style > will be transformed into an attribute style ='...'. So, using pseudo-classes or additional selectors type: hover has no sense.
  3. You can still use Zendesk placeholders to send personalized emails.
  4. Select the entire placeholder with curly brackets ( {{...}} ) while applying the formatting.
  5. Cut down on adding div sections and using a lot of text formatting. It can trigger spam filters.
  6. Insert only a body into the Source code editor. Otherwise, the editor shortens an HTML code, leaving a body text.
  7. Use CSS1 or CSS2 style declarations.
  8. Images should be limited to the lowest amount of usage and downscaled.
  9. Images you use should have the alt attribute. So users will see an image description before it is displayed on a screen.
  10. Try to define an image's width and height if you know them. You'd better choose the absolute type of measurements such as pixels, em, etc.
  11. Avoid linking to images that are in a closed Zendesk. Some users may be not registered/signed in.
  12. Limit the usage of background images. Some email clients don't support them.

A Brief List of Common Tags and Attributes with Definitions

Tags:

  • < strong > – indicates that a content in this tag is important and urgent. Looks like bold text.
  • < b > – highlight text as bold, but it doesn't assign any importance to the content.
  • < em > – the stress mark of a text. Looks like an italic style font.
  • < i > – reflects an alternative text like terms, citations, and so on and it is also represented as italic style font.
  • < h1 >, < h2 >, < h3 >, < h4 >, < h5 >, < h6 > – defines headings, where h1 is the highest level section and h6 is the lowest one.
Note: try to limit yourself utilizing < h1 > < h2 > < h3 > tags. Overusing < h4 >, < h5 > and < h6 > tags affect a text readability.
  • < p > – indicates paragraphs.
  • < ul > – an unordered list, which is used together with the tag < li >.
  • < ol > – an ordered list, which also is used together with the tag < li >.
  • < li > – represents an item in a list and is used inside < ul > and < ol > tags.
  • < div> – indicates a content division or a section.

Attributes:

  • href ='...' – defines a URL of the page the link goes to.
  • alt ='...' – an alternative text for an image, which appears when an image cannot be displayed on a screen.
  • title ='...' – specifies extra information about an element.
  • width ='...' and height ='...' – predictably, they outline the image’s width and height.

Source Code Editor H1

Source Code Editor H2 H3

Other “save tags” and attributes:

Save tags: strong, em, b, i, p, code, pre, samp, kbd, var, sub, sup, dfn, cite, small, address, hr, be, id, div, span, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, abbr, a, img, blockquote, del, ins, table, head, body, tfoot, tr, th, td, colgroup.
Safe attributes: href, src, width, height, alt, cite, datetime, title, class, name, xml:lang, abbr, target, border.

Placeholders

Placeholders are really useful when you want to provide a personalized approach and automate some of the processes. However, it would be best if you were extremely careful while applying the formatting to them. So, select the entire code with curly brackets when you get a shortcode between tags. If you separate the placeholders’ text part from curly braces, it will be broken and not displayed correctly in the email campaign.

Placeholder With Tags

Pay attention! if you copy a placeholder from other resources, make sure it doesn't have any formatting applied to it. Otherwise, some formattings can break this liquid markup.

If you have any questions or propositions, contact our support team.

Was this article helpful?
Book a Call Chat
%s
— %s