Ensure your brand voice and marketing materials, including Landing Pages, Emails, and Forms, stay consistent by creating custom branding in Act-On! Consistently-branded marketing campaigns are key to maintaining your reputation with customers and delivering a high-quality customer experience.

This is our advanced guide, recommended for experienced Act-On users and those familiar with HTML/CSS and JavaScript. The beginner's guide is here.

Overview

Scenario

You’re a Marketing Manager and want to build a dynamic, visually appealing marketing campaign to promote your organization. This includes building Landing Pages, Emails, and Forms that follow your firm’s brand guidelines and voice. You’re leading a team of Marketing Coordinators and specialists who will build materials for this campaign, and you want to make sure that they follow your company’s branding and style guidelines.

Solution

Create and upload custom branding, stationery, headers, and footers for your marketing materials in Act-On! Once set, you can use your custom branding elements across your account to maintain consistent branding for your organization’s campaigns.

Instructions

Create Custom Headers and Footers

Create custom headers and footers to use across all emails in your Act-On marketing campaigns. This will not only save you time and effort but also maintain consistency for branding purposes.

1. Go to Content > Email Headers / Email Footers.
   
   
2. Click Add Header / Add Footers.
   
   
3. Give your header or footer a Title.
   
   
4. Design the HTML Version of your header or footer – add rich text, fonts, images, personalizations, links, and more.
   
   
5. Add a Text Version of your HTML header or footer. You can either do this manually or click Generate Text Header from HTML for Act-On to automatically generate this for you.
   
   
6. At the top right, click Save.
   
   

Add Your Custom Header or Footer to an Email

1. Go to Content > Email Templates to open an existing email template.
    OR
   Go to Outbound > New Message to create a new email.
   
   
2. In the Email Composer’s Design tab, hover over the Header or Footer block. You’ll find these at the very top or very bottom of the email.
   
   
3. Click the pencil icon to open the Header or Footer editor.
   
   
4. Under Use Existing Header or Use Existing Footer, select the custom header or footer you’d like to insert.

Upload Custom Stationery

Think of custom stationery as a theme that you can apply to your emails, Forms, and Landing Pages to apply default layouts and styles, for example in a marketing campaign for a specific promotion.
To build your own custom stationery, you’ll need to upload a .zip file containing an HTML page (index.htm) and any associated images. Your HTML file must include a TEXT string – this tells us where to place your content. Your file can also include HEADER and FOOTER strings (required if being used for email), and an optional LOGO string.

Once you’ve created your custom HTML file, follow these steps to upload it to Act-On:

1. Go to Content > Stationery.
   
   
2. Click Upload.
   
   
3. Click Choose File to find and select your local HTML file.
   
   
4. Click Upload Now. 
   
   
5. Once you’ve uploaded your file, edit your HTML within Act-On by clicking Edit HTML.

Embed Custom Content with JavaScript and HTML/CSS

You can embed custom content using JavaScript and CSS directly in the Act-On Landing Page Composer, Email Composer, and Forms Composer. This gives you greater control over the look and feel of your marketing materials. Follow the steps below to accomplish this for your Landing Pages, Emails, and Forms.

Landing Pages

Go to Content > Landing Pages and open an existing or a new Landing Page in the Landing Page Composer. In the Design tab, you have the following options for customizing content:

• Drag a Custom Content block into your Landing Page to upload and edit custom media files. 
  
  
• Under Settings (on the right), click Edit JavaScript or Edit CSS to upload and edit a custom CSS stylesheet. See Using CSS and Javascript on Landing Pages for more information.
  
  

Emails Designed in Act-On

If you’ve designed your email within the Act-On platform and used our stationery tools, use the following steps to include custom content in your Act-On email.

1. Go to Content > Email Templates to open an existing email template.
    OR
   Go to Outbound > New Message to create a new email.
   
   
2. In the Email Composer’s Design tab, in the right-hand panel, click Content.
   
   
3. Drag a Custom Content block into your Email.
   
   
4. In the dialog that appears, Upload and edit a custom .txt, .htm, .html, or .zip file.
   
   

Emails Designed Outside of Act-On

If you’ve designed a custom email outside of Act-On, use the following steps to upload your custom email’s HTML into the Act-On platform.

In your Act-On account:

1. Go to Outbound > New Message.
   
   
2. Select Upload Email Code.
   
   
3. In the dialog that appears, paste and edit your custom email's HTML or Upload and edit a .htm, .html, or .zip file of your custom email.

Forms

1. Go to Content > Forms and either edit an existing Form or create a new Form.
   
   
2. In the Forms Composer’s Design tab, in the right-hand Settings bar, click CSS.
   
   
3. Upload and edit a custom CSS stylesheet as described here.

Outcome

You’ve now created an array of custom branding elements that will be readily available for your Marketing Team to quickly build consistently-branded campaigns!

Next Steps

If you have found this useful have a look at 7 Ways to Add Your Brand Identity to Act-On Emails with Content Re-Use.

FAQs & Troubleshooting

How do I make my Landing Page’s design mobile-friendly?

Act-On’s Landing Page Composer is set up to create landing pages that automatically adapt to the devices used by your site visitors. However, you can hide elements from desktop or mobile devices when designing your landing page.

For example, if your Landing Page includes a large image optimized for desktop view, you can hide this image in mobile view to ensure it doesn’t overwhelm your users’ screens when on a mobile device.

All elements in your Landing Page will appear in both desktop and mobile views by default. To hide elements:

1. Go to Content > Landing Pages and open an existing Landing Page in the Landing Page Composer.
   
   
2. In the Design tab, click on an element in your Landing Page that you want to hide in either desktop or mobile view. The editor panel appears on the right.
   
   
3. At the top right, click Hide in Desktop to hide this element from desktop users, or click Hide in Mobile to hide this element from mobile users:
   
   
   
   
4. Go to the Review tab to preview your landing page in both desktop and mobile view – test to make sure that your elements are hidden correctly!

For additional help with designing for desktop and mobile, see Create Responsive, Adaptive, and Mobile-friendly Designs.

How do I make my Form design responsive?

It’s easy to make your Act-On Form responsive for desktop and mobile. Open your form in the Forms Composer, then follow these steps:

1. Go to Content > Forms and open the Form you want in the Forms Composer.
   
   
2. In the Design tab, in the right-hand Settings bar, click Form Properties.
   
   
3. At the bottom of the Edit Form Properties panel, turn on the Responsive button.
   
   

Why am I seeing “Your form is not configured to work on this domain”?

If your Form is embedded in any external pages, you must declare their domains. See Allow Act-On Forms on External Domains.