Canvas Builder : concevoir librement popups et bannières

Le Canvas Builder est la surface de conception libre de Personyze. Au lieu de partir d’un modèle fini et d’en modifier le texte, vous assemblez une popup, une bannière ou un bloc intégré à partir d’éléments — un titre, une photo, un compte à rebours, un formulaire, un bandeau de recommandations — et vous les disposez comme vous le souhaitez.

Ajoutez-le comme n’importe quelle autre action : à l’étape Contenu d’une campagne, choisissez Canvas Builder. Il comporte trois étapes : Design Your Banner or Popup, Where the data goes (uniquement si votre design contient un formulaire) et Set Display Rules & Placement.

Cette dernière étape est celle où vous choisissez où il apparaît et quand il s’ouvre — y compris l’intention de sortie, sur ordinateur comme sur téléphone. Les déclencheurs sont les mêmes pour toutes les actions de popup et sont documentés dans Déclencheurs — quand la popup s’ouvre.

Canvas Builder ou Popup, Banner & HTML Builder ?

Les deux actions produisent les mêmes types de contenu et partagent tout ce qui suit l’étape de design — l’emplacement, les règles d’affichage, les conteneurs et les rapports sont identiques. Elles ne diffèrent que par la façon de concevoir.

	Canvas Builder	Popup, Banner & HTML Builder
Vous construisez en	Ajoutant et disposant des éléments	Choisissant un modèle et le remplissant
Idéal quand	Vous voulez une mise en page précise — photo en écran partagé, compte à rebours, roue, recommandations, règles par appareil	Vous voulez un rendu fini rapidement, ou vous collez et maintenez du HTML brut
Bibliothèque de modèles	15 designs de départ	Des centaines de modèles classiques
Modifiable dans l’ancien panneau	Non	Oui

Les actions Canvas Builder ne peuvent être modifiées que dans le nouveau panneau. Si votre équipe travaille encore dans l’ancienne interface, une action créée ici ne s’y ouvrira pas.

Partir d’un design, ou de rien

Une nouvelle action s’ouvre sur Partir d’un design. Il y en a 15, dont Showcase (toute la boîte à outils dans une seule carte), First-visit welcome, Coupon code, Sale announcement, Personalized greeting, Announcement bar, Exit-intent save, Minimizable teaser, Recommended for you, Picture beside the pitch, Full-screen takeover, Social proof, Latest articles et Blank. Chacun devient un design ordinaire une fois inséré — rien n’est verrouillé.

La bibliothèque d’éléments

Les éléments sont regroupés en Text · Media · Form · Layout · Dynamic dans le panneau Ajouter un élément. Cliquez pour ajouter à la suite, ou faites glisser sur le canevas — déposez sur le bord droit d’un élément pour placer les deux côte à côte.

Texte

Chip / Pill — une petite ligne en badge, par exemple « ★ Offre spéciale ».
Headline & Subtitle — le titre principal, avec une ligne d’appui facultative.
Paragraph — un bloc de texte courant.
Checklist — une liste d’avantages avec un titre et des puces colorées.
Rotating Text — fait défiler des messages un par un, en fondu enchaîné ou en glissement vers le haut.
FAQ / Accordion — une liste de questions-réponses qui se déplie sur place. Construite sur l’élément de divulgation natif du navigateur, elle s’ouvre donc même avec JavaScript désactivé.
Numbered Steps — une séquence « comment ça marche » avec des cercles numérotés automatiquement, en ligne ou en colonne.
Testimonials — des témoignages clients cités.

Médias

Image — une image avec hauteur maximale, arrondi et alignement.
Icon — une icône seule, dimensionnée et colorée.
Video — intègre un lien de lecture YouTube ou Vimeo.
Image Slider — un carrousel à balayer ; une deuxième diapositive fait apparaître des flèches.
Logo Row — une rangée de logos de clients ou de partenaires.

Formulaire

CTA Button — l’appel à l’action.
Form — des champs enregistrés dans des colonnes du profil visiteur, empilés ou côte à côte, avec un message de remerciement qui remplace les champs en cas de succès.

Mise en page

Divider — un filet horizontal.
Close (×) button — un bouton de fermeture que vous pouvez placer n’importe où, distinct du × de coin propre à la popup.
Media + Text — une image d’un côté, du texte de l’autre, avec une répartition réglable.
Menu — une liste de navigation, en ligne ou en colonne, éventuellement derrière une icône ☰.
Comparison Table — un tableau à deux colonnes « nous contre eux » ; les cellules remplies par oui ou non s’affichent sous forme de coche ou de croix.
Minimize tab — réduit toute la popup à un onglet avec libellé (voir plus bas).

