Creative Popup

Présentation

Creative Popup est un module de popups nouvelle génération pour PrestaShop, conçu pour créer des campagnes marketing efficaces sans écrire une seule ligne de code. Contrairement aux solutions basées sur des éditeurs WYSIWYG limités, ce module intègre un véritable constructeur visuel drag & drop propulsé par GrapesJS : vous composez une popup pixel-perfect, vous ajustez chaque style (typos, couleurs, espacements, overlays) et vous contrôlez précisément quand, où et à qui l’afficher. L’objectif est simple : augmenter les inscriptions newsletter, améliorer la conversion, réduire l’abandon de panier et mettre en avant vos promotions avec des popups rapides, responsives et parfaitement ciblées.

Points forts :

• Éditeur drag & drop GrapesJS intégré (back-office)
• Triggers intelligents (exit intent, timer, inactivité, scroll, clic)
• Ciblage avancé (pages, catégories, produits, groupes clients, appareils, type de visiteur, URL)
• Templates prêts à l’emploi (saisonniers + utilitaires)
• Statistiques intégrées (vues, fermetures, clics CTA)
• Performances optimisées (zéro impact si aucune popup ne matche)

Pourquoi ce module ?

Les modules popup classiques sont souvent limités : mises en page figées, peu de déclencheurs, peu de ciblage, scripts lourds chargés partout, et back-office legacy. Creative Popup répond à ces problèmes avec une approche moderne : un éditeur visuel complet pour créer n’importe quel design, un moteur de règles précis pour diffuser la bonne popup au bon visiteur, et une architecture pensée pour les performances (rien n’est chargé côté front si aucune popup n’est éligible). Résultat : vous gardez une boutique rapide, tout en ajoutant un levier puissant d’acquisition (emails), de conversion (CTA, codes promo) et de réassurance (bandeaux, messages contextualisés).

Fonctionnalités

Éditeur visuel drag & drop (GrapesJS)

L’éditeur est le cœur du module. Vous glissez-déposez des blocs, vous modifiez les textes en direct, vous ajustez les styles finement et vous prévisualisez le rendu en desktop/tablette/mobile. Vous disposez d’un panneau Layers (arborescence), d’un Style Manager (typographie, backgrounds, bordures, padding/margin, ombres), et d’un panneau Traits (propriétés fonctionnelles comme URL de bouton, textes, etc.). L’édition est pensée pour la production : undo/redo, aperçu, export du code, et un workflow rapide pour itérer sur vos popups.

Blocs disponibles (10) :

• Titre (Heading)
• Paragraphe (Paragraph)
• Image
• Bouton CTA
• Formulaire newsletter
• Séparateur
• Compte à rebours (Countdown)
• Code promo (avec copie)
• Réseaux sociaux (Social follow)
• Bouton de fermeture

Déclencheurs intelligents (Triggers)

Creative Popup propose 5 triggers pour déclencher l’affichage au bon moment :

• Exit intent : affiche une popup lorsque l’utilisateur semble quitter la page (desktop).
• Timer : affichage après un délai précis (ms).
• Inactivité : affichage après absence d’interactions (ms).
• Scroll : affichage à un pourcentage ou un nombre de pixels scrollés.
• Clic sur élément : déclenchement via un sélecteur CSS.

Ces déclencheurs permettent de couvrir les scénarios e-commerce essentiels : capture d’email au bon timing, relance douce, récupération de panier, et activation d’une offre contextuelle.

Ciblage d’audience (Targeting)

Le ciblage permet d’afficher une popup uniquement dans le bon contexte, avec une logique AND (toutes les règles doivent matcher). Vous pouvez inclure/exclure selon :

• Type de page (home, produit, catégorie, panier, commande, CMS, etc.)
• Catégories et produits spécifiques
• Groupes clients (visiteur, invité, client + groupes personnalisés)
• Appareil (desktop/tablette/mobile)
• Nouveau visiteur ou visiteur récurrent
• URL contient (mot-clé dans l’URL)

Fréquence, planification et priorités

Pour éviter la lassitude et respecter l’expérience utilisateur, vous gérez :

• Fréquence : toujours, une fois par session, une seule fois, ou tous les X jours.
• Planification : date de début/fin (campagnes saisonnières, ventes flash).
• Priorité : si plusieurs popups sont éligibles, la priorité détermine l’ordre d’affichage.

Affichage et rendu responsive

Le module propose plusieurs modes d’affichage adaptés à chaque usage :

• Positions : center, top bar, bottom bar, slide-in left, slide-in right, fullscreen
• Animations : effets d’entrée/sortie (fade, slide, zoom, bounce, etc.)
• Overlay : activable, fermeture au clic configurable
• Responsive : conçu pour rester lisible et sans débordement, avec prévisualisation dans l’éditeur

