Skip to main content
Act-On Software

Using Custom HTML and CSS in Emails

 

If you open the editor for any Act-On message, landing page, or form, you may notice that you have the option to add a Rich Text block as well as a Custom Content block.

If you have a custom CSS <style> section or external stylesheet you would like to use within Act-On but do not want to use custom stationery, you will want to use a Custom Content block.

For example, to pull up this option to add a specific block for a new landing page, navigate to Content > Landing Pages > New Landing Page > Start with a Blank Page. Next, hover over any of the blocks you see (such as the Rich Text block which is generated by default) and click New.

This will bring up the menu to add a block, two of your options being Rich Text and Custom Content.

A Rich Text block is good for designs created in Act-On, or when you need users without HTML knowledge to make changes to a message within Act-On. A Rich Text block can be paired with custom stationery for more advanced customization.

  • This is our WYSIWYG (what you see is what you get) editor for regular HTML/CSS design. See the article Using the Rich Text Block in Email for further information.
  • Like other WYSIWYG editors, it expects HTML/CSS to fit a certain style. It can incorporate external or internal CSS, but the rendering within the rich text editor may not be fully correct (but this will correct itself if you click "Preview" or view the published version).
  • Content created within a Rich Text block is automatically embedded into a single-cell table in your overall message/page layout. For example, if you create a Rich Text block that contains only a paragraph of text, this paragraph will be automatically put inside a table cell containing your entire rich text block (this assists with general appearance within the large variety of email clients available).
  • When you open a Rich Text block in the editor, it you will see the editor-view open by default rather than the code-view
  • If you are using a different WYSIWG editor (such as Adobe Dreamweaver) or any other web page design tool, we highly recommend pasting your design into custom content or generating a custom stationery

A Custom Content block is for HTML and CSS generated outside of Act-On. This is the method to use if you have used an external application to fully design your web page or message.

  • A Custom Content block enables you to upload a valid HTML document with images or you can cancel the upload window and simply paste in your code. See the article Adding a Custom Content Block to an Email Message for details.
    • If you upload content rather than pasting in your code, ensure that your HTML is a valid .html file. Only one file will be read, and images may not be in a subfolder.
    • If you upload HTML or paste in HTML, keep in mind that you do not want to specify the document <head> content here -- a custom content block (or any other block in the editor) is part of the document <body>. Nearly <head> content (such as scripts or CSS references) can easily be rendered within the document body.
  • A Custom Content block allows you to paste in your existing HTML, CSS, and JavaScript (in landing pages and forms) 'as-is'Act-On will not remove your custom CSS, whether it is inline, internal, or external.
  • When you open a Custom Content block, you will see your code by default. Like custom stationery, a Custom Content block is designed for importing your external code and Act-On does not impose significant restrictions on this imported code.
  • Custom content is not put inside a table element automatically -- all table structure is reserved for you to create within your custom content, or within your stationery. 
  • In a Custom Content block, you can open your imported code inside the WYSIWYG editor but typically this is not recommended because it will remove your non-inline CSS when your design is 'converted' for the WYSIWYG editor, as documented above.
  • Any block in the editor/composer adds content to the document body section of the document you are creating (between the <body> and </body> tags). For instance, if you paste an entire web page document (with the doctype, html, head, and body tags) into a Custom Content block you will be duplicating these tags in your document. Usually this is harmless, but it can cause rare issues and adds clutter to the overall document code. 
    • Use custom stationery if you need something to be in the document head
    • In 99% of cases, script, stylesheets, and other elements normally reserved for the document <head> will work if placed at the top of the <body>
  • JavaScript is supported in both Rich Text blocks as well as Custom Content blocks for landing pages and forms.
  • Stationery can be applied to any block in the Act-On form/message/landing page composer.
    • What if you need to use a Rich Text block so that your users can make changes to a message within Act-On but don't want to edit the HTML directly? You will want to use custom stationery. Your custom stationery's code (such as CSS) will be applied to the content entered into a Rich Text block. For example, if you set a specific style for all <p> tags inside your stationery, that will apply to all paragraphs inside the Rich Text block as well as any other block.
  • Remember that some popular email clients do not support anything except inline CSS. Examples of clients with this behavior are gmail.com and the Gmail mobile apps on all platforms.
  • Was this article helpful?
Support

Have a question about this topic?

Ask the community!