Before You Start

Here are some things to know before you begin:

• All Javascript events are asynchronous.
• All campaign IDs should use your campaign’s Unique ID.

Use

It’s that simple! You can now run your desired actions within the specified event.

What’s Available

The following will give you all information about the campaign, as well as access to public JS methods for the campaign.

The event object passes information about the event and the OptinMonster campaign. You can then access those properties within your function.

Initializing OptinMonster Events

om.Api.init

Runs once per page when the API starts.

om.Main.init

Runs once before campaigns are requested.

om.Main.parseCampaigns

Runs once after campaigns are retrieved.

Initializing a Campaign Events

om.Campaigns.init

Runs once after the document DOM is ready, when campaigns object is initialized, but before the individual campaigns are initialized.

om.Types.init

Runs while a campaign is initializing and happens after initializing the campaign type object.

om.Analytics.init

Runs while a campaign is initializing and happens after initializing the Analytics object.

om.Sites.init

Runs while a campaign is initializing and happens after initializing the Sites object, but before the sites are matched against the current campaign.

om.Html.init

Runs while a campaign is initializing and happens after initializing the Html object, and, if applicable, before the campaign holder element is attached to the DOM.

om.Iframes.init

Runs while a campaign is initializing and happens after initializing the Iframes handler object.

om.Listeners.init

Runs while a campaign is initializing and happens after initializing the Listeners object, but before the event listeners are added.

om.Lock.init

Runs while a campaign is initializing and happens after initializing the Lock content-locking handler, but before locking/unlocking happens.

om.SoundEffects.init

Runs while a campaign is initializing and happens after initializing the SoundEffects object, but before any sound-effects are played.

om.Tags.init

Runs while a campaign is initializing and while initializing the Tags smart-tags handler, but before the tags are replaced.

om.Dtr.init

Runs while a campaign is initializing and after initializing the Dtr dynamic-text-replacement handler, and after the global text-replacement functions have been called.

Showing Events

om.Campaign.init

Runs once when a campaign is initialized.

In the following example, we’ll remove the campaign if a video is playing.

om.Campaign.normalize

Runs just before any split test elements are normalized.

om.Campaign.canLoad

Runs just after a successful check that a campaign is able to load. The campaign is not guaranteed to show.

om.DisplayRules.init

Runs when the campaign wants to show, just before checking if the display rules are passing.

om.DisplayRules.afterRun

Runs after the campaign rule-check runs. Can be used to prevent the showing of a campaign even if rules pass.

om.Ruleset.init

Runs when the campaign rulesets are being processed just before determining if the Ruleset passes.

om.Group.init

Runs when the campaign rulesets are being processed just before determining if the Group in a Ruleset passes.

om.Rule.init

Runs when the campaign rulesets are being processed just before determining if the Rule in a Group in a Ruleset passes.

om.WebFonts.init

Runs when a campaign is being initiated and handles initializing the webfonts object, just before any font-loading/pre-loading occurs.

om.Html.images

Runs when a campaign is being initiated and just before any image-loading/pre-loading occurs.

om.Campaign.startShow

Happens before beginning the process of showing the campaign. Processes a couple more checks before showing, but has already passed the rules.

om.Campaign.canShow

Runs just after a successful check that a campaign can show on the page (e.g. no other campaign is currently visible).

om.Campaign.show

Runs before om.Campaign.load and before all campaign settings are initialized.

In this example, we’re going pause a video playing on the page if a certain campaign is about to show.

om.DisplayRules.actions

Runs right before any display rules actions are run for rules that have successfully passed.

om.Html.show

Runs right before the campaign form HTML is processed and appended.

om.Html.customVars

forRuns while the campaign form HTML is being processed and before the smart-tags are replaced.

om.Html.shortcodes

Runs while the campaign form HTML is being processed and just before parsing any shortcodes for output on the page.

om.Html.append.before

Runs while the campaign form HTML is being processed and just before appending it to the DOM.

om.Html.scripts

Runs while the campaign form HTML is being processed and just before processing any scripts inside the HTML and adding them to the head of the page.

om.Html.inlineScripts

Runs while the campaign form HTML is being processed, once the external scripts have finished loading, and just before we inject the inline scripts.

om.Html.append.after

Runs when the campaign form HTML has been processed and appended to the DOM.

In this example, we’ll log a message when the main campaign container has been attached to the outer DOM.

om.Form.init

Runs when the campaign form HTML has been appended to the DOM and just before initializing the campaign form attributes.

om.PoweredBy.init

