Live editor : l’éditeur visuel WYSIWYG

Le Live editor — l’éditeur visuel WYSIWYG — vous permet de modifier n’importe quel élément de votre vrai site en pointant et en cliquant : textes, images, styles, mise en page. Vos modifications sont enregistrées sous forme d’action Personyze et montrées à l’audience de la campagne. Rien n’est réécrit dans la page elle-même : votre site n’est jamais touché.

L’ouvrir sur la bonne page

À l’étape Contenu de la campagne, Ajouter une action → Live. Choisissez ensuite la page sur laquelle vous allez travailler — le canevas, et non la seule page sur laquelle les modifications s’appliquent.

Show the pages of your site liste ce que Personyze connaît déjà, par groupes : Most visited, Product pages, Article pages. Tapez pour filtrer.
Ou saisissez vous-même n’importe quelle URL. Sur un compte tout neuf, il n’y a encore rien à lister, et la zone l’indique.

Deux façons de l’ouvrir :

Edit inside Personyze — la page se charge dans le panneau, avec le panneau Changes à côté.
Open in a new window — la page s’ouvre seule, avec la barre d’outils d’édition par-dessus.

Where it applies est activé par défaut : work on all pages that have the same element structure — modifier une page produit couvre tout le gabarit. Décochez-le, ou choisissez des groupes de pages, quand la modification concerne des URL précises.

Écran de configuration du WYSIWYG — La configuration : l’URL du canevas, les deux façons d’ouvrir l’éditeur et la case de portée. Cliquez pour agrandir.

Pas encore de code de suivi sur la page ? L’éditeur l’ouvre alors via le chargeur Personyze, pour que vous puissiez concevoir avant l’installation de la balise. Le chargeur n’ouvre que les domaines enregistrés sur votre compte — si vous voyez « cette page ne fait pas partie de vos sites », ajoutez le domaine dans les réglages du tracker et rouvrez.

Certains sites refusent d’être intégrés — un en-tête X-Frame-Options ou CSP bloque toute iframe. L’éditeur indique « ce site ne peut pas être intégré » et propose deux solutions : le chargeur proxy, ou l’ouverture dans une nouvelle fenêtre. Ni l’une ni l’autre ne change ce que vous pouvez modifier.

Une page client chargée dans le Live editor de Personyze — L’éditeur avec une vraie page chargée : l’URL du canevas et la taille d’appareil en haut, « Où elle s’applique » en dessous, et le panneau Changes qui attend à droite. Cliquez pour agrandir.

Dimensionner le canevas

Le sélecteur d’appareil prévisualise les largeurs ordinateur, tablette et mobile, et Custom accepte une largeur et une hauteur exactes — utile pour le seul point de rupture où votre design casse réellement. Expand the editing area masque les réglages et donne toute la largeur à la page ; Échap fait revenir les réglages. Le panneau Changes se masque de la même façon.

Modifier un élément

Survolez pour mettre en évidence, cliquez pour sélectionner — la barre d’outils flotte au-dessus de l’élément au lieu d’être dans une barre latérale. On y trouve : Edit text, Rich editor, Style, Properties, Duplicate, Delete, HTML source, avec un fil d’Ariane pour remonter dans le DOM et les onglets Basics / Layout / Insert / Behavior / Tracking.

Les variables visiteur dynamiques s’insèrent dans n’importe quel texte — « Bon retour parmi nous, {first_name} ».

Live editor ouvert sur une boutique en ligne — Le Live editor : la barre d’outils flottante de l’élément, la barre latérale sombre du Live Editor (URL, IA au niveau de la page, Changes) et le sélecteur d’appareil — sur la vraie page. Cliquez pour agrandir.

Ajouter quelque chose à la page

La barre d’outils de l’élément comporte cinq onglets — Basics, Layout, Insert widget, Behavior, Tracking. Insert place du nouveau contenu avant, après ou dans l’élément choisi.

Éléments simples

Une image, un lien, une vidéo, du HTML personnalisé, ou un bloc — simple ou sous forme de boîte de message avec un bouton de fermeture. Le rôle d’un bouton se configure ensuite, dans l’onglet Behavior.

