How to Add A Close Link or Button to OptinMonster

OptinMonster is highly customizable, including the ability to add a close link or button. Using the class om-trigger-close in the link or button will set a cookie for your Campaign as you’ve specified in the Setup panel of the Campaign Builder, and close the campaign.


To create a simple text link to close the campaign, you can use the following HTML and update the text displayed for your link.

<a href="#" class="om-trigger-close">Close Campaign</a>

If you prefer a more styled appearance, you can add your HTML link as usual and use CSS to style it as a button. For example:

HTML

<a href="#" class="om-trigger-close">Close Campaign</a>

CSS

html div#om-tpuklhkudymvohg1 a.om-trigger-close {
  background-color: #C71616;
  color: #fff;
  padding: 10px 15px;
  text-align: center;
  width: auto;
  display: inline-block;
  border-radius: 5px;
  text-decoration: none;
}
Note: If you’re using the example CSS provided above, be sure the html div#om-tpuklhkudymvohg1 portion matches that of your own unique campaign. This information can be found by selecting the question mark icon next to the Custom CSS label.

The next step is adding your link to a campaign. You can add a text or button close link to both templated and Canvas Campaigns.

Templated Campaigns

To replace the campaign form of any of our templated campaigns with your close link or button, you’ll follow these steps:

Step 1 – Custom HTML campaign Form Integration
In the campaign builder’s Integrations panel, select the Custom HTML integration option from the Email Provider dropdown. A textarea field will appear and you’ll add the HTML portion of your close link to this field.

Add the HTML for your close link to the Custom HTML field.

Your text link will appear in the campaign preview as soon as it’s added to the Custom HTML field.

Your close campaign text link will appear immediately in the campaign preview.

Step 2 – Close Button CSS (optional)
If you’re styling the close link to appear like a button (or just want to make your text link suit your campaign better), navigate to the Setup panel in the campaign builder and add your CSS to the Custom CSS field.

If this is your first time using OptinMonster’s Custom CSS tool you might want to review How to Use OptinMonster’s Custom CSS Tool for more details.

You can style the appearance of your close link using OptinMonster's Custom CSS tool.

There, that’s better!

Step 3 – Save Changes
Save the changes to your campaign and you’ve successfully added a close link or close button!


Canvas Campaigns

If you’re using our Canvas Technology (available with a Pro license subscription), the process is slightly different than our templated campaigns.

Step 1 – Custom HTML
In the campaign builder, navigate to the Optin panel and add the HTML portion of your close link to the Canvas Custom HTML field.

Add your HTML close link to the Canvas Custom HTML field in the campaign panel.

And the text link will immediately appear in the campaign builder’s preview.

Your HTML close link will appear immediately in the campaign builder preview.

Step 2 – Close Button CSS (optional)
If you want your link to appear as a styled button, next you’ll add your CSS to the Optin panel’s Custom CSS field.

If this is your first time using OptinMonster’s Custom CSS tool you might want to review How to Use OptinMonster’s Custom CSS Tool for more details.

You can style your close link using CSS.

Step 3 – Save Changes
Save the changes to your Canvas campaign and you now have a close link or close button in your campaign!