Visual editor

Visual editor guide

Create headline, CTA, banner, image and hide/show experiments without code.

Last updated: May 22, 20268-14 minBeginner to intermediate
Start free See pricingMethodology

What does this do?

Visual editor guide helps make the visual editor workflow decision-ready in Testvoy. The goal is not only finding a setting, but understanding why it exists, how to read the outcome and where to debug first.

Know when to use it

Learn which UI fields matter

Know what success looks like

Visual editor guide screen flow
SetupQAReport
This placeholder can be replaced with a real product screenshot later.

When should you use it?

Use this guide during first setup, experiment creation, report interpretation or before sharing with a client or team. Testvoy keeps the workflow approachable for non-technical users while still exposing SDK, event and security context for developers.

  1. 01

    Choose the relevant workspace and project

  2. 02

    Follow the checklist on this page

  3. 03

    Verify with preview or verifier

  4. 04

    Share the setting or report with the team

How to do it

Most Testvoy workflows follow the same pattern: choose context, define the rule or change, then verify through QA and reporting. This keeps the product focused on decision quality, not only running tests.

  • Is the workspace correct?
  • Is the project key or domain correct?
  • Does the goal/event match?
  • Were mobile and desktop checked?
  • Any bot/SRM or dropped event warning?

Example visual editor change

Example: you want to test a homepage CTA button without code. First select the correct button with a stable selector, then save the text change inside the variant. Check desktop and mobile in preview; if button click is not connected to a goal, you cannot read the outcome.

  1. 01

    Open visual editor

  2. 02

    Select the button

  3. 03

    Use [data-testvoy="hero-primary-cta"] in the selector field

  4. 04

    Text change: replace 'Start free' with 'Start 14-day trial'

  5. 05

    Check in preview that the right button changes

  6. 06

    Verify CTA click or signup goal is connected

Stable selector example
<button data-testvoy="hero-primary-cta">
  Start free
</button>

/* Good */
[data-testvoy="hero-primary-cta"]

/* Fragile */
body > div:nth-child(3) > section:nth-child(2) > button

Practical scenario

A growth team changes CTA copy on the pricing page, connects signup_started and signup_completed goals, then reads Google Ads and returning visitor segments separately. If the result is promising, they share a report link with the client or leadership.

Common mistakes

Most mistakes come from wrong project keys, overly broad selectors, missing goals, staging/prod mixups, early decisions on small samples or skipping mobile QA.

Naming an experiment 'test'

Launching without a goal

Deciding on total CVR only

Sending screenshots instead of shareable reports

Related pages

Visual editorVisual editor basics

Learn element selection, changes, preview and QA flow.

Visual editorHow to write CSS selectors

Write stable selectors with ID, class, data attribute, parent-child and fragile nth-child examples.

Frequently asked questions

Who is Visual editor guide for?

Marketing, growth, product and developer teams can use the same guide at different depths.

Do I need a developer?

Not for basic visual changes and report reading; SDK, custom events, custom JS or enterprise security benefit from technical support.

How do I know it worked?

Verifier, recent events, preview, QA checklist and report warnings show setup and experiment health.

What is the common mistake?

Wrong project keys, missing goals, fragile selectors, early decisions on small samples and skipped mobile QA are common.

Docs

Try this guide in the app

Finish setup, create your first experiment and read the report with cleaner data in Testvoy.

Start free Docs