{"id":174807,"date":"2022-11-04T07:54:39","date_gmt":"2022-11-04T11:54:39","guid":{"rendered":"https:\/\/optinmonster.com\/?p=174807&#038;post_type=optinmonster_docs&#038;preview_id=174807"},"modified":"2025-08-22T06:23:23","modified_gmt":"2025-08-22T10:23:23","slug":"how-to-add-html-to-optinmonster","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-add-html-to-optinmonster\/","title":{"rendered":"How to Add HTML To An OptinMonster Campaign"},"content":{"rendered":"\n<p>Do you have a unique need to add HTML to your OptinMonster campaign that is not an embedded form? Maybe you want to display an Adsense ad, or even a game of Tetris?<\/p>\n\n\n\n<p>In this article, you\u2019ll learn how to add HTML and Javascript to your campaign.<\/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>If you&#8217;re trying to add an embedded form, please use the <a href=\"https:\/\/optinmonster.com\/docs\/how-to-connect-optinmonster-with-any-custom-html-form\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Embed Form block<\/a> instead to ensure the form processes correctly.<\/li>\n\n\n\n<li>This article assumes you&#8217;ve already <a href=\"https:\/\/optinmonster.com\/docs\/how-to-create-or-edit-a-campaign\/\" target=\"_blank\" rel=\"noopener\" title=\"\">created a campaign<\/a> in your account to add your HTML.<\/li>\n\n\n\n<li>If you need to track conversions when your HTML is interacted with, it&#8217;s important to add the required class to your HTML as instructed in this guide.<\/li>\n\n\n\n<li>You may need to add <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener\" title=\"\">custom CSS<\/a> to style your HTML as desired. The HTML block does not automatically inherit the campaign&#8217;s template styling.<\/li>\n\n\n\n<li>Javascript-based HTML are supported, however, a Javascript error in your code may break your OptinMonster campaign. If that happens please be sure to <a href=\"https:\/\/optinmonster.com\/docs\/getting-support-for-optinmonster\/\">reach <\/a><a href=\"https:\/\/optinmonster.com\/docs\/getting-support-for-optinmonster\/\" target=\"_blank\" rel=\"noopener\" title=\"\">out to support<\/a> for assistance.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Add HTML Block<\/h2>\n\n\n\n<p>To add HTML that is not an embedded form to your OptinMonster campaign, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>From the <strong>Design<\/strong> view of the campaign builder, drag the HTML block into the editor where you&#8217;d like the output of the HTML to display.<br><img decoding=\"async\" width=\"800\" height=\"374\" class=\"alignnone size-full wp-image-174812\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/11\/HTML-Block.png\" alt=\"Drag the HTML block into the editor.\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/11\/HTML-Block.png 800w, https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/11\/HTML-Block-300x140.png 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/11\/HTML-Block-768x359.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n\n\n\n<li>You&#8217;ll be provided with a field to paste your HTML code into.<br><img decoding=\"async\" width=\"800\" height=\"374\" class=\"alignnone size-full wp-image-174813\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/11\/HTML-block-field.png\" alt=\"Add HTML code to the HTML field.\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/11\/HTML-block-field.png 800w, https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/11\/HTML-block-field-300x140.png 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/11\/HTML-block-field-768x359.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n\n\n\n<li>(Optional, but important) When using an HTML block, if you need to track conversions on interactions, you&#8217;ll need to add the class <code>om-trigger-conversion<\/code> to the element that should trigger a conversion. See below for examples. Adding this class will also ensure a <a href=\"https:\/\/optinmonster.com\/docs\/how-optin-cookies-and-the-global-cookie-work-in-optinmonster\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Success Cookie is set<\/a> if configured for the campaign.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-class\">HTML Events<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"add-class\">Conversions and Cookies<\/h3>\n\n\n\n<p>There are two options available for conversion tracking with an HTML block: adding a class or using Javascript.<\/p>\n\n\n\n<p>Whenever possible, you should use the Javascript method below on your JS callback so that the conversion is only accurately recorded when your HTML is successfully processed.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Javascript<\/h4>\n\n\n\n<p>Use the following Javascript on your code\u2019s success callback so that the conversion is only accurately recorded when your code is successfully processed:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/ro8n0kno.js\/\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">Class<\/h4>\n\n\n\n<p>There is a special class that you can use to notify OptinMonster that a conversion has happened and set cookies if they&#8217;ve been configured for your campaign.<\/p>\n\n\n\n<p>Add the class <code>om-trigger-conversion<\/code> to your HTML code.<\/p>\n\n\n\n<p>This lets us know that a conversion has taken place, and also <a href=\"https:\/\/optinmonster.com\/docs\/how-optin-cookies-and-the-global-cookie-work-in-optinmonster\/\" target=\"_blank\" rel=\"noopener\" title=\"\">sets a cookie<\/a> if you&#8217;ve specified a Cookie Duration value for your campaign.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Track Conversion Only<\/h5>\n\n\n\n<p>If you&#8217;d prefer to track conversions only, but not set any cookies, you can use the class <code>om-trigger-alt-converion<\/code> instead.<\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/e5wkdv85.js\/\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Interactions<\/h3>\n\n\n\n<p>Separate from conversions, you can also count interactions and pass that data to Google Analytics.<\/p>\n\n\n\n<p class=\"is-style-arrow-link\"><a href=\"https:\/\/optinmonster.com\/docs\/multiple-event-tracking-in-optinmonster-campaigns-using-google-analytics\/#Manual_Assignment\" target=\"_blank\" rel=\"noreferrer noopener\">Learn how to track HTML interactions<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Success Actions<\/h3>\n\n\n\n<p>You can customize what happens after your HTML is processed to include changing the campaign view or close the campaign.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Change View<\/h4>\n\n\n\n<p>Use the following Javascript on your HTML&#8217;s success callback to change to the specific campaign view you&#8217;d like to display on submission:<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Yes\/No View<\/h5>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/r5pzwqw2.js\/\"><\/script>\n\n\n\n<h5 class=\"wp-block-heading\">Optin View<\/h5>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/joel0p65.js\/\"><\/script>\n\n\n\n<h5 class=\"wp-block-heading\">Success View<\/h5>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/roveql85.js\/\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">Close Campaign<\/h4>\n\n\n\n<p>Use the following Javascript on your HTML&#8217;s success callback to close the campaign after submission:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/g5gl9v0o.js\/\"><\/script>\n\n\n\n<p>Alternatively, you can use the class <code>om-trigger-close<\/code> instead.<\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/7oq1kde2.js\/\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">FAQs<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\">How can I style my HTML code?<\/h5>\n\n\n\n<p>When using an HTML block, you may need to add CSS to your campaign to style its output exactly as you desire. Depending on how your code is structured the campaign own template&#8217;s styles may not be able to be inherited by your HTML. Our Custom CSS is a great option for customizing the style of an HTML block&#8217;s output.<\/p>\n\n\n\n<p>For a walk-through of using the Custom CSS feature, see our guide: <a title=\"How to Use OptinMonster\u2019s Custom CSS Tool\" href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Use OptinMonster\u2019s Custom CSS Tool<\/a><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">My HTML is in an iFrame element, can I still track conversions?<\/h5>\n\n\n\n<p>At this time it&#8217;s not possible to track conversions if your HTML is within an iFrame element. This is a limitation of technology and not unique to OptinMonster.<\/p>\n\n\n\n<p>If you have the option to use a non-iFrame version of the HTML, you should use that instead and follow this guide to add the required class to track conversions and set cookies.<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"javascript-conversions\">Why doesn\u2019t my HTML with Javascript track conversions?<\/h5>\n\n\n\n<p>If your HTML is using Javascript on the <strong>submit<\/strong>&nbsp;event, then you\u2019ll want to ensure that the last line of the Javascript submit code is:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>return true;<\/code><\/pre>\n\n\n\n<p><strong>EXCEPTION:<\/strong>&nbsp;If you are doing any sort of redirect if the submission is successful on your customized submission Javascript code then there is nothing OptinMonster can do to track the conversion.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"comments\">Why are my inline comments being wrapped by multi-line comments?<\/h5>\n\n\n\n<p>OptinMonster will wrap all inline comments into multi-line comments, which is necessary for OptinMonster&#8217;s proper handling and processing of the code involved.<\/p>\n\n\n\n<p>For example, this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Your Comments<\/code><\/pre>\n\n\n\n<p>becomes this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* \/\/ Your Comments *\/<\/code><\/pre>\n\n\n\n<p><style type=\"text\/css\">.gist {width: 100% !important; }<\/style><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you have a unique need to add HTML to your OptinMonster campaign that is not an embedded form? Maybe you want to display an Adsense ad, or even a game of Tetris? In this article, you\u2019ll learn how to add HTML and Javascript to your campaign. Before You Start Here are some things to&nbsp;&hellip;<\/p>\n","protected":false},"author":152,"comment_status":"open","ping_status":"closed","template":"","documentation\/categories":[11],"documentation\/tags":[31399,31487,31411,31401,31454,31416],"class_list":["post-174807","optinmonster_docs","type-optinmonster_docs","status-publish","hentry","categories-functionality"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/174807","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\/152"}],"replies":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/comments?post=174807"}],"version-history":[{"count":9,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/174807\/revisions"}],"predecessor-version":[{"id":204812,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/174807\/revisions\/204812"}],"wp:attachment":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/media?parent=174807"}],"wp:term":[{"taxonomy":"categories","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/categories?post=174807"},{"taxonomy":"internal_tags","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/tags?post=174807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}