Configure Pre/Post Campaign JavaScript and CSS in Visual Editor

This article covers the following:

• Overview
• Access Campaign Code
• Add Post-Campaign Code
• Add Pre-Campaign Code
• Add Custom CSS

Overview

Wingify allows you to configure custom JavaScript and CSS for your campaigns in the visual editor. This capability provides extended functionality beyond standard visual changes. It is particularly useful for advanced data tracking or integrating with third-party tools. You can configure two types of code snippets in the Campaign code tab:

• Post-campaign code: Executes after Wingify applies the campaign changes to the page. This is the default mode.
• Pre-campaign code: Executes on the page before Wingify applies any visual changes or variations.

Common use cases of configuring campaign-level pre/post JavaScript include:

• Send Wingify campaign data to third-party analytics tools (Post-campaign JS).
• Capture the variation served to a visitor and trigger a corresponding survey or notification widget.
• Apply global CSS or include external stylesheets across all variations in a single step.

The following section explains how to access the campaign code editor to configure pre-campaign and post-campaign JavaScript

Access Campaign Code

To access the Campaign Code editor:

1. Open your campaign in the Visual Editor.
2. From the mode switcher in the top bar, select the Code mode.
3. From the top left, navigate to the Campaign code tab.

The code editor panel opens, where you can add both post-campaign and pre-campaign JavaScript.

Add Post-Campaign Code

To add post-campaign code:

1. Navigate to the JavaScript tab nested under the Campaign code tab. 
2. Enter the script you want to execute after the campaign changes apply.
3. Select Done.
4. [Optional] Select the Wait for DOM ready checkbox if you want the JavaScript to execute only after the DOM is fully loaded.

Add Pre-Campaign Code

Pre-campaign code runs before Wingify applies any variation changes. Use pre-campaign code to define functions or track events on pages without changing the website’s codebase. This is useful when you need to define functions or track events on pages without changing the website’s codebase.

To add pre-campaign code:

1. Navigate to the JavaScript tab nested under the Campaign code.
2. In the top-right corner, click Define Pre-campaign JS
3. Enter your script in the Pre-Campaign JS panel on the right side of the window. 
4. Select Done.

Add Custom CSS

To add custom CSS for your campaign:

1. Navigate to the CSS tab nested under the Campaign code tab.
2. From More options , select Include External Stylesheet
3. In the Include External Stylesheet dialog, enter the URL of your CSS file.
4. To use a commonly known library, select it from the Quick Add dropdown (options include Bootstrap, Foundation, and Animate.css). 
5. After selecting a library, click Done. Your custom CSS is added.

Need more help? 

For further assistance or more information, contact Wingify Support.