How to Make an Optin 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 Optin
  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 Optin

Your first step is to create a new optin. Fill out the details of your optin, 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 optin will then load in the optin builder. Here you will add an image to your optin. 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 optin, select the “Archie” Monster where it says Click To Add Media.

Transparent Theme Image Dimensions

This will open the Image Upload lightbox for your optin 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 Optin button.

Image Upload

Step 3 – Add HTML Link

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

In the optin 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 optin to record a conversion each time the optin 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 Optin tab to open the Optin panel. 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 optin’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 optin!

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 optin (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 optin, temporarily remove the CSS on the optin 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!