Runs when the campaign form HTML has been appended to the DOM and just before creating and appending the powered-by link.

om.Styles.init

Runs when the campaign form HTML has been appended to the DOM and just before updating the campaign styles for display and before applying any monster effects.

om.Actions.init

Runs when the campaign form HTML has been appended to the DOM and just before initializing the individual action events that are attached to elements in the campaign.

om.Action.init

Runs when the campaign form HTML has been appended to the DOM and just before initializing an individual action event that is attached to elements in the campaign.

om.Countdown.init

Runs when the campaign form HTML has been appended to the DOM and just before updating any countdown elements in the campaign.

om.Campaign.load

Runs just before the campaign actually becomes visible.

In this example, we’ll write to the browser’s console a message to confirm the successful loading of our campaign.

om.Campaign.afterShow

Runs just after a campaign becomes visible.

Closing Events

om.Campaign.startClose

Runs at the start of the close function before we check for any conflicts with actually closing.

om.Campaign.close

Runs at the end of the close function just before the close happens.

In this example, we’ll redirect users to a specific url when the campaign is closed.

om.Campaign.afterClose

Runs just after the close function.

In this example, we’ll play/resume a video on the page when the campaign closes.

om.Campaign.cleanup

Runs before we set cookies, but after a close.

om.Campaign.afterCleanup

Runs after we set cookies.

Changing Views Events

om.Campaign.changeView

Runs right before any view is changed (e.g. Yes/No to Optin).

om.Campaign.changeView.done

Runs right after any view is changed.

Optin Request Events

om.Optin.init

Runs at the start of a conversion attempting being triggered (e.g. click submit on a form before we check validation)

om.Form.validate

Allows you to run custom validation rules.

om.Optin.init.submit

Runs near the end of a conversion being triggered (e.g. after we check validation)