Dynamique

Countdown — une date fixe, ou par visiteur / par session, avec un style Boxes, Pills ou Minimal.
Coupon — un code de réduction copiable en un clic.
Product Recommendations / Content Recommendations — des sélections en direct pour chaque visiteur, en slider ou en grille.
Social Proof — de vrais compteurs ou des lignes « acheteur récent », jamais inventés, masqués en dessous d’un seuil que vous définissez.
Progress Bar — la progression vers un objectif à partir d’un champ de profil, comme le total du panier ou des points.
Prize Wheel — une roue de la fortune pondérée, avec des lots et des codes par segment.
HTML / Embed — du HTML libre, livré tel qu’écrit.
Star Rating — une rangée d’étoiles qui affiche honnêtement les fractions (4,3 ressemble à 4,3, pas à 4), éventuellement lue dans une colonne du catalogue.
Stock Urgency — un badge « plus que 3 » alimenté par une colonne du catalogue ou un champ de profil, avec un seuil pour qu’il n’apparaisse que lorsque le stock est vraiment bas.
Personyze Placeholder — un emplacement vide qu’une autre action remplit, pour qu’un design puisse être assemblé à partir de plusieurs actions plutôt que d’un seul document énorme.
Custom JavaScript — du code qui s’exécute quand la popup est affichée ; n’affiche rien de visible.

Les éléments alimentés par des données s’affichent en aperçu avec des données d’exemple — votre catalogue, vos champs de profil et vos statistiques les remplissent sur le vrai site. Un élément Social Proof sans historique derrière lui ne s’affiche tout simplement pas pour ce visiteur.

Façonner le conteneur

Le panneau Conteneur contrôle le cadre dans lequel tout se trouve : la largeur (ajustée à l’emplacement, pleine largeur ou un maximum fixe), la couleur ou l’image d’arrière-plan, l’arrondi des coins, la marge intérieure, et ce qui se passe quand il est plus haut que l’écran — dépasser de l’écran, ou défiler à l’intérieur de la popup.

Split with a photo pane place une photo sur un côté, avec une largeur de panneau réglable et un point focal keep in view pour que les visages ne soient pas coupés. La disposition s’empile automatiquement sur téléphone.

Les polices forment une liste choisie qui ne télécharge rien — système, Helvetica/Arial, humaniste, géométrique, Georgia, slab serif ou monospace, plus celle qu’utilise la page. Cette dernière convient aux blocs intégrés et généralement pas à une popup flottante, qui doit avoir un aspect assumé sur une page inconnue.

Contrôle élément par élément

Styliser un élément dans le Canvas Builder de Personyze — L’onglet Style d’un titre : les styles prédéfinis en haut, puis chaque propriété séparément — avec un bouton **Variations** à côté de chacune, pour qu’une même valeur puisse varier selon l’audience sans dupliquer le design. Cliquez pour agrandir.

Sélectionner un élément ouvre son propre panneau à droite, sur deux onglets :

Contenu — ce qu’il dit et ce qu’il fait. Un compte à rebours compte jusqu’à une date fixe, selon un cookie par visiteur ou à chaque visite, et détermine ce qui se passe à zéro ; un bouton porte son libellé, son lien et le fait que ses clics comptent ou non. Le libellé d’un bouton, le lien qu’il ouvre ou le JavaScript qu’il exécute, et si ce sont ses clics qui comptent pour cette action.
Style — d’abord les styles prédéfinis (un titre propose Bold center, Editorial left, Statement), puis chaque propriété séparément : couleurs, tailles, graisse, alignement.

Presque chaque champ porte un bouton Variations. C’est ainsi qu’un seul design sert plusieurs audiences — une couleur de titre ou un libellé différent par segment, sur le même élément, plutôt qu’un design dupliqué à maintenir en parallèle.

Le bas du panneau reprend les trois actions que propose aussi la structure : Dupliquer, Masquer (l’élément reste dans la structure et est ignoré à l’affichage) et Supprimer.

Devices — afficher un élément sur tous les appareils, sur ordinateur et tablette, ou uniquement sur téléphone.
Animation — une entrée (fondu, montée, zoom, glissement) et une animation d’attention facultative (pulsation, secousse occasionnelle). Les visiteurs qui demandent moins d’animations le voient immobile.
Size & position — largeur, alignement, espacement, et placer à côté de l’élément précédent pour construire une rangée.
Background & border — arrière-plan, marge intérieure, bordure, arrondi, ombre et couleurs de survol propres à l’élément.
Advanced — CSS personnalisé, plus un CSS distinct pour les téléphones, pour les écrans jusqu’à 767px.

L’onglet de réduction

