How to Make a Campaign a Clickable Button or Image

Do you want to have a lightbox popup that shows a button or a clickable link? Are you wanting to remove all form fields and just have a advertisement banner? This guide will help you get started.

While we have our incredibly versatile Canvas Technology that is more powerful than a standard lightbox popup, you may not need something that comprehensive.

Likely, you only want a clickable button or image on your popup. This guide will hopefully make it easy for you to create a clickable image popup in just a few minutes.

IMPORTANT: This guide assumes you’re already familiar with our Custom CSS tool.
  1. Create a New Lightbox Campaign
  2. Add a Background Image
  3. Add HTML Link
  4. Add Custom CSS
  5. FAQs
The detail and order of the steps is very important.

Step 1 – Create a New Lightbox Campaign

Your first step is to create a new campaign. Fill out the details of your campaign, giving it a Title and assigning a domain for it to load on. Then choose the Lightbox Design type and then scroll down to the Transparent Theme.

Lightbox Transparent Theme

Step 2 – Add a Background Image

Your campaign will then load in the campaign builder. Here you will add an image to your campaign. This has to be done first, otherwise you may run into some problems.

Create an image that is 700 x 450 pixels. This will be your clickable image. When you’re ready to add the image to your campaign, select the “Archie” Monster where it says Click To Add Media.

Transparent Theme Image Dimensions

This will open the Image Upload lightbox for your campaign where you can upload a new image or select an existing image from your account. Choose the image you want to use and then select the Insert Image into Campaign button.

Image Upload

Next we’ll add our HTML link we want to use to make our entire campaign a clickable link.

In the campaign builder select the Integrations tab. Next, choose the Custom HTML from the Email Provider dropdown and add your HTML link code to the Custom HTML Form Code field.

Clickable Optin Custom HTML Code

Your HTML link code should look something like the following:

<a href="http://www.YOUR-WEBSITE-URL.com" class="om-trigger-conversion"></a>

Where you see the href above, is where you need to put the full URL for your target site. The om-trigger-conversion class will allow your campaign to record a conversion each time the campaign link is clicked on.

Step 4 – Add Custom CSS

Next, we’ll use some CSS to expand the HTML link to cover the whole image.

Select the Campaign tab to open the Campaign Builder. Scroll down to the Custom CSS field and add your CSS here.

Link Optin Custom CSS

You can copy and paste the example CSS provided below. Be sure to update it to use your own campaign’s unique slug and namespace. Learn more about using the Custom CSS Tool for a full walk-through.

html div#om-YOUR_OPTIN_SLUG .NAMESPACE-footer {
    background-color: transparent !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 0px !important;
}

html div#om-YOUR_OPTIN_SLUG .NAMESPACE-footer #NAMESPACE-element-form,
html div#om-YOUR_OPTIN_SLUG .NAMESPACE-footer .om-trigger-conversion {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    position: absolute;
}


/* Make sure your close button stays on top of the clickable image. */

html div#om-YOUR_OPTIN_SLUG .NAMESPACE-close {
    z-index: 99999;
}

That’s it, you’ve successfully created a clickable image campaign!

And don’t forget, you can split-test with this too!


FAQs

Q: How do I edit the background image later?

A: When following this guide you are making the link tag cover the whole campaign (image and all!). This means you can’t click edit/modify image because it is being covered by the link.

To edit the image in your campaign, temporarily remove the CSS on the campaign that affects your link and it should let you edit the image. After you have updated the image, you can add the link’s CSS back. Don’t forget to save your changes!