Widgets Canvas

Vingt-six des blocs propres au Canvas Builder peuvent être déposés directement dans votre page :

Groupe	Widgets
Urgence et offres	Countdown · Coupon · Stock Urgency · Progress Bar · Prize Wheel
Texte et mise en page	Headline & Subtitle · Paragraph · Chip / Pill · Checklist · Divider · Icon · Rotating Text · Numbered Steps · Media + Text · Menu
Preuve et explication	FAQ / Accordion · Star Rating · Comparison Table · Testimonials · Logo Row · Image Slider
Interactifs	Form · AI Chat · AI Search
Raccordement	Personyze Placeholder

Le panneau Insert widget du Live editor de Personyze — L’onglet Insert, avec l’élément choisi nommé dans le fil d’Ariane au-dessus. Les éléments simples d’abord — image, lien, bloc, vidéo, HTML personnalisé — puis les widgets Canvas. Cliquez pour agrandir.

Un widget déposé dans votre page fonctionne — le compte à rebours défile, la roue tourne, le formulaire remonte ses données — car l’action embarque le même moteur que celui pour lequel le constructeur de blocs compile.

Form, AI Chat et AI Search n’apparaissent que si votre compte et cette action les autorisent. Insérez un formulaire et l’action bascule d’elle-même vers sa variante compatible avec les formulaires, pour que les soumissions soient recueillies de la même façon que par le formulaire de capture de prospects.

Les widgets de recommandation ne figurent volontairement pas dans cette liste. Une recommandation est une requête, et elle a besoin d’une source déclarée par l’action — ce que le type d’action du Live editor ne déclare pas. En insérer un afficherait des jetons non substitués sur votre page, devant un visiteur. Insérez plutôt un Personyze Placeholder et pointez une action de recommandation vers lui : le même résultat, avec la requête là où elle doit être.

Les réglages du widget, après coup

Cliquez à nouveau sur un widget inséré et vous obtenez ses réglages — pas le HTML qu’il a produit. Les mêmes choix que dans le Canvas, sur deux onglets :

Où le placer — avant, dans ou après l’élément choisi, défini dans le panneau propre au widget.
Content — ce qu’il dit et ce qu’il fait. L’échéance et les libellés d’unités d’un compte à rebours ; le code et le style de révélation d’un coupon ; les segments et probabilités d’une roue ; les questions d’une FAQ ; les lignes d’un tableau comparatif.
Style — couleurs, tailles, coins, espacements, animation.

Les réglages d’un widget compte à rebours dans le Live editor — Les réglages propres à un compte à rebours : où le placer par rapport à l’élément choisi, puis Content et Style. « Appliquer sur », en bas, détermine si l’insertion suit l’élément sur toutes les pages qui se ressemblent. Cliquez pour agrandir.

Les widgets les plus riches en ont beaucoup : la Prize Wheel compte dix-neuf réglages, le Form seize, le CTA Button et le Media + Text treize chacun.

Pourquoi cela fonctionne. La modification enregistre les réglages du widget à côté de son balisage : « comment changer le titre ? » a donc une réponse des mois plus tard. Le compilateur lui-même ne se charge jamais dans votre site — la page demande à la fenêtre Personyze de recompiler quand une valeur change, puis réaffiche le résultat.

Un Logo Row ou un Image Slider n’a rien à afficher tant que vous ne lui avez pas donné d’images. L’élément vide que vous voyez est celui que vous êtes en train de remplir.

Quand la modification s’affiche, et ce à quoi elle réagit

L’onglet Behavior du Live editor de Personyze — Trois comportements sur n’importe quel élément : au clic, défilement jusqu’à un élément, et exécution différée — « attendre cet élément ». Cliquez pour agrandir.

Behavior → attendre quelque chose

Par défaut, une modification est appliquée dès que la page est prête. Sur une page qui se construit ensuite — un framework qui affiche côté client, une section chargée en différé — c’est trop tôt, et la modification tombe sur un élément qui n’existe pas encore.

