Visual Editor Guide
The SplitWisp Visual Editor is a Chrome extension that lets you create and edit A/B tests directly on your live website — no code changes required. Point-and-click to modify text, colors, images, visibility, and more, then preview changes in real-time before activating.
Installation
- Install the SplitWisp Visual Editor from the Chrome Web Store
- Click the extension icon and sign in with your SplitWisp account
- Navigate to your website in any tab
- Open the side panel to start editing
The extension requires the SplitWisp SDK to be installed on your website for visual changes to be delivered to visitors in production.
Getting Started
1. Select Your Project
Open the side panel and choose your project from the dropdown. The extension connects to the same projects and experiments available in the dashboard.
2. Create or Select an Experiment
- Click New Experiment to create a fresh experiment, or
- Select an existing experiment from the dropdown
New experiments start in Draft status with a default 50/50 split between Control and Variant A. You can add more variants and adjust weights in the dashboard.
3. Choose a Variant
Select the variant you want to edit (e.g. "Variant A"). The Control variant represents your original page with no changes.
4. Make Visual Changes
Click any element on your page to select it. The element editor appears in the side panel with options to:
- Edit text — change the visible text content
- Edit HTML — replace the inner HTML of an element
- Change colors — background color, font color
- Change font size — adjust typography
- Edit links — change href destinations
- Edit images — swap image sources
- Show / Hide — toggle element visibility
- Add / Remove CSS classes — apply or remove styling
- Set attributes — modify any HTML attribute
- Inject custom CSS — add global styles to the page
Changes are saved to the experiment variant in real-time and are visible in the dashboard's variant configuration table.
5. Preview Changes
When you select a variant, its visual changes are applied to the page immediately. Switch between variants to compare:
- Variant A — applies Variant A's changes to the page
- Control — reverts all changes and shows the original page
- Variant B — applies Variant B's changes (if you have multiple variants)
This lets you see exactly what each visitor segment will experience.
6. Save and Activate
Once you're happy with the changes:
- Verify the change count in the side panel matches your expectations
- Switch to the dashboard and click Start to activate the experiment
- The SDK will begin delivering variants to real visitors
Supported Change Types
The visual editor supports 16 DOM mutation actions:
| Action | Description | Example |
|---|
setText | Replace visible text content | "Buy Now" → "Get Started Free" |
setInnerHTML | Replace inner HTML | Swap a block of markup |
setBackgroundColor | Change background color | #ffffff → #22c55e |
setFontColor | Change text color | #000000 → #1a9fff |
setFontSize | Change font size | 16px → 20px |
setHref | Change link destination | /old-page → /new-page |
setSrc | Change image source | Swap a hero image |
setAttribute | Set any HTML attribute | data-variant="a" |
hide | Hide an element | Remove a distracting banner |
show | Show a hidden element | Reveal a promo section |
addClasses | Add CSS classes | Add highlighted class |
removeClasses | Remove CSS classes | Remove hidden class |
setStyle | Set inline CSS styles | opacity: 0.8 |
setVisibility | Toggle CSS visibility | visible / hidden |
setOuterHTML | Replace entire element HTML | Swap a complete component |
addGlobalCSS | Inject global CSS rules | Custom page-wide styles |
Each change targets elements using a CSS selector (e.g. #hero-cta, .pricing-card h2, [data-section="features"]). The SDK uses the same selectors in production to apply changes.
Lifecycle-Aware Editing
The visual editor respects experiment lifecycle rules:
Draft Experiments
- Fully editable — add, modify, or remove visual changes freely
- Save button is visible and active
Active Experiments
- Locked — visual changes cannot be modified while the experiment is running
- The side panel shows an info banner explaining that variants are locked
- Two options are available:
- Pause & Edit — pauses the experiment so you can make changes, then resume
- Duplicate as Draft — creates an editable copy without affecting the running experiment
Paused Experiments
- Visual changes editable — you can modify change values (text, colors, etc.)
- A warning banner reminds you that editing may affect result comparability
- When you resume in the dashboard, a warning toast confirms the changes
Completed Experiments
- Read-only — all changes are locked to preserve result integrity
- A success banner indicates the experiment is finished
- Duplicate as Draft is available to iterate on the experiment
Promoted Experiments
- Read-only — the winning variant is serving at 100% traffic
- A purple banner indicates the experiment is promoted
- Duplicate as Draft is available
Working with the Dashboard
The visual editor and dashboard work together seamlessly:
- Create in either — experiments created in the dashboard appear in the extension, and vice versa
- Edit visual changes in the extension — the dashboard shows visual change counts per variant
- Manage lifecycle in the dashboard — start, pause, resume, complete, and promote experiments
- Changes sync automatically — edits in the extension are immediately visible in the dashboard
Typical Workflow
- Create an experiment in the dashboard with variant names and traffic weights
- Open your website with the visual editor
- Select each variant and make visual changes
- Return to the dashboard to activate
- Monitor results in the dashboard
- Promote the winner when significant
Multiple Variants
You can create different visual changes for each variant in the same experiment:
- Select Variant A → edit elements → changes are saved to Variant A
- Select Variant B → edit elements → changes are saved to Variant B
- Select Control → no changes (original page)
Each variant's changes are independent. The SDK delivers only the assigned variant's changes to each visitor.
Changes Persist Across Sessions
Visual changes are saved to the server immediately when you make them. If you close and reopen the extension, reload the side panel, or switch browsers, your changes are preserved. Verify by checking the change count after reopening.
Troubleshooting
Extension doesn't show my experiments
- Verify you're signed in to the correct SplitWisp account
- Check that you've selected the correct project
- Archived experiments are hidden — unarchive them in the dashboard if needed
Changes don't appear on the page
- Ensure the element's CSS selector is correct and unique
- Check that the content script has loaded (look for the purple highlight on hover)
- Try reloading the side panel
"Pause & Edit" or "Duplicate as Draft" buttons
- These appear when an experiment is active or completed, preventing accidental edits to running tests
- Use Pause & Edit to temporarily stop traffic and make changes
- Use Duplicate as Draft to create an independent copy
What's Next?