Experimentation

No-code visual editor

Select an element on your own live site and change it in the inspector, or drop in a ready-made section. The variant saves; the page is untouched.

AI editor

Describe the change, and watch it get built

Tell the editor what you want in plain words, or point at an element and ask. The AI reads the page, proposes the changes and previews them on your live site. Nothing is saved until you apply it.

The AI editor beside a cluttered landing page: a prompt asks for one clear headline, one main button and plans that are easy to compare, the AI proposes five changes and previews them as the page is redrawn clean, and the changes are applied and saved.
  • A word or a whole sectionFix one headline, or rework a whole hero, menu or pricing table from a single prompt. Each change is listed on its own, so you keep the ones you want.
  • JavaScript only when it is neededMost tests are copy, styling and markup, and that is what it writes. When a test needs behaviour, such as something that reacts to a click or a scroll, it writes the code too, and the code waits for its own approval.
  • It reads the page for youThe AI works from an outline of the page you are on: its structure and its copy. You describe the outcome, and it finds the elements to change. No selectors, no developer.
  • A preview before anything is savedProposed changes appear on your live page, each with its own checkbox. Apply them and they become ordinary changes in the variant, with undo, until you save.
  • Strong experiments without codeAnyone who can describe a better page can build the variant for it. The AI answers in the language you write in, and keeps the page's copy in the page's own language.
  • You see the cost firstEach request uses AI credits, and the panel shows an estimate before you send it. Form values and personal details on the page are masked before anything is sent.
Live siteInspectorComponents

The editor opens from Chrome's side panel and loads your real site in a frame, so you point at the thing you want to change rather than describing it in a ticket. Selecting an element opens the inspector: typography, spacing on a box model you can drag, size, layout, background and border, and a search across any CSS property the browser knows. Each change is recorded against the variant you are editing, never against the page.

A Normal, Hover, Focus and Active switch styles an element's interactive states without CSS, so a button can change colour on hover in the variant the way it would in your stylesheet. Text is edited where it sits with a double-click, and links, images (including the responsive images most Shopify stores use), alt text and accessibility labels have fields of their own.

Changes are not limited to what is already on the page. The Add tab is a library of blocks, layouts and media, from a hero or an FAQ to a sticky buy bar on mobile, and each one takes on the site's own fonts and colours where it lands. Any text in a change can carry the page's own data, so one change can show each product's own price.

A changes list shows everything the variant does in plain words (Moved, Added button, Heading text) with undo and redo you can rely on, and edits made while a save is running are kept. That list is the variant. It is what gets applied on a visitor page, and what the implementation hand-off later reads to tell a developer what to hard-code.

Start trialSee it in the console

The editor at a glance

One screen for everything a test changes

Layers and components on the left, your live page in the middle, the inspector on the right. Every section below is one part of it, shown working.

The visual editor on a product page: the Trust row block is dragged from the Add tab and dropped under the add-to-cart button, its rating line is bound to the page's own product rating and review count, and the variant is saved.

Chrome side panel

Open the editor from the page you are looking at

The extension docks in Chrome's side panel, next to the site, and follows the tab you are on. It finds the website, lists its experiments, and opens the editor on this page rather than on whichever page the test started from.

  • Full height and resizable, and it stays open when you click into the page
  • Filter by status, or search by name or experiment number
  • Asks for access to a site once, the first time you open the editor there
Chrome's side panel beside a product page, listing the website's draft experiments, with the selected one showing its variants and an Open editor button.

Component library

Add a whole section, not just a new colour

Drag a block from the Add tab onto the page, and a blue line shows where it will land before it does. It arrives in the site's own font and heading sizes, with its accent colour taken from where you dropped it.

  • Twelve blocks, from a hero and an FAQ to a sticky bar and a pop-up
  • Sections, containers and columns that stack on phones
  • Video, an image slider and a gallery, with YouTube played through its no-cookie player
The Add tab beside a product page: the FAQ tile is dragged onto the page, a blue line marks where it will land, and an FAQ appears under the add-to-cart button with chevrons in the green of the site's own buttons.

Dynamic content

Build it once, and every page fills in its own data

Insert data from the page into any text, link or image, picked from a list of the page's real values. A banner built once greets each visitor with the campaign they came from; on a shop, a sticky bar shows each product's own name and price.

  • Campaign, visitor and date data on every site, with no setup
  • Product, price and cart data on shops, in the page's own currency
  • Missing data hides the element, or shows a fallback you choose