Ajoutez un Minimize tab et la popup se réduit en un onglet avec libellé au lieu de se fermer — toujours à un clic d’un retour. Vous contrôlez le libellé et l’icône dans les deux états, l’endroit où se place l’onglet, s’il démarre réduit, et si cet état est mémorisé d’une page à l’autre.

L’onglet Contenu d’un élément compte à rebours dans le Canvas Builder de Personyze — Le contenu d’un compte à rebours : jusqu’à quoi il compte — une date fixe, un cookie par visiteur, ou un redémarrage à chaque visite — et ce qui se passe à zéro : rester à zéro, afficher un message à la place, ou disparaître. Cliquez pour agrandir.

Variations — un design, plusieurs audiences

Presque chaque champ des deux onglets porte un bouton ⚡ Variations, avec un badge indiquant combien d’alternatives il contient. C’est ainsi qu’un seul design sert plusieurs audiences sans second design à maintenir en parallèle : un titre différent pour les visiteurs récurrents, un libellé de bouton différent dans un pays, une image différente pour ceux qui ont déjà acheté.

L’ouvrir vous donne une liste de cas. Chaque cas est une audience — construite avec le même constructeur de règles que l’étape de ciblage, donc tout ce que vous pouvez cibler, vous pouvez le faire varier — et le contenu que reçoit cette audience. En dessous se trouve la valeur par défaut : ce que voit toute personne qui ne correspond à aucun cas.

Les cas sont testés dans l’ordre, et le premier qui correspond l’emporte. Un cas large placé au-dessus d’un cas étroit rend ce dernier inutile — il ne sera jamais atteint, et rien dans la liste ne le signale. Placez vos audiences les plus précises en premier.

Comme il est facile de se tromper en lisant une pile d’éditeurs, la boîte de dialogue reformule l’ensemble en langage courant : « ce que reçoit réellement chaque visiteur », dans l’ordre où le moteur les teste, déduit des valeurs elles-mêmes. Elle signale aussi les quatre pièges :

Un cas sans condition est supprimé quand vous cliquez sur Done — donnez-lui une condition ou retirez-le.
Un cas au contenu vide signifie que cette audience ne voit rien. Correct si vous vouliez masquer l’élément pour elle ; une erreur sinon.
Une valeur par défaut vide signifie que toute personne qui ne correspond à aucun cas ne voit rien.
Une condition écrite en SQL brut ne peut pas être vérifiée ici. Elle s’exécute quand même exactement telle qu’elle est écrite.

Le champ que vous voyez dans le panneau est toujours la valeur par défaut : un champ qui varie n’a donc jamais l’air vide. Les alternatives se trouvent derrière le bouton, et le badge est le seul signe de leur présence — un coup d’œil s’impose avant de vous demander pourquoi une modification n’a pas atteint quelqu’un.

Versions et modification par IA

La barre des versions crée des designs propres à une audience dans une seule action : une version Default que tout le monde voit, plus des versions nommées évaluées selon la règle du premier qui correspond, avec tout votre vocabulaire d’audience — traits du visiteur, géographie, comportement, champs CRM, page en cours.

Modifier cette popup avec l’IA réécrit ou restyle le design à partir d’une instruction en langage courant. Cliquez d’abord sur un élément du canevas pour concentrer l’IA dessus, puis sur Appliquer les modifications de l’IA.

Bon à savoir

Un bouton ne compte les clics que s’il s’agit d’un vrai appel à l’action. Les boutons ajoutés depuis les designs sont reliés aux rapports ; si vous construisez un lien à la main et que ses clics n’apparaissent jamais, voilà pourquoi.
Les rapports dépendent du type d’action, pas de ce que vous y mettez. Un élément Form dans une simple popup Canvas Builder remonte les soumissions comme des clics. Les rapports propres aux formulaires — le rapport Formulaires, les audiences « a soumis un formulaire », les e-mails de suivi — viennent du type d’action dédié aux formulaires de capture de prospects.
Video intègre YouTube et Vimeo. Les autres hébergeurs ne sont pas intégrés.
Le CSS personnalisé est assaini. Les déclarations contenant des guillemets, des chevrons, des accolades ou
javascript: sont supprimées. Une règle qui « ne fait rien » vient généralement de là.
Masqué ne veut pas dire supprimé. L’icône en forme d’œil conserve un élément dans votre design mais l’ignore pour les visiteurs.
Effacer tout le contenu demande deux fois confirmation, et l’annulation peut encore tout restaurer.

Voir aussi

Guide de l’action Popup et bannière — le constructeur basé sur des modèles.
Insérer des variables dynamiques — personnalisez le texte de n’importe quel élément.
Tests A/B — comparez deux designs.