Introduction

EWM Modal CTA est un plugin professionnel pour WordPress qui permet la création et la gestion avancée de modales interactives. Il est conçu pour la capture de leads via des formulaires multi-étapes et pour l’affichage d’annonces dynamiques, avec une intégration poussée avec WooCommerce pour stimuler les ventes.

Ses fonctionnalités clés incluent un Custom Post Type (ew_modal) pour une gestion organisée, un constructeur visuel basé sur des onglets, un système d’injection automatique pour afficher des modales sans shortcodes, et une architecture optimisée pour les performances et la sécurité.

Installation et Création

Installation du Plugin

1. Téléchargez le fichier .zip du plugin EWM Modal CTA.

2. Dans votre tableau de bord WordPress, allez dans Plugins > Ajouter nouveau.

3. Cliquez sur le bouton Téléverser un plugin en haut de la page.

4. Sélectionnez le fichier .zip que vous avez téléchargé et cliquez sur Installer maintenant.

5. Une fois installé, cliquez sur Activer le plugin.

Créer une Nouvelle Modale

La création d’une modale est un processus centralisé grâce au constructeur visuel :

1. Dans le menu d’administration, allez dans EWM Modals > Modal Builder.

2. S’il s’agit d’une nouvelle modale, vous serez dirigé vers le constructeur. Si vous souhaitez en modifier une existante, allez dans EWM Modals > Toutes les modales et cliquez sur “Modifier”.

3. Le constructeur utilise un système d’onglets pour configurer tous les aspects de la modale.

Utilisation du Modal Builder

Le constructeur visuel est le cœur du plugin et vous permet de configurer chaque détail de votre modale de manière intuitive.

Onglet Général

Ici, vous définissez la configuration de base de la modale :

• Titre de la modale : Le titre interne pour identifier votre modale dans l’administration.
• Mode de la modale : Choisissez entre “Formulaire Multi-Étapes” (pour la capture de données) ou “Annonce/Notification” (pour afficher un simple message).
• Modale active : Activez ou désactivez la modale globalement.
• Utiliser la configuration globale : Permet à la modale de s’afficher automatiquement selon les règles des onglets “Déclencheurs” et “Avancé”. Si désactivé, elle ne fonctionnera qu’avec un shortcode.

Onglet Étapes et Champs

Cette section vous permet de construire le contenu de la modale :

• Ajouter des Étapes : Pour les modales de formulaire, vous pouvez créer plusieurs étapes pour diviser la capture de données. Chaque étape a son propre titre, sous-titre et description.
• Ajouter des Champs : Dans chaque étape, vous pouvez ajouter des champs de formulaire comme du texte, email, téléphone, zone de texte, sélecteurs, boutons radio et cases à cocher.
• Messages de Succès : Configurez le titre et le message qui seront affichés à l’utilisateur après avoir complété le formulaire avec succès.

Onglet Design

Personnalisez l’apparence de votre modale :

• Taille de la modale : Définissez la largeur de la modale (Petit, Moyen, Grand).
• Animation : Choisissez l’animation d’entrée (Fondu, Glissé, Zoom).
• Couleurs : Sélectionnez les couleurs primaires, secondaires et d’arrière-plan pour qu’elles correspondent à l’identité de votre marque.

Affichage et Déclencheurs

Contrôlez où, quand et comment vos modales apparaissent.

Règles d’Affichage (Onglet Avancé)

Définissez les conditions pour l’injection automatique :

• Appareils Cibles : Choisissez si la modale s’affichera sur ordinateur de bureau, tablette ou mobile.
• Pages Cibles : Incluez ou excluez la modale sur des pages spécifiques (Accueil, Blog, pages concrètes).
• Rôles Utilisateur : Affichez la modale uniquement à certains rôles d’utilisateur (ex. tous, seulement les visiteurs, seulement les administrateurs).
• Omettre sur les pages WC : Empêche les modales générales d’apparaître sur les pages de produits ou catégories WooCommerce afin de ne pas interférer avec des promotions spécifiques.

Configuration des Déclencheurs (Onglet Déclencheurs)

Définissez les actions qui activeront la modale :

• Intention de Sortie : S’affiche lorsque l’utilisateur tente de quitter la page.
• Délai : Apparaît après un nombre déterminé de secondes.
• Déclencheur au Défilement : S’active lorsque l’utilisateur a fait défiler un certain pourcentage de la page.
• Déclencheur Manuel : Permet d’activer la modale en cliquant sur un élément spécifique (en utilisant data-ewm-modal="ID").
• Fréquence d’Affichage : Contrôle la fréquence à laquelle un même utilisateur voit la modale (toujours, une fois par session, par jour, etc.).

Utilisation des Shortcodes

Pour un contrôle manuel, vous pouvez insérer la modale n’importe où dans votre contenu en utilisant son shortcode. Après avoir enregistré une modale, un shortcode unique sera généré que vous pourrez copier-coller.

Exemple : [ew_modal id="123"]

Intégration avec WooCommerce

EWM Modal CTA inclut des fonctionnalités spécifiques pour améliorer les conversions dans les boutiques WooCommerce.

Activation et Configuration

1. Dans l’onglet Général du constructeur, cochez la case “Intégration WooCommerce”.

2. Cela activera un nouvel onglet appelé WooCommerce et adaptera l’interface pour créer une modale de promotion.

3. Dans l’onglet WooCommerce, vous pourrez sélectionner un coupon de réduction existant dans votre boutique.

Créer une Modale de Promotion

Une fois l’intégration activée :

• Sélection de Coupon : Choisissez un coupon et le plugin affichera ses détails.
• Contenu de la Promotion : Rédigez un titre et une description pour l’offre. Vous pouvez utiliser le bouton “Remplir automatiquement” pour générer du texte basé sur les détails du coupon.
• Compte à Rebours d’Urgence : Activez un compte à rebours pour créer un sentiment d’urgence et motiver l’achat.
• Appliquer le Coupon Automatiquement : Configurez le bouton d’appel à l’action (CTA) pour qu’il applique le coupon au panier et redirige l’utilisateur.

Ces modales sont conçues pour apparaître sur les pages de produits et éviter les conflits, par exemple, en ne s’affichant pas si un coupon similaire est déjà appliqué.

Gestion des Soumissions

Toutes les données soumises via les formulaires des modales sont sauvegardées de manière sécurisée et peuvent être gérées facilement.

1. Dans le menu d’administration, allez dans EWM Modals > Soumissions.

2. Vous verrez une liste de toutes les soumissions. Chaque entrée affiche les données envoyées, la modale d’origine et la page depuis laquelle le formulaire a été soumis.

3. Vous pouvez cliquer sur chaque soumission pour voir les détails complets.

Fonctionnalités Avancées

Sécurité et Assainissement

Le plugin implémente un système d’assainissement personnalisé qui protège contre les attaques XSS sans supprimer le HTML nécessaire au bon fonctionnement des formulaires et du contenu de la modale. Toutes les entrées sont validées et le contenu des champs est assaini de manière sécurisée.

Performances

EWM Modal CTA est optimisé pour ne pas affecter la vitesse de votre site. Les scripts et les styles ne sont chargés que sur les pages où une modale est active, grâce à un système de détection intelligent qui fonctionne aussi bien avec les shortcodes qu’avec l’injection automatique.

API REST

Le plugin expose plusieurs points de terminaison dans l’API REST de WordPress pour des fonctionnalités telles que la soumission de formulaires depuis le frontend, la récupération de données utilisateur pour le remplissage automatique et la consultation de la visibilité des modales WooCommerce. Cela permet des intégrations avancées et un fonctionnement découplé (headless).