A sticky buy bar built once from the product name and price, shown on a phone as it fills in its own name and price on three different product pages in turn.

Data feeds

Data from your own systems, inside the test

Connect a feed the site already publishes, such as reviews, event dates, campaign copy or a Google Merchant product feed, choose which item each visitor sees, and tick the fields a page may show. Pertento's servers fetch it on a schedule, so visitors never wait on yours.

  • Match the item to the page address, a URL parameter, the campaign or the product
  • Or show the item scheduled for now, for timed promotions
  • Only the fields you tick ever reach a visitor
A reviews feed in the website settings, matched to the product by SKU and refreshed every hour, with two of its fields ticked, and the product page replacing its fallback with the review average and count the feed supplies.

Inspector and states

Style hover, focus and active without writing CSS

The inspector edits whatever you select: typography, spacing on a box model, size, layout, background and border. A Normal, Hover, Focus and Active switch styles the interactive states, so a button's hover colour is part of the variant too.

  • Search any CSS property the browser knows, with Reset on every field
  • Links, responsive images, alt text and accessibility labels
  • Each state edit is an ordinary change, with undo and save
The inspector with its state switch moved from Normal to Hover and a darker blue background set, while the Start free trial button on a pricing card turns that colour and lifts under the pointer.

Text in place

Rewrite a headline where it sits

Double-click any text on the page and type. Bold, italic and underline work as they do in a document, and when you click away the edit becomes an ordinary change that undo restores exactly.

  • Bold, italic and underline from the keyboard, Shift+Enter for a line break, Escape to cancel
  • Works on text and the inline markup inside it
  • Listed in the changes in plain words, as Heading text
A landing page headline double-clicked and rewritten in place, with the bold, italic and underline toolbar above it, and the edit appearing in the changes list.

Every match

Change every matching element at once, including the ones that load later

Target a CSS selector and add styling or HTML to everything it matches. Elements that arrive later through infinite scroll, carousels or in-app navigation get the change too, once each.

  • Append, prepend, before, after or replace
  • A live count of how many elements match
  • Select similar does the same by pointing, for every element like the one you picked
The CSS selector tool targeting the article cards on a blog listing, with twelve matches: a New badge appears on each card in turn, and a further row loaded by infinite scroll arrives already carrying it.

Changes and saving

Every change listed, in words you can read

Each edit is listed in plain words, such as Moved, Added button or Heading text, with undo and redo you can rely on. Edits made while a save is running are kept, a failed save can be retried, and closing asks first.

  • Revert any single change from the list
  • Global CSS and JavaScript at the top, with their line counts
  • A change whose element is missing from the page is marked, not hidden
The changes list for a variant filling up with four edits in plain words, the last one undone and redone, and the status moving from unsaved changes through saving to all changes saved.

Preview anywhere

See the variant on a real phone

Device previews show desktop, tablet and phone sizes inside the editor. For the real thing, Preview on another device gives a link that opens the saved variant on any phone or browser, and a second link that puts that browser back to normal.

  • Sign-in tokens are stripped from the link, so it is safe to share
  • Shows the saved changes while the experiment is running on that page
  • Opens in any browser, not only Chrome
The Preview on another device panel with a link and a copy button that confirms the copy, beside a phone showing the variant's product page.

Code when you want it

HTML, CSS and JavaScript, with the same page data

Anything the visual tools cannot express is written as code on the variant. Edit or add HTML around an element, or write the variant's global CSS and JavaScript, and read the page's data with pertento.data().

  • Insert page data adds a token to HTML
  • Read page data adds a pertento.data() call to JavaScript
  • Global CSS and JavaScript can be cleared completely
The code editor on a variant's JavaScript, reading the visitor's campaign with pertento.data() and changing the page headline for visitors who arrived from one particular campaign.

Keyboard shortcuts

Shortcuts for the actions you repeat

Shortcuts work as soon as you click an element on the page, and the full list is behind the keyboard icon in the editor's toolbar.

Save
⌘SCtrl+S
Undo
⌘ZCtrl+Z
Redo
⇧⌘ZCtrl+Y
Edit HTML
E
Duplicate
D
Hide, keeping its space
H
Add element
A
Remove element
⌫
Select parent
⇧↵
Move up or down
⌥↑⌥↓
Open the element menu
⇧F10
Edit text in place

More in this area

Better experiments, better conversions

Test on all visitors with the world’s lightest script and make confident decisions powered by real-time reporting.

Start trialRequest a demo