Une communication efficace sur un site web nécessite de trouver le bon équilibre entre l'expérience utilisateur et les objectifs de votre entreprise. Des modales affichées au mauvais moment peuvent perturber la navigation, mais des pop-ups conçus de manière stratégique restent un outil essentiel pour collecter des prospects, promouvoir des offres et interagir avec les visiteurs. Collecter des adresses email et partager des informations importantes n'a pas besoin d'être compliqué. En configurant un pop-up dans Positive User, votre équipe peut facilement afficher le bon message aux bonnes personnes pendant leur navigation sur votre site.
Dans Positive User, vous disposez de deux options pour créer un pop-up : l’Éditeur visuel ou l’Éditeur de code.
Cette option vous permet de créer des pop-up simples à partir de modèles prédéfinis. Vous pouvez personnaliser le contenu et importer vos propres images.
Rendez-vous dans “Expérience du site web” → “Pop-ups” → “Nouveau pop-up”.
Choisissez entre “Formulaires de pop-up” et “Pops-up de redirection” dans le coin supérieur gauche de la section.
Choisissez l'un des modèles, survolez-le et sélectionnez “Éditeur visuel”.
Saisissez le nom du pop-up et ajoutez une description à destination de vos collègues.
Cliquez sur “Créer”. Vous accédez alors à l’écran permettant de modifier le contenu du pop-up.
La section principale affiche l'aperçu du modèle sélectionné. Toutes les modifications y sont reflétées en temps réel. Vous pouvez à tout moment changer de modèle en cliquant sur le bouton “Accéder aux modèles” dans le coin supérieur droit de l'éditeur.
Dans le coin supérieur gauche, vous pouvez basculer entre les modes mobile et desktop - cela vous permet d'ajuster parfaitement l’apparence du pop-up.
Sur la droite, plusieurs sections vous permettent de modifier les différents éléments liés au contenu et à l'affichage du pop-up.
Contenu
Dans cette section, vous définissez le message principal de votre pop-up.
Header : il s'agit du titre principal de votre pop-up. Utilisez cet espace pour mettre en avant votre offre ou votre annonce la plus importante (par exemple : “Rejoignez notre newsletter” ou “Découvrez notre nouvelle collection”).
Content : ce champ correspond au texte complémentaire. C'est l'endroit idéal pour ajouter davantage de détails ou expliquer la raison qui se cache derrière votre appel à l'action.
Style des boutons
Le bouton est le principal point d'interaction de votre pop-up. Il doit être clair et facilement identifiable.
Bouton : saisissez le texte qui apparaîtra directement sur le bouton. Des libellés courts et orientés action, comme “Inscrivez-vous” ou “Obtenez la remise”, sont généralement les plus efficaces.
Couleur de texte : choisissez la couleur du libellé à l'intérieur du bouton. Assurez-vous qu'il y a suffisamment de contraste avec l'arrière-plan pour garantir une bonne lisibilité.
Couleur de fond : sélectionnez la couleur principale de votre bouton. Il est recommandé de choisir une couleur propre à votre marque afin de conserver une apparence cohérente sur l'ensemble du site.
Style des liens
Selon le modèle choisi, vous pouvez offrir davantage d'options à vos visiteurs, comme un lien vers une page “Aide” ou vers vos informations de “Contact” en tant que liens secondaires.
Texte : saisissez le nom du lien (par exemple “À propos” ou “Politique de confidentialité”).
Ouvrir dans : décidez si le lien doit s'ouvrir dans un nouvel onglet ou dans l'onglet actuel.
Couleur du texte : vous pouvez personnaliser leur apparence. Une couleur discrète fonctionne souvent mieux afin qu'ils ne détournent pas l'attention du bouton principal.
Images
Les éléments visuels permettent d'harmoniser l'ensemble du pop-up et de lui donner l'impression de faire naturellement partie de votre site.
Image d’arrière-plan : l'image principale de votre pop-up.
Couleur de fond : contrôle le voile affiché derrière le pop-up lorsqu’il apparaît. Vous pouvez ajuster les valeurs RGBA pour rendre l'arrière-plan plus ou moins transparent et concentrer entièrement l'attention sur votre message.
Couleur d’arrière-plan : définit la couleur de base du pop-up, à l'endroit où se trouvent votre texte et les champs du formulaire.
Entrées
Si vous créez un formulaire pop-up, cette section vous permet de définir les informations que vous souhaitez collecter auprès de vos visiteurs. Chaque champ ajouté ici sera directement associé aux données de la fiche du contact.
Libellé : le texte affiché directement au-dessus du champ de saisie, qui indique à l'utilisateur quelle information renseigner.
Texte indicatif : le texte indicatif affiché dans le champ (par exemple : "[email protected]"), qui disparaît dès que l'utilisateur commence à saisir du texte.
Attribut : cette étape est essentielle. Elle indique au système dans quel champ de votre base de données Positive User les informations doivent être enregistrées (par exemple : “Email” ou “Prénom”).
Obligatoire ? : cochez cette case si le champ doit obligatoirement être rempli avant que l'utilisateur puisse soumettre le formulaire.
Lorsque votre pop-up est prêt, cliquez sur “Sauvegarder et quitter”. Vous serez alors redirigé vers votre liste de pop-up.
N'oubliez pas que pour activer un pop-up, vous devez désormais créer une automatisation associée.
Vous pouvez également créer des pop-ups personnalisés directement à partir du code HTML. Notre Éditeur de code est l'outil idéal pour cela. Vous pouvez soit créer un pop-up entièrement depuis zéro, soit modifier l'un des modèles existants.
Cette option requiert des connaissances en HTML.
Rendez-vous dans « Expérience sur le site » → « Pop-ups » → « Nouveau pop-up ».
Vous pouvez ensuite choisir de partir de zéro en cliquant sur le bouton “Éditeur de code” situé dans le coin supérieur droit de la section, ou modifier l'un des modèles existants. Pour cela, choisissez d'abord le type de pop-up (“Formulaires de pop-up” ou “Pop-ups de redirection”) dans le coin supérieur gauche de la section, sélectionnez un modèle, passez le curseur dessus, puis choisissez “Éditeur de code”.
Vous arrivez alors dans le panneau où vous pouvez personnaliser le pop-up. (Ou le créer entièrement depuis zéro si vous avez choisi “Éditeur de code” directement à l'étape précédente.)
Contrôle complet du HTML et du CSS
Le panneau situé à gauche est un éditeur complet qui vous permet de définir la structure et l'apparence de votre pop-up. Vous pouvez personnaliser la structure de votre formulaire, ajouter des conteneurs personnalisés ou intégrer des éléments supplémentaires, comme des icônes ou des blocs de texte spécifiques qui ne sont pas disponibles dans les modèles standards.
Insertion d’un champ
L'une des fonctionnalités les plus puissantes de l’Éditeur de code est le menu déroulant “Insérer un champ”. Il vous permet de faire le lien entre votre design personnalisé et votre base de données Positive User.
Placeholders dynamiques : plutôt que de créer manuellement les champs du formulaire dans le code, utilisez ce menu pour insérer des placeholders correspondant à des attributs spécifiques (par exemple “Email”, “Prénom” ou “Numéro de téléphone”).
Attributs personnalisés : si vous avez créé des attributs personnalisés (comme “Niveau de fidélité” ou “Catégorie préférée”), vous les retrouvez ici et pouvez les intégrer à votre formulaire. Lorsqu'un contact les renseigne, les données sont automatiquement enregistrées dans sa fiche.
Basculer l’aperçu
Utilisez ce bouton pour basculer entre votre code et un aperçu en direct du pop-up. Cela permet de vérifier rapidement le rendu et de repérer d'éventuels problèmes d'affichage.
Lorsque votre pop-up est prêt, cliquez sur “Enregistrer et quitter”. Vous serez alors redirigé vers votre liste de pop-ups.
Vous devez maintenant créer un workflow d'automatisation pour activer votre pop-up.
Votre pop-up est maintenant prêt. Pour afficher ce pop-up sur votre site, vous devez créer une automatisation dans la section “Automatisations”.
Le module “Afficher le pop-up” fait référence à l'ensemble des pop-ups créés dans “Expérience du site web” → “Pop-ups”.
Voici un exemple d'automatisation :
Consultez les articles consacrés aux automatisations pour construire un workflow efficace à destination des visiteurs de votre site.
Types de pop-up [LINK]