Wait for accepte un sélecteur CSS (ou choisissez l’élément sur la page), éventuellement un texte que l’élément doit afficher, puis un délai supplémentaire en millisecondes. La modification attend que tout soit vrai.

Behavior → au clic

Faites faire quelque chose à n’importe quel élément. Quand le visiteur clique dessus — ou le survole, le quitte, lui donne le focus, le lui retire, appuie sur une touche — alors :

Dismiss an element from the page — c’est ainsi qu’on construit un bouton de fermeture.
Execute another action — un élément ouvre le contenu d’une autre campagne.
Execute custom JavaScript.
Trigger a custom event or goal — pour que le clic compte comme une conversion.
Scroll to vers un élément, aligné en haut, au milieu ou en bas de l’écran, avec un décalage et un mouvement fluide ou instantané.

Chacun peut s’exécuter une fois ou à chaque fois.

Suivi

Indiquez quel élément compte comme le clic pour le taux de clics de cette action. Sans cela, une action comportant plusieurs liens compte tous les clics de la même façon, et le CTR répond à une question que personne n’a posée.

Le panneau Changes

Chaque modification arrive dans le panneau de droite sous forme de ligne vérifiable — une étiquette de type de modification, une description de ce qui a réellement changé (pas seulement « Style ») et l’élément ciblé.

Undo / Redo parcourent l’historique. Le Undo d’une ligne annule cette modification et tout ce qui suit, et la ligne indique « annulé — ne sera pas enregistré » jusqu’à ce que vous fassiez Redo.
Focus on page fait défiler jusqu’à l’élément et le met en évidence.
Show original annule toutes les modifications pour que vous voyiez la page telle qu’elle est arrivée. Rien n’est perdu — appuyez à nouveau pour les rétablir. L’édition est suspendue pendant la comparaison, et c’est voulu : une modification faite sur l’original serait enregistrée sur une page qui n’est pas celle que voient vos visiteurs.
Discard all vide la liste, après confirmation.

Rien n’est enregistré tant que vous n’avez pas sauvegardé l’action : rien de tout cela ne peut donc faire perdre un travail déjà enregistré.

IA intégrée

Deux niveaux, qui produisent tous deux des lignes de modification ordinaires — vérifiables et annulables exactement comme vos propres modifications.

Par élément

Avec un élément sélectionné, décrivez le remplacement avec des mots simples. « Ceci » désigne l’élément sélectionné. Vous pouvez aussi décrire la modification à voix haute au lieu de la taper.

Sur toute la page

La carte en haut du panneau Changes accepte une consigne visant l’ensemble : « Réécris cette page pour les acheteurs grands comptes », « Rends les appels à l’action plus pressants », « Resserre chaque paragraphe ». Suggest edits propose des consignes toutes prêtes si vous préférez choisir plutôt qu’écrire. L’IA examine la page, applique ses modifications sous forme d’enregistrements de modification, et résume ce qu’elle a fait en quelques phrases simples.

IA au niveau de la page : une consigne pour toute la page, avec des suggestions toutes prêtes comme « Réécris cette page pour les acheteurs grands comptes ». Cliquez pour agrandir.

Modification par IA appliquée et consignée — L’IA a réécrit le titre hero en « Sound. Everywhere. », a expliqué ce qu’elle a fait et l’a consigné comme modification TEXT vérifiable, avec Undo / Show original — et le quota mensuel d’actions IA affiché. Cliquez pour agrandir.

Varier selon l’audience

Une action Live s’affiche pour l’audience ciblée par la campagne. Pour plusieurs variantes — un titre différent par langue ou par segment — ajoutez une action Live par variante avec son propre ciblage, ou faites-les tourner en cas partagés et laissez les résultats décider.

Voir aussi

Variables dynamiques dans l’éditeur
Canvas Builder — quand vous voulez construire quelque chose de nouveau plutôt que modifier l’existant.
Popup et bannière — ajouter du contenu par-dessus la page au lieu de la modifier.
Plafonds de fréquence — la fréquence à laquelle la modification est appliquée.