{"id":152980,"date":"2021-10-14T10:03:31","date_gmt":"2021-10-14T14:03:31","guid":{"rendered":"https:\/\/optinmonster.com\/?post_type=optinmonster_docs&#038;p=152980"},"modified":"2025-08-13T10:53:26","modified_gmt":"2025-08-13T14:53:26","slug":"how-to-use-optinmonsters-custom-javascript-tool","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-javascript-tool\/","title":{"rendered":"How to Use OptinMonster&#8217;s Custom Javascript Tool"},"content":{"rendered":"\n<p>OptinMonster makes it easy to customize your campaigns using Javascript.<\/p>\n\n\n\n<p>In this article, you&#8217;ll learn how to use OptinMonster&#8217;s custom Javascript tool.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Before You Start<\/h2>\n\n\n\n<p>Here are some things to know before you begin:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The custom Javascript tool can be used to:\n<ul class=\"wp-block-list\">\n<li>Load custom fonts<\/li>\n\n\n\n<li>Set custom cookies<\/li>\n\n\n\n<li>Load additional resources, like custom animation libraries<\/li>\n\n\n\n<li>Include language translation based on location<\/li>\n\n\n\n<li>Add support for 3rd-party tools<\/li>\n\n\n\n<li>Load custom Google Analytics events for more in-depth tracking<\/li>\n\n\n\n<li>\u2026 and much more<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Code added using our custom Javascript tool only run when the campaign HTML is on the page, so you don\u2019t need to worry about async loading.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Custom Javascript Tool<\/h2>\n\n\n\n<p>To use OptinMonster&#8217;s custom Javascript tool, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the&nbsp;<strong>Design<\/strong> view of the campaign builder, select the<strong>&nbsp;Settings<\/strong> icon.<br><img decoding=\"async\" width=\"800\" height=\"455\" class=\"alignnone size-large wp-image-170634\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/click-settings-gear-OptinMonster.png\" alt=\"click settings gear\"><\/li>\n\n\n\n<li>Next, select the&nbsp;<strong>Advanced<\/strong> tab in the sidebar and expand the <strong>Custom JavaScript<\/strong> option.<br><img decoding=\"async\" width=\"800\" height=\"498\" class=\"alignnone size-large wp-image-170912\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/advanced-settings-custom-javascript-1024x637.png\" alt=\"\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/advanced-settings-custom-javascript-1024x637.png 1024w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/advanced-settings-custom-javascript-300x187.png 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/advanced-settings-custom-javascript-768x478.png 768w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/advanced-settings-custom-javascript.png 1033w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n\n\n\n<li>Enter the Javascript you want to run when the campaign is loaded on your site into the provided field.<\/li>\n\n\n\n<li>When you&#8217;re finished, click&nbsp;<strong>Save<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\">Do I need to wrap my code in &lt;script&gt; tags?<\/h5>\n\n\n\n<p>Yes, you must wrap all Javascript in valid <code>&lt;script&gt;<\/code> tags.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Using the Template Namespace<\/h5>\n\n\n\n<p>One important feature of your OptinMonster campaign is the <strong>Template Namespace<\/strong>. This can be found in the Advanced tab&#8217;s Display Settings option.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"772\" height=\"632\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/09\/campaign-namespace-1.jpg\" alt=\"You can customize the campaign namespace to use in CSS and Javascript targeting.\" class=\"wp-image-164884\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/09\/campaign-namespace-1.jpg 772w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/09\/campaign-namespace-1-300x246.jpg 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/09\/campaign-namespace-1-768x629.jpg 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><\/figure>\n\n\n\n<p>The HTML namespace prefix is used throughout your campaign template for classes and IDs and can be useful for getting around things like ad blockers.<\/p>\n\n\n\n<p>You can use the Template Namespace in your custom Javascript with the placeholder <code>{{ns}}<\/code>.<\/p>\n\n\n\n<p>Just like the&nbsp;<code>{{id}}<\/code>&nbsp;placeholder, the&nbsp;<code>{{ns}}<\/code> placeholder will automatically be updated to use your campaign\u2019s namespace when the Javascript is output in the campaign on your site.<\/p>\n\n\n\n<div class=\"alert-box alert-blue\">\n<p class=\"alert-box-title\"><\/p>\n\n\n\n<p>Be advised that changing the Namespace setting will force a page refresh on save.<\/p>\n\n\n\n<p class=\"is-style-arrow-link has-link-color\"><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>OptinMonster makes it easy to customize your campaigns using Javascript. In this article, you&#8217;ll learn how to use OptinMonster&#8217;s custom Javascript tool. Before You Start Here are some things to know before you begin: Custom Javascript Tool To use OptinMonster&#8217;s custom Javascript tool, follow these steps: Troubleshooting Do I need to wrap my code in&nbsp;&hellip;<\/p>\n","protected":false},"author":4657,"comment_status":"open","ping_status":"closed","template":"","documentation\/categories":[96],"documentation\/tags":[31399,31487,31409,31411],"class_list":["post-152980","optinmonster_docs","type-optinmonster_docs","status-publish","hentry","categories-extending"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/152980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/types\/optinmonster_docs"}],"author":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/users\/4657"}],"replies":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/comments?post=152980"}],"version-history":[{"count":9,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/152980\/revisions"}],"predecessor-version":[{"id":202819,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/152980\/revisions\/202819"}],"wp:attachment":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/media?parent=152980"}],"wp:term":[{"taxonomy":"categories","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/categories?post=152980"},{"taxonomy":"internal_tags","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/tags?post=152980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}