This article covers the following:
- Overview
- Access Code Editor
- Components of Code Interface
- Code-Specific Tabs
- Code Blocks
- Configure Code Editor Settings
Overview
Code editor is a feature in the Visual Editor that lets you define, manage, and execute custom JavaScript, CSS, and HTML scripts directly within variations and campaign-level code blocks.
You can configure multiple changes for a variation, bundle them into separate code blocks in the code editor, and specify when to display them using triggers. Code mode also helps you perform operations such as:
- Hide web page elements until variation changes have fully loaded.
- Configure when code changes are triggered.
- Revert changes in single-page applications (SPAs).
Access Code Editor
The Visual Editor provides three primary editing modes accessible from the top navigation bar: Design, Navigate, and Code Editor. To access the Code Editor:
- Open your desired campaign in the Visual Editor. For more information, refer to Access Visual Editor.
- In the top navigation bar of the Visual Editor, click Code.
Understand the Code Editor Interface
The Code editor interface is organized into the following functional tabs:
- Campaign Code tab
- Control tab
- Variation tabs
- Language tabs
Let us understand the significance of each tab.
Campaign Code Tab
The Campaign code tab lets you configure pre-campaign and post-campaign JavaScript and CSS modifications. These modifications apply globally across all campaign variations, including the control. For more information, refer to Add Pre-Campaign and Post-Campaign Code in Visual Editor.
Control Tab
This tab represents the original version of the page.
Variation Tabs
A series of tabs next to the Control tab represents distinct variations (for example, Variation 1, Variation 2) added in the editor for a particular campaign. Code configured in one variation tab does not execute in another unless it is placed in the Campaign code tab.
You can add more variations to your campaign using +New Variation option. Select the vertical ellipsis menu on a variation tab to access options such as Redirect, Rename, Preview, View Changes, Clone, and Delete
Code-Specific Tabs
Within each variation tab, you can add multiple code blocks, and each code block provides JavaScript, and CSS, tabs. Each tab provides a dedicated editor for a specific code type.
| Tab | Description |
|---|---|
| JavaScript | Accepts standard JavaScript. Executes according to the configured trigger. Supports advanced options via an overflow menu, including external script inclusion, Pre-Campaign JS, and element polling. |
| CSS | Accepts standard CSS. Supports linking external stylesheets via the overflow menu. |
Let us understand code blocks better.
Code Blocks
A Code block is a container where you write and run JavaScript or CSS code within a variation. Each code block runs independently and executes based on its configured trigger.
When you select a variation tab, the left sidebar displays the Code block panel. This panel lists all code blocks for the current variation (for example, Code 01, Code 02, Code 03). You can create multiple blocks, each with its own triggers and configurations.
To add a code block:
- Select the required variation tab.
- In the Code block panel, click + Code block. A new block is added to the list and selected automatically.
- Configure the trigger and enter the required code.
- Click Done to save.
Just like variations, you can Rename, Clone, or Delete your code blocks using the vertical ellipsis menu adjacent to each code block in the code block panel.
The next section explains how to use triggers to conditionally execute code blocks.
Trigger Configuration
Wingify offers multiple trigger options to conditionally execute your code blocks.
Let us understand the available options in the Trigger dropdown.
| Triggers | Description |
|---|---|
| Campaign executes | Triggers the code block immediately when the Wingify campaign executes on the visitor’s browser. This is the default trigger. For example, you're trying different promotional offers (via a pop-up) on the homepage of your e-commerce site. When this trigger is applied, the promotion for the corresponding variation is displayed to visitors who land on your homepage. Note: The targeted elements must exist on the page when the campaign executes. |
| Element loaded | Triggers the code block when a specific element appears on the page. Use this when your change targets an element that loads after the initial page render, for example, a modal that opens when a visitor clicks a button. By default, the change applies only once. For example, a button relabeled as 'Place order' reverts to its original text when the element reloads. To reapply the change every time the element appears, enable Re-apply changes whenever modified elements are rendered afresh from Visual Editor Settings. |
| DOM ready | Triggers the code block when the DOM (all the elements on your website) is loaded in the visitors' browser. For example, if your webpage takes longer to load, use this trigger to execute changes after the DOM is fully loaded. |
| Run after another code block | Triggers the code block when a specific code block has completed executing its change. When you have multiple code blocks, you can use this option to define the trigger sequence. |
| Campaign exit | Triggers the code block when the visitor navigates away from the campaign page. Use this trigger to undo or reset changes when the visitor leaves. For example, if your variation adds a custom price-range filter, this trigger resets it the moment the visitor navigates away, preventing it from persisting beyond the intended experience. |
Each code block also provides the following options under the More options dropdown:
-
Hide Selected Elements Until Code Runs:
Use this option to prevent a flash of original content that sometimes appears briefly before the browser applies the variation changes. For example, if you are testing a new product page layout, visitors may briefly see the original version before the new variation is applied. Hiding the affected elements ensures visitors only see the variation.
To hide certain elements:
- From the More options dropdown, click Select Elements.
- Select the elements to hide using one of the following methods:
- Click Select from page to interactively pick an element from the Visual Editor.
- Enter the CSS selector path in the Selector path field. To specify multiple selector paths, separate them with commas. To hide additional elements, click + Add another element and repeat the selection.
- Click Save to apply the configuration, or Discard to cancel it.
-
Add Code to Revert Changes. Use this option to define a reversion code that runs when a visitor navigates away from the campaign page. Reversion code helps undo or clean up changes made by the code block, restoring the page to its original state.
To add reversion code:
- Select More options dropdown
- Click +Add reversion code. The Visual Editor splits into two panes. Enter the reversion logic in the right pane.
- Click Done to save both the main code and the reversion code.
- To remove reversion code, click Remove in the top-right area of the reversion pane.
Code Editor Settings
You can also configure the following settings in your code editor.
-
Wrap Code: Selecting Wrap Code ensures that long lines of code wrap horizontally within the editor's visible area. This prevents the need for horizontal scrolling and makes it easier to review complex scripts or long CSS selectors at a glance.
-
Show Code Suggestions: The Show Code Suggestions feature provides autocomplete hints as you type. This feature suggests standard JavaScript functions, CSS properties, and HTML tags. It helps reduce syntax errors and speeds up the coding process by predicting the attributes or methods you intend to use.
-
Minify JavaScript/CSS code: The Minify JavaScript/CSS code feature allows you to compress your custom code by removing unnecessary characters like whitespace, comments, and line breaks. Minification reduces the size of your scripts and stylesheets, helping maintain fast page load times for your visitors.
To configure these settings:
- In the code editor, navigate to the top right and click the gear icon.
- From the dropdown, select the respective checkbox based on the feature you want to enable.
Need more help?
For further assistance or more information, contact Wingify Support.