Compte à rebours (Countdown)

Le compte à rebours peut fonctionner :

• En durée (heures/minutes/secondes) : chaque visiteur démarre un timer lorsqu’il voit la popup.
• En date de fin fixe : échéance commune (fin de soldes, Black Friday, etc.).

Templates prédéfinis

Le module inclut environ 30 templates prêts à personnaliser :

• Saisonniers : Black Friday, Cyber Monday, Christmas, Halloween, Valentine’s Day, Easter, Mother’s Day, Father’s Day, Summer/Winter Sales, New Year, Singles Day, Back to School, etc.
• Utilitaires : newsletter signup, discount code, exit intent cart recovery, cookie consent, welcome fullscreen, social follow, mobile app banner, countdown sale, etc.

Chaque template est entièrement modifiable dans l’éditeur. Un bouton Copy from permet de copier le contenu d’une langue vers une autre pour accélérer la traduction.

Statistiques intégrées

Le module enregistre :

• Vues (impressions)
• Fermetures
• Clics CTA

Les données sont agrégées par jour pour rester performantes, et l’envoi côté front est non bloquant (type sendBeacon), ce qui limite l’impact sur l’expérience.

Administration, multistore, multilingue

• Gestion via un Popup Manager (liste, filtres, activation rapide, dupliquer, supprimer)
• Multistore : activer une popup par boutique
• Multilingue : contenu distinct par langue, configuration commune (trigger/ciblage/planification partagés)
• Aucun override des fichiers core PrestaShop

Prérequis

Creative Popup est conçu pour les environnements modernes PrestaShop et s’intègre proprement au back-office.

• PrestaShop 8.0.0 minimum (compatible 8.x et 9.x)
• PHP 8.1 minimum
• MySQL 5.7+ ou MariaDB 10.3+
• HTTPS recommandé (bonnes pratiques e-commerce)

Remarque performances : l’éditeur GrapesJS est chargé uniquement en back-office sur la page d’édition. Côté front, le module évite de charger des assets si aucune popup n’est éligible.

Installation

Méthode 1 — Back-office (recommandée)

1. Allez dans Modules > Gestionnaire de modules
2. Cliquez sur Téléverser un module
3. Sélectionnez le fichier ZIP du module
4. Attendez la fin de l’installation
5. Cliquez sur Configurer

Méthode 2 — FTP

1. Décompressez l’archive ZIP
2. Uploadez le dossier du module dans /modules/
3. Dans le back-office : Modules > Gestionnaire de modules
4. Recherchez “Creative Popup”
5. Cliquez sur Installer, puis Configurer

Ce que fait l’installation

• Création des tables nécessaires (popups, contenus par langue, règles de ciblage, associations boutiques, statistiques)
• Enregistrement des hooks front/back
• Ajout d’un onglet de menu dédié au module dans l’administration

Démarrage rapide

Pour créer une première popup en quelques minutes :

1. Installez et ouvrez Creative Popup dans le back-office
2. Cliquez sur Nouvelle popup
3. Choisissez un template (ou une base vierge)
4. Personnalisez le contenu dans l’éditeur (textes, images, CTA, styles)
5. Configurez à droite :
   • Trigger (ex. Timer 5000 ms)
   • Position (ex. Center)
   • Fréquence (ex. Once per session)
   • Ciblage (ex. nouveaux visiteurs)
6. Sauvegardez, puis testez côté front

Cette approche permet de produire rapidement des popups orientées conversion tout en gardant une boutique fluide et cohérente.

Le Popup Manager (liste des popups)

Le Popup Manager centralise vos popups avec les informations clés : statut (active/inactive), trigger, position, planification, vues, et actions. Il inclut des filtres (nom, type de trigger) pour gérer facilement une stratégie multi-campagnes. Dans une boutique e-commerce, il est courant d’avoir plusieurs popups : une newsletter, une promo saisonnière, un exit intent panier, un bandeau cookies. Le système de priorité permet d’éviter les conflits et de contrôler l’ordre d’affichage lorsqu’un même visiteur remplit plusieurs conditions.

L’éditeur de popups

L’éditeur est organisé en trois zones :

• Panneau gauche : blocs et layers
• Canvas central : édition visuelle en temps réel
• Panneau droit : styles, traits, configuration

Canvas et responsive

Vous construisez votre popup directement sur le canvas (drag & drop, redimensionnement, déplacement). Un switcher de device vous permet de vérifier le rendu desktop/tablette/mobile, ce qui est essentiel pour des popups performantes sur mobile. L’objectif est d’obtenir une popup lisible, sans débordement, avec un CTA clair et une fermeture accessible.

