Skip to main content
Act-On Software

Adding a Custom Content Block

AUDIENCE: Administrators, Marketing Users
OBJECTIVES:

A Custom Content block is a unique tool within the Act-On editor for email messages or landing pages. A Custom Content block allows you to paste in your existing HTML, CSS, and JavaScript (in landing pages and forms).

 Act-On will not remove your custom CSS, whether it is inline, internal, or external. Alternatively you can upload valid HTML with images.

If you choose to upload content rather than pasting in your code, ensure your HTML is a valid HTML file. If uploading a zip file, only one HTML file will be read, and your file or images may not be in a subfolder within the zipped-up file structure.

AOmegaphonesmall.pngThings to consider:

  • 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. 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 header. In almost all cases, script, style sheets, and other elements normally reserved for the document will work if placed at the top of the.
  • Custom Content blocks allow you to upload an external HTML file with images. This is useful if you have a message designed outside of Act-On that you would like to import.
  • Custom content is best suited for designs which are created externally and will not be modified within Act-On
    • The rich text editor is not designed to modify designs that heavily utilize custom fonts (from a file), or layouts heavily reliant on CSS positioning. For designs containing these elements which you may be importing, you would want to use a custom content block.
  • Open the editor for a new or existing email message or landing page.
    • Email Messages: Navigate to Outbound > New Message or Draft
    • Email Templates: Navigate to Content > Email Templates
    • Landing Pages: Navigate to Content > Landing Pages
  • From the Design tab, hover over the Custom Uploaded Content Block.
  • Click and Hold the block using your mouse cursor and drag the block into your message, a new container will appear. Release your mouse to drop the block when it is in the appropriate place in your message.
  • The Custom Uploaded Content window will appear, you can either choose Upload File to upload either an external HTML file or a zip file with HTML and images or paste your code in the area provided.
  • When you are finished, click Close.

JavaScript is not permitted in email messages, and will be automatically removed by Act-On if detected in an email being sent out. This is because many recipient email clients or email security appliances will remove JavaScript automatically from incoming mail, or not deliver/blacklist any mail containing JavaScript (due to security concerns).

For additional information on javascript support, click here.

Usage of form HTML is not generally supported within email clients, but many alternate solutions are available to achieve similar functionality. Using links, much of the same functionality of forms can be maintained in conjunction with an auto-submitting form.

For additional information on auto-submitting forms, click here.

CSS is functional with emails, although is advisable to look into specific email support to determine what email clients support for specific CSS attributes. Alternatively to using CSS, inline styling on HTML have much higher compatibility across email clients.

For additional information on CSS usage in emails, click here.

An absolute URL is a URL represented by the complete path of where your content is being hosted.

Example:

<img src="http://www.actonsoftware.com/images/aotest.png" />

A relative URL is a URL represented by only the subdirectories of where your content is being hosted.

Example:

<img src="images/aotest.png" />

When uploading your own pre-designed custom content, that includes relative URLs, Act|On will not be able to recognize these paths if using a Rich Text block. It is recommended to use an absolute URL, that links a direct path to where the image is being hosted.

Primarily, this will be due to the method that your text was entered into your message draft. If your text was copied from another source (e.g. Microsoft Word), there can be style coding that is being copied over as well. Once this text, and its styling, is copied into Act|On, when you make edits using the tools of the Rich Text Editor, new style tags are being applied alongside the existing style tags. Act|On recommends pasting text into a plain text editor (e.g. Notepad) before copying it into the Rich Text Editor, to prevent unnecessary coding and then apply your style changes within Act|On.

AOmegaphonesmall.pngPlease note:

Some mobile email clients do not support responsive design, such as the official Gmail applications from Google for iOS and Android. Responsive design is supported on the standard Apple Mail client however, which composes a very large percentage of mobile email client usage.

Often times when custom content is compiled and uploaded, relative image references are used in the HTML & CSS code. Act-On does not display images in the rich text editor or a custom content block if the HTML or CSS code is utilizing relative references for those images.

Should you need your images to display in the editor you can change the HTML & CSS references for your images to absolute references.

Relative Reference example

(/email _images/header/mediumheader.png)

Absolute Reference example

(http://act-on.com/email_images/header/mediumheader.png)
Why did my email deliver with a different font than the font in my custom content?

If you have utilized a custom font other than the fonts that are currently listed in Act-On it is likely that your mail client does not support the specific font you are utilizing. Different email clients have a variance in their support for fonts other than the ones made available in Act-On.

The font that is displaying in your mail client is either the fall back font that you have coded in your custom content or it is the mail client default font.

To suppress your logo, please do the following:

  • Open the Design tab in the Act-On Email Editor.
  • Expand the Stationary section on the right hand side of the editor.
  • Click the Align Logo drop-down.
  • Select Suppress.

Yes, you can edit the source code of an Act|On message. This can be done by editing a specific Rich Text Block. From here, you will select the HTML icon within the toolbar. You can also export the Creative of your Act|On message by selecting Download Creatives within the Design section.

Custom content can be used for the customer that would like to import previously created content. Customers that come from different marketing automation companies prefer to import their previously created work, rather than recreate the emails in Act|On. However, Act|On offers a easy to use message composer that will ensure that all messages are created as responsive design.

Yes, messages created within other email services can be imported into Act|On. However, all email services build emails slightly different. It may be necessary to edit the source code, or HTML, of your message. Also, some email services do not create their messages following responsive design practices. It may also be necessary to edit your message to ensure that you will receive the optimal performance across all media devices.

 When importing custom content into an Act|On message, there are a couple items you want to be careful of. First, under the Stationery Settings with the email composer, you want to uncheck “Responsive Design”. Having “Responsive Design” activated for non-native HTML could result in unsatisfying behaviors. You will also want to ensure that Table Widths with your custom content do not exceed the set message width within the Stationery Settings of the message composer.

 

  • Was this article helpful?