Personyze Wiki Personyze Wiki docs
Open Personyze
Content Editor & Variations

WYSIWYG Editor

What is the WYSIWYG Editor? The What You See Is What You Get (WYSIWYG Editor) is a point-and-click visual editor that allows you to adjust any aspect of a target page, without writing a…

4 min read Updated 2 weeks ago

The WYSIWYG Visual Editor lets you change any element of your live site — text, images, styles, layout — by pointing and clicking, without writing code. Your edits are recorded as a Personyze action and shown to the campaign’s audience; nothing is saved back to the page itself, so your site is never touched.

Starting an edit

  1. In the campaign’s Content step, click Add action and pick WYSIWYG Visual Editor.
  2. The page you edit on — type any URL of your site. It is the canvas: the page you point at while editing, not the only page the edits run on.
  3. Open it either way:
    • Start editing — the page opens in a new window with the editing toolbar over it.
    • Edit inside Personyze — the page loads right inside the panel, with the Changes panel beside it. A device switcher previews Desktop / tablet / mobile widths.
  4. Where it applies — by default Work on all pages that have the same element structure is on: editing one product page covers the whole template. Untick it (or use page groups) when the change belongs to one URL.
WYSIWYG setup screen
The setup: canvas URL, the two ways to open the editor, and the scope checkbox. Click to enlarge.
No tracking code on the page yet? The editor opens it through the Personyze loader instead — you can design before the tag is installed. The loader only opens pages on domains registered to your account; if you see “This page isn’t on one of your sites”, add the domain under Tracker settings and reopen.

Editing elements

Click any element on the page. The editing toolbar opens on it: change the text, swap the image, restyle, hide it, or move it. Dynamic visitor variables can be inserted into any text — “Welcome back, {first_name}”. Each field also has an AI assist: describe the replacement you want in plain words and it writes the value for that field.

The Changes panel

Every edit lands in the right-hand Changes panel as a reviewable row — a change-type tag plus a description of what actually changed (not just “Style”), and the element it targets:

  • Undo / Redo arrows walk the history; a row’s Undo takes back that change and everything after it, and an undone row shows “Undone — it will not be saved” until you Redo it.
  • Focus on page scrolls to the element and highlights it.
  • Show original flips the page back to its unedited state for comparison — Put changes back restores them.
  • Discard all undoes everything and empties the list. Nothing is stored until you save the action, so this cannot lose anything already saved.
Live editor open on a storefront
The live editor: floating element toolbar, the dark Live Editor sidebar (URL, Page-level AI, Changes), and the device switcher — running on the real page. Click to enlarge.
Element toolbar
Click any element and its toolbar opens: Edit text, Rich editor, Style, Properties, Duplicate, Delete, HTML source — with a breadcrumb up the DOM and Basics / Layout / Insert / Behavior / Tracking tabs. Click to enlarge.
AI edit applied and logged
The AI rewrote the hero headline to “Sound. Everywhere.”, explained what it did, and logged it as a reviewable TEXT change with Undo / Show original — with the monthly AI-actions quota shown. Click to enlarge.

Built-in AI

Two levels:

  • Per-field — when editing one element, ask the AI for a replacement value for that specific field.
  • Page-level AI — the card at the top of the Changes panel takes one prompt aimed at the whole page: “Rewrite this page for enterprise buyers”, “Make the calls to action more urgent”, “Tighten every paragraph”. The AI inspects the page, applies its edits as ordinary change records — each one appears in the list, reviewable and undoable like your own — and reports what it did in a couple of plain sentences.
Per-element AI assistant
Per-element AI: describe the change in plain words (“this” means the selected element) and it makes it. Click to enlarge.
Page-level AI
Page-level AI: one prompt for the whole page, with ready-made suggestions like “Rewrite this page for enterprise buyers”. Click to enlarge.

Making it different per audience

The WYSIWYG action shows to whoever the campaign targets. For several variants — a different headline per language or segment — add one WYSIWYG action per variant with its own targeting, or run them as A/B variations and let results decide.

Related

Did this page answer your question?
Thank you — that goes to whoever maintains this page.