In this example, we’ll add a custom redirect url (https://optinmonster.com/) if the subscriber uses a non-business email address such as yahoo, gmail, hotmail, etc.

om.Optin.error

Runs any time there is an error in the Optin conversion, but not during validation (e.g. MailChimp responds with test email not allowed).

In this example, we’ll redirect users to a specific url if there’s an error.

om.Optin.success

Runs after a successful conversion.

In this example, we’ll close the campaign after a successful conversion. This could be useful where the redirect url results in a direct file download and the campaign remains visible in the browser.

In this example, we’ll redirect user to a link in a new tab as well as show the success view on the campaign.

Analytics Events

om.Analytics.track

Runs any time we are tracking an impression or conversion.

In this example, we’ll log a message to the console to let us know our campaign has successfully tracked an impression or conversion.

And in this example, we’ll push the campaign name and id into the dataLayer so it can be used for parameters in a GA4 Event Tag using Google Tag Manager.

If you’re unfamiliar with Google Tag Manager, consider the following resources to learn more:

• How to Track Custom Events with Google Analytics 4
• Where’s the GA4 Config tag? (video)
• Google Tag Manager Custom Event Trigger

om.Analytics.impression

Runs any time we are attempting to track an impression. To actually know when an impression is tracked, you will need to use the om.Analytics.track event.

om.Analytics.conversion

Runs any time we are attempting to track a conversion. To actually know when a conversion is tracked, you will need to use the om.Analytics.track event.

Element Action Events

om.Action.redirect

Runs before a redirect action happens.

In this example, we’ll log a message in the browser’s console when the page is about to redirect to the Success URL.

om.Action.view

Runs before a view change happens based on an action.

om.Action.close

Runs before a close is supposed to happen based on an action.

In this example, we’ll close the campaign on success, then begin a direct file download.

om.Action.window

Runs before a new window is opened based on an action.

om.Action.refresh

Runs before a campaign closes and the page refreshes based on an action.

Miscellaneous Events

om.Campaign.reset

Runs when a manual campaign reset has been called. The API will never call reset itself.

om.Styles.positionPopup

Runs any time the campaign is positioned in the window. Runs only for Fullscreen and Lightbox campaigns.

In this example, we’ll make our Lightbox campaign draggable with the Dragon jQuery plugin once it’s been positioned on the page. Be sure to enqueue the required files, including jQuery. We recommend you review the readme file for the plugin.

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!

In this article, you will learn how to enable Campaign Debugging.

Before You Start

Here are some things to know before you begin:

• This guide assumes you have a general understanding of how to use the developer tools in Chrome.

Enable Campaign Debugging

To use Campaign Debugging, place the following script in your site’s footer and it will output data about the campaign to the browser’s console.

<script type="text/javascript">
    jQuery(document).ready(function($){
        jQuery(document).on('OptinMonsterInit', function(event, data, object) {
            object.setProp('debug', true);
        });
    });
</script>

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!

1. Add Link to WordPress Menu
2. Add Attribute to Menu Item
3. Enable MonsterLink Display Rule
4. Go Live with Campaign

• Troubleshooting
• FAQs

Step 1 – Add Link to WordPress Menu

We’ll start by adding a link to the WordPress menu that will become our MonsterLink.

Log into the WordPress admin, then navigate to Appearance > Menus and select the menu you wish to add a MonsterLink to.

Select the Custom Links tab to add a custom link. Enter a hashtag symbol (#) to the URL field, add your own custom Link Text and select the Add to Menu button before saving the changes to your menu.

Step 2 – Add Attribute to Menu Item

To add the required data-optin-slug attribute to our MonsterLink menu item use the following filter added to your active theme’s functions.php file:

add_filter( 'nav_menu_link_attributes', 'ekf_menu_attribute_add', 10, 3 );
function ekf_menu_attribute_add( $atts, $item, $args ) {
    // Specify the menu item ID we want to add our attribute to
    $menu_link = 64;

    // Conditionally match the ID and add the attribute and value
    if ( $item->ID == $menu_link ) {
        $atts['data-optin-slug'] = 'jiqobgwsx9qinkci';
        $atts['class'] .= 'manual-optin-trigger';
    }
    // Return the new attributes
    return $atts;
}

We need to make two edits to this filter before it will work for our own MonsterLink.

First go ahead and grab the ID of your MonsterLink menu item. An easy way to do this is return to the Menu edit screen and hover over the Remove link for our MonsterLink, at the bottom of the browser window you can see the url preview for this link which also contains the Menu Item ID.

In the screenshot below, you can see where the url contains menu-item=64 and 64 is the ID of our MonsterLink.

Second, you’ll need the slug of the campaign you want to open when the menu item is selected. You can locate this by logging into your OptinMonster Dashboard. If you click on the dots under Actions the slug is shown at the bottom and is labeled Unique ID.

Once you’ve updated the filter with the menu item ID and campaign unique ID slug go ahead and save the changes.

Step 3 – Enable MonsterLink Display Rule

While you’re logged into your OptinMonster Dashboard, open your campaign in the Builder and in the Display Rules panel enable the MonsterLink (On Click) option.

Step 4 – Go Live with Campaign

The final step is ensuring your campaign is Live in the OptinMonster API plugin.

Navigate to the WordPress Admin > OptinMonser > Optins tab view and select the Go Live link for your MonsterLink campaign to enable it on your site.

That’s it! Now you can check out the new MonsterLink in your WordPress Menu in action!

FAQs

Q: My menu item still isn’t triggering my campaign to appear, why?

A: This will typically be caused by one, or several, of the following issues preventing your campaign from being correctly triggered:

• Custom Walker Class: your active theme may be using a custom walker class that you’re not aware of. You can check with the theme author to confirm if this is the case, then use the alternative method show in the Troubleshooting step above.
• Incorrect Menu ID: double check the menu ID you’ve indicated in the filter added to your theme’s functions.php template file. If you add, then remove, then re-add the menu item to your site’s menu it will have a different ID than it did originally so keep that in mind if you make changes to your site’s menu.
• Campaign’s Output Settings Incorrect: if the campaign’s embed code isn’t being output to the page there is no campaign to be triggered to appear when the menu item is selected. From the WordPress Admin > OptinMonster > Optins tab view select the ‘Edit Output Settings’ link to check the Output Settings. If the menu is loading site-wide there should be no options within the Advanced Settings panel configured.

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!

You may need this more advanced method of adding MonsterLinks if you cannot directly add the required HTML link attributes as described in our How to Use MonsterLinks to Load Your Popup with Click of a Button doc.

Dynamically adding MonsterLinks can also speed up adding and maintaining multiple instances of identical MonsterLinks on a single page or across your site.

Two required link attributes must be present before any link on your site can manually trigger a campaign to appear: the manual-optin-trigger class, and the data-optin-slug attribute containing the slug of the campaign the link should trigger.

Any Javascript can be added to the <head> or the footer of your site.

Dynamically add MonsterLinks based on link href

You can turn any link on your page into a MonsterLink based on the link’s href value, in this example, we’ll make all links on the page MonsterLinks where the href value matches "#".

Note: be sure to replace pm6fnflhiocj7cge in the example below with your campaign’s unique slug.

Your HTML link may look something like this:

And the Javascript to turn your HTML link into a MonsterLink:

Dynamically add MonsterLinks based on the link class

You can turn any link on your page into a MonsterLink based on the link’s class value, in this example, we’ll make all links on the page MonsterLinks where the class value includes "campaign".

Note: be sure to replace pm6fnflhiocj7cge in the example below with your campaign’s unique slug.

Your HTML link may look something like this:

And the Javascript to turn your HTML link into a MonsterLink:

jQuery(document).ready(function($) {
    $('a[class*="campaign"]').addClass("manual-optin-trigger");
    $('a[class*="campaign"]').attr("data-optin-slug", "pm6fnflhiocj7cge");
});

Dynamically add MonsterLinks based on the link container

You can turn any link on your page into a MonsterLink based on the link’s container; in this example, we’ll make all links on the page MonsterLinks where the link exists inside the .monsterlink-container div.

Note: be sure to replace pm6fnflhiocj7cge in the example below with your campaign’s unique slug.

Your HTML link may look something like this:

<div class="monsterlink-container">
    <a href="#">Some link on your site.</a>
</div>

And the Javascript to turn your HTML link into a MonsterLink:

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!

In this article, you’ll learn how to add a Monsterlink to the Author Description in WordPress.

Before you start, this article is for WordPress sites only.

Add MonsterLink

If you try to add a MonsterLink to the Author Description field in WordPress, you’ll find the MonsterLink does not properly trigger your campaign to display.

To enable MonsterLinks in the Author Description of your WordPress site, you’ll need to add an additional filter to enable the required link attributes.

You can add the following filter to your WordPress theme’s functions.php template file to enable the required link attributes for MonsterLinks:

//* Add data-optin-slug to the allowed tags array and hook into Init
function om_monsterlinks_allowed_tags() {
    global $allowedtags;
    $allowedtags['a'] = array('style' => array(
	'href' => array(),
        'class' => array(),
        'data-optin-slug' => array()
    ),);
}
add_action('init', 'om_monsterlinks_allowed_tags', 10);

Once you’ve added this filter, save the file and you can proceed with adding your Monsterlink to the Author Description when editing a User on your site.

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!

In this article, you’ll learn how to make your OptinMonster campaign a clickable image.

Configure Campaign

To create a campaign that contains a clickable image, follow these steps:

1. Create a new campaign or choose an existing campaign to edit. If you are creating a new campaign, we suggest using the Canvas template.
   
2. From the Design view of the campaign builder, delete all existing blocks.
   
3. Next, add a Columns block to your campaign.
   
4. Be sure to set it as a Single Column.
   
5. Next, drag and drop an Image block into that column.
   
6. Upload or select an existing image from your library.
7. From the Image block’s Content tab expand the Image option and locate the Link field. Enter the URL you want to redirect visitors to into this field.
   
8. Now select the gear icon next to the Link field and enable the Track Clicks? option. This will ensure a conversion is counted each time someone selects the image link in your campaign.
   
9. When you are finished, click Save.

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!

Troubleshooting

There is extra space around my image that I want to remove.

To remove the default padding from around the Image block in your campaign, follow these steps:

1. From the Design view select the Settings icon.
   
2. From the Advanced tab expand the Campaign Styling option and select the pencil icon for Spacing and set the Inner Spacing (Padding) setting to zero (0).
   
3. When you are finished, click Save.

In this article, you’ll learn how to show a campaign after a video has ended.

Before You Start

Here are some things to know before you begin:

• MonsterLinks require a Pro or higher subscription.
• This guide will only function with HTML5 Videos, it is not possible to use this with Flash video.
• Need help creating your HTML5 Video Embed Code? Check out the Video for Everybody Generator for assistance.
• Due to the advanced nature of this guide, at this time we do not provide technical support for implementing any portion of this guide.

Add MonsterLink

To show a campaign after a video finishes playing, follow these steps:

Add MonsterLink

1. To begin, create and add a MonsterLink to your site following our guide.
2. Next, you’ll edit the MonsterLink by adding some CSS to visually hide it from visitors. For example:

<a id="manual-optin-trigger" href="https://app.monstercampaigns.com/c/h95qqg9sqx9atrsl/" target="_blank" style="display:none;"></a>

Self-hosted HTML5 Video

If you’re self-hosting your HTML5 video, add the following Javascript to the footer of your site to trigger the MonsterLink when the video ends:

<script type="text/javascript">
    document.querySelector('video').addEventListener('ended', function( evt ) {
        document.getElementById('manual-optin-trigger').click();
    });
</script>

YouTube Video

If you’re using a YouTube video, you can use the YouTube API by following these steps:

Get the YouTube embed iFrame

1. Follow these instructions to get the embed iFrame.
2. Next, add ?enablejsapi=1 to the end of the src URL.
3. Finally, add an id attribute to the iFrame, id="player", for example:

<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/jbP9C9bQtv4?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Now that you have the embedded iFrame in place add the following JavaScript to the footer of your site:

<script type="text/javascript">
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScript = document.getElementsByTagName('script')[0];
    firstScript.parentNode.insertBefore(tag, firstScript);
    function onYouTubeIframeAPIReady() {
        new YT.Player('player', {
            events: {
                'onStateChange': function(evt) {
                    if (evt.data === YT.PlayerState.ENDED) {
                        document.getElementById('manual-optin-trigger').click();
                    }
                 }
             }
        });
    }
</script>

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!

If you wish to change the default styling of the error message, this brief style guide will help you get started.

Before You Start

Here are some things to know before you begin:

• This guide assumes that you’ve already created a campaign in your OptinMonster account and added at least one native integration to your campaign.

Style Error Messages

To style the campaign error messages, follow these steps:

1. Open your campaign to edit in the builder and open advance options on optin fields settings.
   
2. In the ‘Form field styling’ section, scroll down to ‘Default Form Error Styles’ and click the toggle to disable it. If you keep it enabled, the form will show the error message in the default style from the service provider.
   
3. Once disabled, scroll down to the ‘Form Error Styling’ options to edit your error message styles as needed.
   
4. When you’re finished, click Save.

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!

You can add the JavaScript to the footer of your site and update it with your own specific optin slug (if targeting a specific optin) and file url.

Trigger File Download on Optin Success

// Function SaveToDisk forces file download instead of viewing in browser
function SaveToDisk(fileURL, fileName) {
    // for non-IE
    if (!window.ActiveXObject) {
        var save = document.createElement('a');
        save.href = fileURL;
        save.target = '_blank';
        save.download = fileName || 'unknown';

        var event = document.createEvent('Event');
        event.initEvent('click', true, true);
        save.dispatchEvent(event);
        (window.URL || window.webkitURL).revokeObjectURL(save.href);
    }

    // for IE
    else if (!!window.ActiveXObject && document.execCommand) {
        var _window = window.open(fileURL, '_blank');
        _window.document.close();
        _window.document.execCommand('SaveAs', true, fileName || fileURL);
        _window.close();
    }
}

jQuery(document).ready(function($) {
    // Specify the OptinMonster Event that will trigger our file download
    $(document).on('OptinMonsterOptinSuccess', function(event, data, object) {
        // Update with the URL of the file you want downloaded on opt-in submission
        SaveToDisk('http://www.example.com/download-file.pdf');
    });
});

Close the Optin on Success and Trigger File Download

Trigger Specific File Download by Optin Slug on Optin Success

// Function SaveToDisk forces file download instead of viewing in browser
function SaveToDisk(fileURL, fileName) {
    // for non-IE
    if (!window.ActiveXObject) {
        var save = document.createElement('a');
        save.href = fileURL;
        save.target = '_blank';
        save.download = fileName || 'unknown';

        var event = document.createEvent('Event');
        event.initEvent('click', true, true);
        save.dispatchEvent(event);
        (window.URL || window.webkitURL).revokeObjectURL(save.href);
    }
    // for IE
    else if (!!window.ActiveXObject && document.execCommand) {
        var _window = window.open(fileURL, '_blank');
        _window.document.close();
        _window.document.execCommand('SaveAs', true, fileName || fileURL);
        _window.close();
    }
}

jQuery(document).ready(function($) {
    // Specify the OptinMonster Event that will trigger our file download
    $(document).on('OptinMonsterOptinSuccess', function(event, data, object) {
        if (data.optin == 'your-first-optin-slug') {
            // Update with the URL of the file you want downloaded on opt-in submission
            SaveToDisk('http://www.example.com/download-file-1.pdf');
        }

        if (data.optin == 'your-second-optin-slug') {
            // Update with the URL of the file you want downloaded on opt-in submission
            SaveToDisk('http://www.example.com/download-file-2.pdf');
        }

        if (data.optin == 'your-third-optin-slug') {
            // Update with the URL of the file you want downloaded on opt-in submission
            SaveToDisk('http://www.example.com/download-file-3.pdf');
        }
    });
});

If you’re providing a unique download file based on the optin’s slug, remember you can grab the slug of your optin from the Edit dropdown button in your Dashboard.

Trigger Specific File Download by Page URL on Optin Success

You may prefer to use a single optin across your site, but trigger different file downloads based on the page where the optin is submitted. You can do so following this example:

// Function SaveToDisk forces file download instead of viewing in browser
function SaveToDisk(fileURL, fileName) {
    // for non-IE
    if (!window.ActiveXObject) {
        var save = document.createElement('a');
        save.href = fileURL;
        save.target = '_blank';
        save.download = fileName || 'unknown';

        var event = document.createEvent('Event');
        event.initEvent('click', true, true);
        save.dispatchEvent(event);
        (window.URL || window.webkitURL).revokeObjectURL(save.href);
    }
    // for IE
    else if (!!window.ActiveXObject && document.execCommand) {
        var _window = window.open(fileURL, '_blank');
        _window.document.close();
        _window.document.execCommand('SaveAs', true, fileName || fileURL);
        _window.close();
    }
}

jQuery(document).ready(function($) {
    // Specify the OptinMonster Event that will trigger our file download
    jQuery(document).on('OptinMonsterOptinSuccess', function(event, data, object) {
        // Define the opt-in which should follow these rules when submitted.
        // Remove this condition if you want all opt-ins on the site to follow the same rules.
        if (data.optin == 'your-optin-slug') {
            // Variables for convenient reuse
            var url1 = "example1.com";
            var url2 = "example2.com";
            var url3 = "example3.com";

            var myHref = window.location.href;

            // If opt-in is submitted at url1, trigger download of download-file1.pdf on Optin Success
            if (url1 == myHref) {
                // Update with the URL of the file you want downloaded on opt-in submission
                SaveToDisk('http://www.example.com/download-file-1.pdf');
            }
            // If opt-in is submitted at url2, trigger download of download-file2.pdf on Optin Success
            if (url2 == myHref) {
                // Update with the URL of the file you want downloaded on opt-in submission
                SaveToDisk('http://www.example.com/download-file-2.pdf');
            }
            // If opt-in is submitted at url3, trigger download of download-file3.pdf on Optin Success
            if (url3 == myHref) {
                // Update with the URL of the file you want downloaded on opt-in submission
                SaveToDisk('http://www.example.com/download-file-3.pdf');
            }
        }
    });
});

Remember to place your code in <script> tags, for example:

<script type="text/javascript">
   // Your JavaScript here..
</script>

You can also check out our documentation on the OptinMonster JavaScript Events API for additional event triggers and useful examples!

In this article, you’ll learn how to remove the padding or margins from any element in your campaign.

Before You Start

Here are some things to know before you begin:

• Padding and margin can be adjusted or removed from any element, block, column, row, or campaign background. Each is edited in a similar way.
• Padding and margin are using to control the spacing around and within elements of the campaign.
  
• Padding is inside of the border (or edge) of your element.
  If you increase the padding, it will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box.
  
• Margin is on the outside of the border of your element.
  If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements.
  

Element Spacing

To edit the spacing for individual block elements, follow these steps:

1. From the Design view of the campaign builder click on the element you would like to edit then select the pencil icon for the Spacing option.
   
2. Next, edit the Inner Spacing (Padding) and/or Outer Spacing (Margin) as desired.
   
3. When you are finished, click Save.

Column or Row Spacing

To edit the spacing for columns or rows, follow these steps:

1. In the Design View of the builder, hover over the column or row you would like to edit and select the gear icon.
   
2. Within the Advanced tab select the pencil icon for the Spacing option and adjust the Inner Spacing (Padding) and/or Outer Spacing (Margin) as desired.
   
3. When you are finished, click Save.

Campaign Container Spacing

You can also apply Outer Spacing (Padding) to the main campaign container. This is what gives your campaign space around the edges, or removing the padding allows you to have your content completely fill the campaign.

To edit the spacing for your campaign container, follow these steps:

1. In the Design view of the campaign builder, select the Settings icon.
   
2. Within the Advanced tab expand the View Styling option and select the pencil icon for the Spacing setting and edit the Inner Spacing (Padding) as desired.
   
3. (Optional) You can choose to apply the styling to all views (Yes/No, Optin, Success) by toggling the Global View Styling? option from the same section.
   
4. When you are finished, click Save.

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!