Custom Javascript & CSS
Insert custom CSS or JavaScript code easily to customize your popups.
Custom JavaScript & CSS is an OptiMonk editor feature that gives you direct access to a code editor inside the campaign editor — allowing you to insert custom CSS styles or JavaScript code into any campaign without leaving OptiMonk. The Code section is accessible from the navigation bar at the top of the editor and opens as a panel at the bottom of the page, with separate tabs for CSS and JavaScript. CSS code lets you override or extend the visual styling of any campaign element beyond what the visual editor exposes — adjusting spacing, animations, fonts, z-index behavior, or any other style property. JavaScript code lets you add behavioral logic, trigger custom events, connect third-party tracking pixels, insert external forms or widgets, or execute any script at a defined point in the campaign lifecycle. For JavaScript, you can specify the event at which the code should run — such as when the popup is shown, when it is filled (converted), or when it is closed — giving you precise control over when custom scripts execute relative to visitor interactions. The code editor requires coding knowledge to use but imposes no restrictions on what can be implemented, making it the escape hatch for any customization the visual editor alone cannot achieve.
Key benefits
- Extend campaign design beyond the visual editor's limits. The drag-and-drop editor covers the vast majority of design needs, but occasionally a specific visual effect, layout tweak, or brand-alignment detail requires a CSS property the visual controls do not expose. The CSS editor gives you direct access to the campaign's styling layer — you can override any element's default appearance, add hover transitions, adjust responsive behavior at custom breakpoints, or implement design details that would otherwise be impossible without touching the visual controls.
- Execute JavaScript at precise points in the campaign lifecycle. Custom JavaScript runs at a moment you define — on popup shown, on popup filled (conversion), or on popup closed. This precision matters for tracking: firing a Facebook Pixel conversion event on popup fill, sending a custom GA4 event on popup close, or triggering a third-party tag at the exact moment a visitor converts. It also enables functional extensions — pre-filling form fields from page data, redirecting visitors to a URL after submission, or integrating an external form widget that OptiMonk's native fields do not cover.
- One code editor per campaign variant, per lifecycle event. Because JavaScript is scoped to specific campaign events rather than executing on every page load, custom scripts run only when they are actually needed — at the right moment, for the right visitor, on the right campaign variant. This keeps custom code contained, avoids interference between campaigns, and makes it straightforward to attach tracking logic to specific A/B test variants independently.
How it works
With your campaign open in OptiMonk's editor, click the Code icon in the top navigation bar. The code editor panel opens at the bottom of the screen, overlaying the campaign preview. Two tabs are available: CSS and JavaScript.
In the CSS tab, enter any valid CSS rules — use class names or element selectors that match the campaign's HTML structure to target specific elements. In the JavaScript tab, first select the event at which your code should run from the event dropdown (popup shown, popup filled, or popup closed), then enter or paste your JavaScript. Any valid JavaScript is supported — including third-party pixel snippets, custom event dispatches, DOM manipulation, or calls to external APIs.
Click Save in the code editor panel to apply your changes. Use the live preview to verify the visual result of CSS changes. For JavaScript, the code will execute at the configured event when the campaign fires on your live site — use your browser's developer console to confirm execution and debug if needed. Close the code panel with the X icon when finished and publish the campaign as normal.
Frequently asked questions
What is Custom JavaScript & CSS in OptiMonk?+
Custom JavaScript & CSS is a code editor built into OptiMonk's campaign editor that lets you insert custom CSS styling or JavaScript behavior directly into any campaign. CSS code modifies the visual appearance of campaign elements beyond what the drag-and-drop controls expose. JavaScript code adds custom behavior, tracking events, or third-party integrations, and runs at a specific lifecycle event you choose — popup shown, popup filled, or popup closed. The editor is accessible from the Code section in the editor navigation bar.
What can I do with custom CSS in OptiMonk?+
Custom CSS lets you override or extend the styling of any element in your campaign. Common uses include adjusting spacing, padding, or font properties beyond the visual editor's sliders; adding hover effects or custom transitions; modifying z-index behavior for specific layout scenarios; and implementing brand-specific design details — such as custom border styles or animation keyframes — that the visual controls do not expose. Any valid CSS that targets the campaign's HTML elements can be entered in the CSS tab.
What events can I attach JavaScript code to?+
OptiMonk's JavaScript editor allows you to attach custom code to three campaign lifecycle events: popup shown (the code runs when the campaign becomes visible to the visitor), popup filled (the code runs when the visitor completes the campaign's conversion goal — submitting a form or clicking the CTA), and popup closed (the code runs when the visitor dismisses the campaign). Selecting the correct event ensures your tracking pixel, redirect, or custom logic fires at precisely the right moment in the visitor's interaction.
Can I use custom JavaScript to fire tracking pixels when a visitor converts?+
Yes. Attaching tracking pixel code — such as a Facebook Pixel conversion event or a Google Ads conversion tag — to the "popup filled" event is one of the most common uses of OptiMonk's JavaScript editor. You paste the pixel's event snippet into the JS editor with the event set to "popup fill," and OptiMonk fires it automatically each time a visitor converts through that campaign. The same approach works for any custom analytics event or third-party tag that needs to trigger on conversion.
Does custom code require development experience?+
Yes — the Code section is intended for users with CSS and JavaScript knowledge. OptiMonk notes that using this section requires coding knowledge, and does not provide a visual interface for the code editor beyond syntax-aware text input. For most campaign customization needs, the drag-and-drop editor is sufficient without any code. The Custom JavaScript & CSS editor is available for cases where specific design or behavioral requirements exceed what the visual editor can achieve.
Try OptiMonk for free
Launch your first campaign, learn what works, then scale what converts.