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 optin as you’ve specified in the Setup panel of the optin builder, and close the optin.


Text Close Link

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

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


Button Style Close Link

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 optin</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 optin. This information can be found by selecting the question mark icon next to the Custom CSS label.


Adding The Link To Your Optin

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

Templated Optins

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

Step 1 – Custom HTML Optin Form Integration
In the optin 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 optin preview as soon as it’s added to the Custom HTML field.

Your close optin text link will appear immediately in the optin 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 optin better), navigate to the Setup panel in the optin 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 optin and you’ve successfully added a close link or close button!


Canvas Optins

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

Step 1: Custom HTML
In the optin 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 Optin panel.

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

Your HTML close link will appear immediately in the optin 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 optin and you now have a close link or close button in your optin!