Layers, Styles et Traits

• Layers : sélection précise d’éléments dans une popup complexe
• Styles : typographie, couleurs, arrière-plans, bordures, spacing
• Traits : propriétés fonctionnelles (URL du bouton, texte, cibles, liens sociaux)

Support multilingue

Chaque langue peut avoir un contenu distinct (HTML/CSS/données d’éditeur). Les paramètres de comportement (trigger, ciblage, position, planification) restent communs pour maintenir une logique de campagne cohérente. Le bouton Copy from accélère la déclinaison multi-langue sans repartir de zéro.

Configuration d’une popup

La configuration regroupe les réglages qui pilotent le comportement :

Paramètres généraux

• Nom interne de la popup
• Priorité (plus haut = plus prioritaire)
• Activation/désactivation

Triggers

• Timer (délai en ms)
• Exit intent (sensibilité)
• Scroll (pourcentage ou pixels)
• Inactivité (durée en ms)
• Clic sur élément (sélecteur CSS)

Fréquence (Frequency)

• Always
• Once per session
• Once ever
• Once per X days

Display (affichage)

• Position
• Animations entrée/sortie
• Overlay et fermeture au clic

Countdown

• Aucun
• Durée (H/M/S)
• Date de fin fixe

Targeting

Ajoutez des règles pour cibler précisément :

• type de page, catégorie, produit
• groupe client
• appareil
• nouveau / récurrent
• URL contient

Boutiques (multistore)

Cochez les boutiques où la popup doit être active. Le filtrage est automatique et évite d’afficher une popup sur une boutique non concernée.

Planification (Scheduling)

Définissez un intervalle de dates pour automatiser l’activation/désactivation d’une campagne, particulièrement utile pour les événements commerciaux (soldes, Black Friday, fêtes).

Templates prédéfinis

Les templates servent de point de départ pour produire rapidement des popups efficaces : newsletter, promo code, exit intent panier, cookie consent, ventes flash avec countdown, etc. Dans une démarche SEO et conversion, l’intérêt est de garder une cohérence visuelle avec votre thème, tout en testant plusieurs variantes (titres, visuels, CTA, timing). Vous pouvez créer un set de templates “maison” (dupliquer, adapter, traduire) afin d’industrialiser vos campagnes marketing.

Statistiques

Les statistiques aident à piloter la performance :

• une popup peut être très vue mais peu cliquée (CTA à optimiser),
• une popup peut être beaucoup fermée (timing, ciblage, fréquence à ajuster),
• une popup peut performer sur mobile mais pas sur desktop (adapter position/format).

En e-commerce, ces données permettent d’itérer vite : améliorer le texte, déplacer le CTA, réduire l’overlay, changer le trigger, ou ajuster le ciblage à une catégorie plus pertinente.

Affichage front-office

Le module gère les positions (center, bars, slide-in, fullscreen), les animations CSS, l’overlay, et plusieurs méthodes de fermeture (bouton, overlay, touche Escape). Le rendu final dépend du HTML/CSS généré dans l’éditeur, ce qui garantit une liberté totale. Grâce aux media queries et au switcher responsive, vous pouvez construire une version mobile plus courte, avec un CTA immédiatement visible, ce qui est souvent la clé pour améliorer le taux de conversion sans dégrader l’expérience.

Architecture technique

Creative Popup repose sur une stack moderne :

• Back-office : contrôleurs Symfony + templates Twig
• Éditeur : GrapesJS (chargé uniquement dans l’édition)
• Front : moteur de triggers en JavaScript léger + Alpine.js pour la réactivité
• Données : tables SQL dédiées (contenus par langue, règles, stats, multistore)

Filtrage serveur et performances

Le module évalue le contexte (page, catégorie, appareil, groupe client, langue, boutique, cookies) côté serveur. Si aucune popup ne matche, rien n’est injecté (pas de JS/CSS inutile). Si des popups matchent, la configuration est injectée en JSON et le moteur front gère les triggers. Cette approche réduit drastiquement l’impact sur les performances, ce qui est essentiel pour le SEO et l’expérience utilisateur.

Aucun override

Le module ne modifie aucun fichier core. Il s’appuie sur les hooks et le système de menu/tabs natifs, ce qui facilite la maintenance, la compatibilité et les mises à jour.

Cas d’usage courants

Récupération de paniers abandonnés

• Template : Exit intent cart recovery
• Trigger : Exit intent
• Ciblage : page panier
• Fréquence : once per session
• Objectif : proposer une incitation (code promo, livraison) au moment où l’utilisateur hésite à partir.

Inscription newsletter (lead generation)

