The visual editor

Change your page by clicking on it: words, colors, sizes, images and more. No code.

The visual editor lets you change your own website by clicking on it. No code. What you change becomes the new version (B) of a split test.

Think of tracing paper

Lay a sheet of tracing paper over a poster and draw your changes on the sheet, not on the poster.

Some people who walk by see the poster with your sheet on top. The others see the poster as it always was. Lift the sheet and the poster is untouched.

That's the editor. Your real site stays the same. Needlr lays your change on top, only for the visitors in the new group.

When to use it

Before you start

• Your website is added to the project (how).
• You published to Google Tag Manager at least once (how). That's what puts the editor on your site. Until then the editor button can't be pressed.

How to make a change

1. 1On your project page, press + New impact check. Under What are you shipping?, give it a short name and pick Split test.
2. 2Press Open my site and make the change. Your site opens in a new tab, with the Needlr visual editor on the side. Only you see it.
3. 3Move your mouse over the page. The highlighted part is what you'll edit. Click it. Links don't open while the editor is on.
4. 4Pick what to do: Change, Hide, Move or Add. The page changes as you go.
5. 5Switch between A · today and B · new at the bottom to compare the old page and the new one.
6. 6Press Use these changes. You're back in Needlr, and step 1 says what you changed. Want to fix something? Press Edit again.

Everything you can change

Under Change, you see the settings that fit what you clicked:

• Text: type new words. If the element holds other things, like an icon, the new text replaces them.
• Colors: the text, the background and the border.
• Text style: font size, boldness, capitals, underline and alignment.
• Shape & size: corners (from square to a round pill), padding inside, space around it, width (full or automatic) and a shadow.
• Link (when you clicked a link): a page on your site it should go to, and Open in a new tab.
• Image (when you clicked a picture): the web address of a new picture. It must be on your own website.
• Placeholder (when you clicked a text box): the grey hint inside the box, like “Your work email”.

The other tabs:

• Hide: the element disappears for the new group. Everyone else still sees it.
• Move: pick another element, then put yours above or below it. For example, reviews above the prices.
• Add: a button (it needs a link to a page on your site), a line of text, or an Announcement bar (top of page). Choose where it goes: right after or right before what you clicked, or inside it, at the start or the end.

Clicked a button or a link? Under Apply to, choose Only this one, or Every button reading its words. The second one changes every button and link with the same words, on every page of your site.

One impact check holds one change. You can change many things about it at once, like its words, color and size together. To test two different ideas, make two impact checks.

Your change shows Only on the page you made it on. Choose On every page where the same element appears to show it everywhere that element is.

Send visitors to another page

Built a whole new page? Under the editor button, press Or send visitors to another page.

Fill in When a visitor opens: choose is exactly, starts with or contains, and type a page, like /pricing. Then send them to the new page, like /pricing-v2.

Visitors in the new group go to the new page. Everyone else stays where they are. Both pages must be on your own website. Anything after the page name in the address, like a campaign tag, comes along.

Changes at the top of the page

Needlr loads a moment after your page appears. So a change at the very top could be seen switching from old to new. That's called flicker. When you pick something there, Needlr asks how to handle it:

• Change it anyway (recommended): people in the new group may see it fade in, for about 0.2 seconds. Everyone is counted.
• Never let anyone see it change: Needlr leaves it alone for anyone who could already see it. Most visitors are then left out, and the impact check may never finish.
• Add one line to your site: a tiny piece of code in your site's <head>. It hides the page for a split second, never more than one second, until the change is in place. Nobody sees anything switch.

The No flicker card on your project page shows that line, says where to paste it (WordPress, Webflow, Wix, Shopify or any other site) and checks that it's there. You can also pick something lower on the page, send visitors to another page, or use a developer split test.

Look before you start

In step 3, Preview B on my site opens your site showing the new version, before anyone else sees it. It saves the impact check as a draft. Nothing is measured until you press Start measuring.

Starting an impact check that changes your site needs a code from your authenticator app.

Common mistakes

• The editor doesn't open. An ad blocker or privacy extension is usually the cause. Pause it for your site, close that tab and try again. If the browser blocked the new tab, allow pop-ups for Needlr.
• A picture from another website. New images must come from your own website, or a part of it like images.yoursite.com.
• Leaving a top-of-page change alone. If you choose to never let anyone see it change, most visitors are left out and the impact check can take forever.
• Testing two ideas in one impact check. If it wins, you won't know which idea did it. One idea per impact check.

Words to know

Element

One piece of a page: a heading, a button, a picture, a box.

Version B

Your page with the change. Version A is the page as it is today.

Flicker

Seeing the old version for a moment before the new one appears.

Redirect

Sending a visitor from one page to another page.