How to Add Bulletproof Buttons in Emails

  • Updated

A bulletproof button lets you include attractive, personalized buttons in email messages with a visible Call to Action. Act-On's Rich Text Editor enables you to insert a visually compelling button with rounded corners that uses only HTML/CSS and displays well in most email readers.

Instructions

Step 1: Create a New Bulletproof Button

  1. Open the Act-On Email Composer, navigate to the Design tab
  2. Expand the Content section, then drag and drag a Rich Text Block to the email message
    • You may also add a bulletproof button to an existing Rich Text Block, by hovering over that it and clicking the pencil icon Screen_Shot_2021-09-14_at_12.02.45_PM.png
  3. Position your cursor where you want to add the bulletproof button
  4. Select the button icon Screen_Shot_2021-09-14_at_12.09.09_PM.png
  5. Customize the bulletproof button
  6. Click the Insert button to add the bulletproof button

Screen_Shot_2020-08-25_at_6.15.59_PM.png

Rounded corners show in most modern browsers, but some browsers like Outlook for Windows, Yahoo Mail, and Lotus Notes do not support that HTML code and may show square corners or other formatting differences. Make sure to test as much as possible, and if you encounter issues, consider adding alternate Call to Action links.

Step 2: Center the Button

By default, the bulletproof button will insert as left-justified. Follow these steps to change the alignment of your existing bulletproof button:

  1. Click the pencil icon Screen_Shot_2021-09-14_at_12.02.45_PM.png to edit your Rich Text Block
  2. Click on the bulletproof button
  3. Under the Align heading, select your preferred alignment from the dropdown menu

Screen_Shot_2020-08-25_at_6.20.28_PM.png

Step 3: Add Personalization Fields to a Bulletproof Button

Your Call to Action can be further personalized by adding a Personalization Field to your bulletproof button. 

  1. In the Rich Text Block, click on the bulletproof button to edit
  2. Add the personalization field and click the Update button

Screen_Shot_2020-08-25_at_6.43.26_PM.png

Additional Steps: Insert Personalization Syntax

If you need the syntax for personalization field(s), you may follow the steps below:

  1. Position your cursor into the Rich Text Block
  2. Click Insert Personalization Field
  3. Select the field name you wish to insert
  4. Click Insert
  5. Copy the Personalization Field and delete it from the content

Frequently Asked Questions

Why are the corners of my button squared and not round?

Some browsers and email programs, like Outlook for Windows, Yahoo Mail, and Lotus Notes, do not support that HTML code and may show square corners or other formatting differences. A best practice is to test your email messages on as many devices and using as many email programs as possible so you have a more accurate idea of how your email and button will render for your contacts.

How will my bulletproof button render in Dark Mode?

Most modern email programs will invert your bulletproof button's colors, as well as the Call to Action text. Again, testing your email on multiple devices and in different email programs will give you the best idea of how your button will look in Dark Mode.

Was this article helpful?

Have more questions? Submit a request