• Template : Newsletter signup
• Trigger : timer (5s) ou scroll (50%)
• Ciblage : nouveaux visiteurs
• Fréquence : once ever
• Objectif : augmenter la base email avec une offre de bienvenue.

Bandeau cookies / consentement

• Template : Cookie consent
• Trigger : timer court
• Position : bottom bar
• Fréquence : once ever
• Objectif : afficher un message discret et conforme, sans nuire à la navigation.

Vente flash avec compte à rebours

• Template : Countdown sale
• Trigger : timer (2–3s)
• Countdown : date de fin fixe
• Planification : période de campagne
• Objectif : créer l’urgence et améliorer la conversion.

FAQ

Combien de popups puis-je créer ?

Il n’y a pas de limite pratique. La combinaison ciblage + priorités permet de gérer plusieurs campagnes sans conflit, même dans des boutiques avec de nombreuses catégories et des promotions régulières.

GrapesJS ralentit-il la boutique ?

Non, car GrapesJS est chargé uniquement dans le back-office sur la page d’édition. Côté front, le module injecte uniquement ce qui est nécessaire et peut n’injecter absolument rien si aucune popup ne matche.

La popup fonctionne-t-elle sur mobile ?

Oui, le rendu est responsive. Notez que l’exit intent basé sur la souris est une logique desktop ; sur mobile, privilégiez timer/scroll/inactivité ou un trigger par clic.

Le multistore est-il supporté ?

Oui, vous pouvez activer une popup sur une ou plusieurs boutiques. Le filtrage se fait automatiquement selon la boutique courante.

Le module respecte-t-il le RGPD ?

Le module utilise des cookies principalement pour la fréquence d’affichage et la détection de première visite. Aucune donnée personnelle n’est stockée dans ces cookies. Il est recommandé de documenter cet usage dans votre politique de confidentialité.

Dépannage

La popup ne s’affiche pas

• Vérifiez qu’elle est active
• Vérifiez les dates de planification
• Vérifiez le cookie de fréquence (testez en navigation privée)
• Vérifiez les règles de ciblage (page, appareil, groupe client, URL)
• Vérifiez la boutique (multistore)
• Videz le cache PrestaShop

Le contenu est vide

Le contenu est stocké par langue. Si le visiteur navigue dans une langue non renseignée, la popup peut sembler vide. Créez le contenu pour chaque langue ou utilisez Copy from pour dupliquer et traduire.

Exit intent ne fonctionne pas

L’exit intent basé sur le mouvement de souris est desktop uniquement. Ajustez la sensibilité et testez sur une page rechargée.

Le compte à rebours ne s’anime pas

Assurez-vous d’avoir ajouté un bloc Countdown dans l’éditeur et activé un mode (durée ou date fixe) dans la configuration.

Les statistiques restent à zéro

Certains bloqueurs (adblock) peuvent perturber l’envoi. Testez sans extension et vérifiez l’accessibilité de l’endpoint stats.

Compatibilité

PrestaShop

• 8.0.x : compatible
• 8.1.x : compatible
• 8.2.x : compatible
• 9.0.x : compatible

PHP

• 8.1 : compatible
• 8.2 : compatible
• 8.3 : compatible
• 8.4 : compatible

Bases de données

• MySQL 5.7+ / 8.0 : compatible
• MariaDB 10.3+ : compatible

Thèmes

• Classic (PS8) : compatible
• Hummingbird (PS9) : compatible
• Thèmes custom : compatible

Navigateurs

• Chrome, Firefox, Safari, Edge (versions récentes)

Changelog

Version 1.0.0 — Mars 2026

• Éditeur visuel GrapesJS avec 10 blocks personnalisés
• 5 triggers : exit intent, timer, inactivité, scroll, clic sur élément
• Ciblage avancé : page type, catégorie, produit, groupe client, appareil, nouveau/récurrent, URL contains
• Planification (dates début/fin), priorités et fréquence d’affichage
• Positions multiples + animations entrée/sortie
• Compte à rebours (durée ou date fixe)
• Templates prédéfinis (saisonniers + utilitaires)
• Statistiques : vues, fermetures, clics CTA
• Multilingue + multistore
• Contrôleurs Symfony, aucun override, filtrage serveur (assets conditionnels)

Support

Pour obtenir de l’aide, contactez le support via votre espace client / marketplace, ou via le canal de support associé au module.

Avant de contacter le support, préparez :

1. Version PrestaShop et PHP
2. Nom du thème (et modules front impactants)
3. Description précise du problème + étapes pour reproduire
4. Captures d’écran (configuration + rendu front)
5. Logs PrestaShop si disponibles
6. Console navigateur (F12) en cas d’erreur JS

Licence

Ce module est distribué sous licence Academic Free License (AFL 3.0).

Copyright © WePresta. Tous droits réservés.